forked from MattKetmo/darkroomjs
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
170 lines (145 loc) · 5.21 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DarkroomJS</title>
<link rel="stylesheet" href="./build/css/darkroom.min.css">
<link rel="stylesheet" href="./demo/css/page.css">
</head>
<body>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-23657373-2', 'mattketmo.github.io');
ga('send', 'pageview');
</script>
<header id="header">
<a href="https://github.com/MattKetmo/darkroomjs">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://s3.amazonaws.com/github/ribbons/forkme_right_white_ffffff.png"
alt="Fork on GitHub">
</a>
<div class="container">
<h1>Darkroom<strong>JS</strong></h1>
<p class="hero">
Extensible image editing tool powered by HTML5 canvas.
</p>
</div>
</header>
<div id="content">
<div class="container">
<section class="copy">
<h2 class="sr-only">Introduction</h2>
<p class="intro">
<strong>DarkroomJS</strong> is a JavaScript library which provides basic
image editing tools in your browser, such as <strong>rotation</strong> or <strong>cropping</strong>.
It is based on the awesome <a href="http://fabricjs.com/">FabricJS</a> library
to handle images in HTML5 canvas.
</p>
<figure class="image-container target">
<!-- You may add attribute crossOrigin="anonymous" for CORS -->
<img src="./demo/images/domokun.jpg" alt="DomoKun" id="target">
<figcaption class="image-meta">
<a target="_blank" href="http://www.flickr.com/photos/bentorode/5176910387/">
©
<strong class="image-meta-title">DomoKun</strong>
by
<em class="image-meta-author">Ben Torode</em>
</a>
</figcaption>
</figure>
<h2>Why?</h2>
<p>
It's easy to get a <a href="http://www.hotscripts.com/blog/javascript-image-cropping-scripts/">
javascript script</a> to crop an image in a web page. But if your want
more features like rotation or brightness adjustment, then you will have to do it yourself.
No more jQuery plugins here. It only uses the power of HTML5 canvas to make what ever you
want with your image.
</p>
<h2>The concept</h2>
<p>
The library is designed to be easily extendable.
The core script only transforms the target image to a canvas with a
FabricJS instance, and creates an empty toolbar.
All the features are then implemented in separate plugins.
</p>
<figure>
<pre><code>.
├── darkroom.js
└── plugins
├── darkroom.crop.js
├── darkroom.history.js
├── darkroom.rotate.js
└── darkroom.save.js</code></pre>
</figure>
<p>
Each plugin is responsible for creating its own functionality.
Buttons can easily be added to the toolbar and binded with those features.
</p>
<h2>Features</h2>
<p>
Currently, the implemented features are:
</p>
<dl>
<dt>Crop</dt>
<dd>
Crops the image by selecting a zone with your mouse.
This supports several options like ratio and dimensions control (min/max).
</dd>
<dt>Rotation</dt>
<dd>
Adds two buttons to let you rotate hte image to the left or the right.
</dd>
<dt>History</dt>
<dd>
Allows to undo and redo any changes on the main image.
</dd>
<dt>Save</dt>
<dd>
Transform back the canvas into image.
This is mainly a proof of concept to show how plugins work.
This one only makes <a href="https://github.com/MattKetmo/darkroomjs/blob/master/lib/js/plugins/darkroom.save.js">a few lines</a>.
</dd>
</dl>
<!--
<h2>Interactive example</h2>
<p></p>
-->
<h2>Contributing</h2>
<p>
The project is under MIT license.
Feel free to fork the project on <a href="https://github.com/MattKetmo/darkroomjs">GitHub</a>
or report issues. All ideas are also welcome.
</p>
</section>
</div>
</div>
<script src="./vendor/fabric.js"></script>
<script src="./build/js/darkroom.min.js"></script>
<script>
var dkrm = new Darkroom('#target', {
// Size options
minWidth: 100,
minHeight: 100,
maxWidth: 650,
maxHeight: 500,
plugins: {
//save: false,
crop: {
quickCropKey: 67, //key "c"
//minHeight: 50,
//minWidth: 50,
//ratio: 1
}
},
init: function() {
var cropPlugin = this.getPlugin('crop');
cropPlugin.selectZone(170, 25, 300, 300);
//cropPlugin.requireFocus();
}
});
</script>
</body>
</html>