-
Notifications
You must be signed in to change notification settings - Fork 10
/
index.html
167 lines (127 loc) · 9.01 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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Image-crop by peterver</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
</head>
<body>
<section class="page-header">
<h1 class="project-name">Image-crop</h1>
<h2 class="project-tagline">A lightweight vanilla js image cropper, with zero dependency requirements</h2>
<a href="https://github.com/peterver/image-crop" class="btn">View on GitHub</a>
<a href="https://github.com/peterver/image-crop/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/peterver/image-crop/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<h1>
<a id="lightweight-javascript-imagecropper" class="anchor" href="#lightweight-javascript-imagecropper" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Lightweight Javascript ImageCropper</h1>
<p><a href="https://travis-ci.org/peterver/image-crop"><img src="https://travis-ci.org/peterver/image-crop.svg?branch=master" alt="Build Status"></a>
<a href="https://www.npmjs.com/package/image_cropper"><img src="https://img.shields.io/npm/v/image_cropper.svg" alt="npm"></a>
<a href=""><img src="https://img.shields.io/npm/dt/image_cropper.svg?maxAge=2592000" alt="npm"></a>
<a href=""><img src="https://img.shields.io/npm/l/image_cropper.svg?maxAge=2592000" alt="npm"></a>
<a href="https://www.paypal.me/peterver"><img src="https://img.shields.io/badge/PayPal-Donate-blue.svg?style=flat" title="Buy me a beer" alt="Buy me a beer"></a>
<a href=""><img src="https://img.shields.io/david/peterver/image-crop.svg?maxAge=2592000" alt="David"></a></p>
<p>A lightweight javascript imagecropper written in vanilla js
with zero-dependency injection that builds itself into an object.</p>
<h1>
<a id="getting-started" class="anchor" href="#getting-started" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Getting Started</h1>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> img_c <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">ImageCropper</span>(selector, image, options);</pre></div>
<h3>
<a id="selector" class="anchor" href="#selector" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>selector</h3>
<p>The selector is an html5 css selector ( such as '#myTestDiv' ), basically anything that works with a querySelector does the job.</p>
<p>It should point to the element where you want the imagecropper to be located.</p>
<h3>
<a id="image" class="anchor" href="#image" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>image</h3>
<p>The image can either be a javascript Image object loaded through a FileReader, this can be done like so</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> reader <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">FileReader</span>();
<span class="pl-smi">reader</span>.<span class="pl-en">onload</span> <span class="pl-k">=</span> <span class="pl-k">function</span> (<span class="pl-smi">evt</span>) {
<span class="pl-k">var</span> img_c <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">ImageCropper</span>(<span class="pl-k">...</span>, <span class="pl-smi">evt</span>.<span class="pl-c1">target</span>.<span class="pl-smi">result</span>, <span class="pl-k">...</span>);
};
<span class="pl-smi">reader</span>.<span class="pl-en">readAsDataURL</span>(<span class="pl-k">...</span>myfile<span class="pl-k">...</span>);</pre></div>
<p>Or you can simply pass an existing url, for example </p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> img_c <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">ImageCropper</span>(<span class="pl-k">...</span>, <span class="pl-s"><span class="pl-pds">'</span>../assets/my_img.jpg<span class="pl-pds">'</span></span>, <span class="pl-k">...</span>);</pre></div>
<h3>
<a id="options" class="anchor" href="#options" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>options</h3>
<p>There are several possible options defined for the image cropper </p>
<ul>
<li>
<strong>max_width</strong><br>
Sets the maximum width that the imagecropper can become<br><br>
</li>
<li>
<strong>max_height</strong><br>
Sets the maximum height for the imagecropper<br><br>
</li>
<li>
<strong>min_crop_width</strong><br>
The minimum width that the cropped image can be<br><br>
</li>
<li>
<strong>min_crop_height</strong><br>
The miminum height that the cropped image can be<br><br>
</li>
<li>
<strong>create_cb</strong><br>
A callback function that is called when the imagecropper has finished creating, this will pass an object containing the dimensions of the imagecropper ( for styling or positioning purposes )<br><br>
</li>
<li>
<strong>update_cb</strong><br>
Callback function that is called everytime a move/change happens<br><br>
</li>
<li>
<strong>destroy_cb</strong><br>
A callback function that is called when the imagecropper has finished destroying itself<br><br>
</li>
<li>
<strong>fixed_size</strong><br>
A boolean ( true | false ), that tells the image cropper if it should constrain the size of the cropped area to be fixed or not ?<br><br>
</li>
<li>
<strong>mode</strong> (default = 'square')<br>
Sets the type of preview you should see when using the image cropper, possible options are
<ul>
<li><em>'square'</em></li>
<li><em>'circular'</em></li>
</ul>
</li>
</ul>
<h1>
<a id="cropping-an-image-mime_type-quality" class="anchor" href="#cropping-an-image-mime_type-quality" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Cropping an image (mime_type, quality)</h1>
<p>When you're all done with your changes, you can crop the image by calling the <strong>crop</strong> function.</p>
<p>This will return a base64 string that you can then do some funky stuff with.</p>
<div class="highlight highlight-source-js"><pre><span class="pl-k">var</span> img_b64_str <span class="pl-k">=</span> <span class="pl-smi">img_c</span>.<span class="pl-en">crop</span>(mime_type, quality);
<span class="pl-k">...</span> <span class="pl-c">// do some funky stuff here</span></pre></div>
<h3>
<a id="mime_type--default--imagejpeg" class="anchor" href="#mime_type--default--imagejpeg" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>mime_type ( default = 'image/jpeg')</h3>
<p>The following mime_types are currently supported in this build, they need to be passed as a string value.</p>
<ul>
<li>image/jpeg</li>
<li>image/png</li>
</ul>
<h3>
<a id="quality" class="anchor" href="#quality" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Quality</h3>
<p>The quality is a numeric value between 0 and 1. Where 1 is the highest quality setting, and 0 is the lowest quality setting. </p>
<h1>
<a id="cleaning-up-an-imagecropper-instance" class="anchor" href="#cleaning-up-an-imagecropper-instance" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Cleaning up an imagecropper instance</h1>
<div class="highlight highlight-source-js"><pre>img_c <span class="pl-k">=</span> <span class="pl-k">new</span> <span class="pl-en">ImageCropper</span>(<span class="pl-s"><span class="pl-pds">'</span>#test-imagecrop<span class="pl-pds">'</span></span>, <span class="pl-s"><span class="pl-pds">'</span>img.jpg<span class="pl-pds">'</span></span>);
<span class="pl-smi">img_c</span>.<span class="pl-en">destroy</span>();</pre></div>
<p>or you can just delete the dom node that the image cropper was created in ( or its parent ),
and the imagecropper instance will destroy itself :]</p>
<h1>
<a id="example" class="anchor" href="#example" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Example</h1>
<p>For an example, check out the example folder in the repository</p>
<h1>
<a id="author" class="anchor" href="#author" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Author</h1>
<p>Peter Vermeulen</p>
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/peterver/image-crop">Image-crop</a> is maintained by <a href="https://github.com/peterver">peterver</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>