39 |
42 | ```
43 |
44 | You can also pass some options:
45 |
46 | ```javascript
47 | new Darkroom('#target', {
48 | // Canvas initialization size
49 | minWidth: 100,
50 | minHeight: 100,
51 | maxWidth: 500,
52 | maxHeight: 500,
53 |
54 | // Plugins options
55 | plugins: {
56 | crop: {
57 | minHeight: 50,
58 | minWidth: 50,
59 | ratio: 1
60 | },
61 | save: false // disable plugin
62 | },
63 |
64 | // Post initialization method
65 | initialize: function() {
66 | // Active crop selection
67 | this.plugins['crop'].requireFocus();
68 |
69 | // Add custom listener
70 | this.addEventListener('core:transformation', function() { /* ... */ });
71 | }
72 | });
73 | ```
74 |
75 | ## Why?
76 |
77 | It's easy to get a javascript script to crop an image in a web page.
78 | But if your want more features like rotation or brightness adjustment, then you
79 | will have to do it yourself. No more jQuery plugins here.
80 | It only uses the power of HTML5 canvas to make what ever you want with your image.
81 |
82 | ## The concept
83 |
84 | The library is designed to be easily extendable. The core script only transforms
85 | the target image to a canvas with a FabricJS instance, and creates an empty toolbar.
86 | All the features are then implemented in separate plugins.
87 |
88 | Each plugin is responsible for creating its own functionality.
89 | Buttons can easily be added to the toolbar and binded with those features.
90 |
91 | ## Contributing
92 |
93 | Run `npm develop` to build and watch the files while developing.
94 |
95 | ## FAQ
96 |
97 | How can I access the edited image?
98 |
99 | In order to get the edited image data, you must ask the canvas for it. By doing so inside the callback of your choice (in this case save), you can assign the edited image data to wherever you please.
100 |
101 | ```javascript
102 | save: {
103 | callback: function() {
104 | this.darkroom.selfDestroy(); // Cleanup
105 | var newImage = dkrm.canvas.toDataURL();
106 | fileStorageLocation = newImage;
107 | }
108 | }
109 | ```
110 |
111 | ## License
112 |
113 | DarkroomJS is released under the MIT License. See the [bundled LICENSE file](LICENSE)
114 | for details.
115 |
116 |
--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "darkroom",
3 | "description": "Extensible image editing tool via HTML canvas",
4 | "version": "2.0.0",
5 | "homepage": "http://mattketmo.github.io/darkroomjs/",
6 | "authors": [
7 | "Matthieu Moquet 
15 | Introduction
29 | 30 |31 | DarkroomJS is a JavaScript library which provides basic 32 | image editing tools in your browser, such as rotation or cropping. 33 | It is based on the awesome FabricJS library 34 | to handle images in HTML5 canvas. 35 |
36 | 37 |
40 |
41 | Why?
53 | 54 |55 | It's easy to get a 56 | javascript script to crop an image in a web page. But if you want 57 | more features like rotation or brightness adjustment, then you will have to do all of this yourself. 58 | No more jQuery plugins here. DarkroomJS allows you to do whatever you want with your images by 59 | using the power of the HTML5 canvas. 60 |
61 | 62 |The concept
63 | 64 |65 | The library is designed to be easily extendable. 66 | The core script only transforms the target image to a canvas with a 67 | FabricJS instance, and creates an empty toolbar. 68 | All the features are then implemented in separate plugins. 69 |
70 | 71 |.
73 | ├── darkroom.js
74 | └── plugins
75 | ├── darkroom.crop.js
76 | ├── darkroom.history.js
77 | ├── darkroom.rotate.js
78 | └── darkroom.save.js82 | Each plugin is responsible for creating its own functionality. 83 | Buttons can easily be added to the toolbar and binded with those features. 84 |
85 | 86 |Features
87 | 88 |89 | Currently, the implemented features are: 90 |
91 | 92 |-
93 |
- Crop 94 |
- 95 | Crops the image by selecting a zone with your mouse. 96 | This supports several options like ratio and dimensions control (min/max). 97 | 98 | 99 |
- Rotation 100 |
- 101 | Adds two buttons to let you rotate the image left or right. 102 | 103 | 104 |
- History 105 |
- 106 | Allows you to undo and redo any changes you've made to the image. 107 | 108 | 109 |
- Save 110 |
- 111 | Transforms the canvas back into an image. 112 | This is mainly a proof of concept to show how plugins work. 113 | This plugin only takes a few lines. 114 | 115 |
Contributing
123 | 124 |125 | The project is released under the MIT license. 126 | Feel free to fork the project on GitHub 127 | or report issues. All ideas are also welcome. 128 |
129 | 130 |