Skip to content

Commit 81c7b19

Browse files
DonaldcwlDonaldcwl
authored
Merge pull request #43 from Donaldcwl/dev
Dev v1.0.7
2 parents 8d926db + fbbbadb commit 81c7b19

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

46 files changed

+18424
-5732
lines changed

‎.gitignore‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,4 +86,6 @@ Network Trash Folder
8686
Temporary Items
8787
.apdisk
8888

89-
.idea/
89+
.idea/
90+
dist/
91+
coverage/

‎CHANGELOG.md‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,13 @@
1+
## v1.0.7 (15 Mar 2020)
2+
* add onProgress function in options for compression progress updates
3+
* allow fileType override
4+
* fix garbage clean canvas for safari
5+
* fix issue in Cordova support
6+
* fix issue in IE browser
7+
* fix other issues
8+
* useWebWorker default set to false
9+
* add ts type file
10+
111
## v1.0.6 (5 July 2019)
212
* fixed: exif orientation do not work in some situations
313

@@ -18,4 +28,4 @@
1828
* optimized: use of OffscreenCanvas when support, fallback to document.createElement('canvas')
1929
* optimized: use createImageBitmap when support, fallback to FileReader readAsDataURL
2030
* added: support web worker
21-
* added: follows image exif orientation
31+
* added: follows image exif orientation

‎README.md‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,10 @@ const options = {
4848
maxSizeMB: number, // (default: Number.POSITIVE_INFINITY)
4949
maxWidthOrHeight: number, // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined)
5050
useWebWorker: boolean, // optional, use multi-thread web worker, fallback to run in main-thread (default: true)
51-
maxIteration: number // optional, max number of iteration to compress the image (default: 10)
51+
maxIteration: number, // optional, max number of iteration to compress the image (default: 10)
52+
exifOrientation: number, // optional, see https://stackoverflow.com/a/32490603/10395024
53+
onProgress: Function, // optional, a function takes one progress argument (percentage from 0 to 100)
54+
fileType: string // optional, fileType override
5255
}
5356

5457
imageCompression(file: File, options): Promise<File>

‎coverage/badge.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎coverage/coverage-final.json‎

Lines changed: 3 additions & 3 deletions
Large diffs are not rendered by default.

‎coverage/coverage-summary.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
{"total": {"lines":{"total":157,"covered":120,"skipped":0,"pct":76.43},"statements":{"total":171,"covered":122,"skipped":0,"pct":71.35},"functions":{"total":22,"covered":19,"skipped":0,"pct":86.36},"branches":{"total":73,"covered":40,"skipped":0,"pct":54.79}}
2-
,"/Users/donald/Project/browser-image-compression/lib/image-compression.js": {"lines":{"total":21,"covered":21,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":21,"covered":21,"skipped":0,"pct":100},"branches":{"total":10,"covered":9,"skipped":0,"pct":90}}
3-
,"/Users/donald/Project/browser-image-compression/lib/index.js": {"lines":{"total":26,"covered":22,"skipped":0,"pct":84.62},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":26,"covered":22,"skipped":0,"pct":84.62},"branches":{"total":17,"covered":12,"skipped":0,"pct":70.59}}
4-
,"/Users/donald/Project/browser-image-compression/lib/utils.js": {"lines":{"total":110,"covered":77,"skipped":0,"pct":70},"functions":{"total":20,"covered":17,"skipped":0,"pct":85},"statements":{"total":124,"covered":79,"skipped":0,"pct":63.71},"branches":{"total":46,"covered":19,"skipped":0,"pct":41.3}}
1+
{"total": {"lines":{"total":175,"covered":135,"skipped":0,"pct":77.14},"statements":{"total":189,"covered":137,"skipped":0,"pct":72.49},"functions":{"total":24,"covered":20,"skipped":0,"pct":83.33},"branches":{"total":87,"covered":46,"skipped":0,"pct":52.87}}
2+
,"/Users/donald/Project/browser-image-compression/lib/image-compression.js": {"lines":{"total":28,"covered":28,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":28,"covered":28,"skipped":0,"pct":100},"branches":{"total":14,"covered":13,"skipped":0,"pct":92.86}}
3+
,"/Users/donald/Project/browser-image-compression/lib/index.js": {"lines":{"total":29,"covered":25,"skipped":0,"pct":86.21},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":29,"covered":25,"skipped":0,"pct":86.21},"branches":{"total":19,"covered":13,"skipped":0,"pct":68.42}}
4+
,"/Users/donald/Project/browser-image-compression/lib/utils.js": {"lines":{"total":118,"covered":82,"skipped":0,"pct":69.49},"functions":{"total":22,"covered":18,"skipped":0,"pct":81.82},"statements":{"total":132,"covered":84,"skipped":0,"pct":63.64},"branches":{"total":54,"covered":20,"skipped":0,"pct":37.04}}
55
}

‎coverage/image-compression.js.html‎

Lines changed: 140 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,62 @@
1+
12
<!doctype html>
23
<html lang="en">
4+
35
<head>
46
<title>Code coverage report for image-compression.js</title>
57
<meta charset="utf-8" />
68
<link rel="stylesheet" href="prettify.css" />
79
<link rel="stylesheet" href="base.css" />
8-
<meta name="viewport" content="width=device-width, initial-scale=1">
10+
<link rel="shortcut icon" type="image/x-icon" href="favicon.png" />
11+
<meta name="viewport" content="width=device-width, initial-scale=1" />
912
<style type='text/css'>
1013
.coverage-summary .sorter {
1114
background-image: url(sort-arrow-sprite.png);
1215
}
1316
</style>
1417
</head>
18+
1519
<body>
1620
<div class='wrapper'>
17-
<div class='pad1'>
18-
<h1>
19-
<a href="index.html">All files</a> image-compression.js
20-
</h1>
21-
<div class='clearfix'>
22-
<div class='fl pad1y space-right2'>
23-
<span class="strong">100% </span>
24-
<span class="quiet">Statements</span>
25-
<span class='fraction'>21/21</span>
26-
</div>
27-
<div class='fl pad1y space-right2'>
28-
<span class="strong">90% </span>
29-
<span class="quiet">Branches</span>
30-
<span class='fraction'>9/10</span>
31-
</div>
32-
<div class='fl pad1y space-right2'>
33-
<span class="strong">100% </span>
34-
<span class="quiet">Functions</span>
35-
<span class='fraction'>1/1</span>
36-
</div>
37-
<div class='fl pad1y space-right2'>
38-
<span class="strong">100% </span>
39-
<span class="quiet">Lines</span>
40-
<span class='fraction'>21/21</span>
41-
</div>
21+
<div class='pad1'>
22+
<h1><a href="index.html">All files</a> image-compression.js</h1>
23+
<div class='clearfix'>
24+
25+
<div class='fl pad1y space-right2'>
26+
<span class="strong">100% </span>
27+
<span class="quiet">Statements</span>
28+
<span class='fraction'>28/28</span>
29+
</div>
30+
31+
32+
<div class='fl pad1y space-right2'>
33+
<span class="strong">92.86% </span>
34+
<span class="quiet">Branches</span>
35+
<span class='fraction'>13/14</span>
36+
</div>
37+
38+
39+
<div class='fl pad1y space-right2'>
40+
<span class="strong">100% </span>
41+
<span class="quiet">Functions</span>
42+
<span class='fraction'>1/1</span>
43+
</div>
44+
45+
46+
<div class='fl pad1y space-right2'>
47+
<span class="strong">100% </span>
48+
<span class="quiet">Lines</span>
49+
<span class='fraction'>28/28</span>
50+
</div>
51+
52+
53+
</div>
54+
<p class="quiet">
55+
Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
56+
</p>
4257
</div>
43-
<p class="quiet">
44-
Press <em>n</em> or <em>j</em> to go to the next uncovered block, <em>b</em>, <em>p</em> or <em>k</em> for the previous block.
45-
</p>
46-
</div>
47-
<div class='status-line high'></div>
48-
<pre><table class="coverage">
58+
<div class='status-line high'></div>
59+
<pre><table class="coverage">
4960
<tr><td class="line-count quiet"><a name='L1'></a><a href='#L1'>1</a>
5061
<a name='L2'></a><a href='#L2'>2</a>
5162
<a name='L3'></a><a href='#L3'>3</a>
@@ -100,7 +111,38 @@ <h1>
100111
<a name='L52'></a><a href='#L52'>52</a>
101112
<a name='L53'></a><a href='#L53'>53</a>
102113
<a name='L54'></a><a href='#L54'>54</a>
103-
<a name='L55'></a><a href='#L55'>55</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
114+
<a name='L55'></a><a href='#L55'>55</a>
115+
<a name='L56'></a><a href='#L56'>56</a>
116+
<a name='L57'></a><a href='#L57'>57</a>
117+
<a name='L58'></a><a href='#L58'>58</a>
118+
<a name='L59'></a><a href='#L59'>59</a>
119+
<a name='L60'></a><a href='#L60'>60</a>
120+
<a name='L61'></a><a href='#L61'>61</a>
121+
<a name='L62'></a><a href='#L62'>62</a>
122+
<a name='L63'></a><a href='#L63'>63</a>
123+
<a name='L64'></a><a href='#L64'>64</a>
124+
<a name='L65'></a><a href='#L65'>65</a>
125+
<a name='L66'></a><a href='#L66'>66</a>
126+
<a name='L67'></a><a href='#L67'>67</a>
127+
<a name='L68'></a><a href='#L68'>68</a>
128+
<a name='L69'></a><a href='#L69'>69</a>
129+
<a name='L70'></a><a href='#L70'>70</a>
130+
<a name='L71'></a><a href='#L71'>71</a>
131+
<a name='L72'></a><a href='#L72'>72</a>
132+
<a name='L73'></a><a href='#L73'>73</a>
133+
<a name='L74'></a><a href='#L74'>74</a>
134+
<a name='L75'></a><a href='#L75'>75</a>
135+
<a name='L76'></a><a href='#L76'>76</a>
136+
<a name='L77'></a><a href='#L77'>77</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
137+
<span class="cline-any cline-neutral">&nbsp;</span>
138+
<span class="cline-any cline-neutral">&nbsp;</span>
139+
<span class="cline-any cline-neutral">&nbsp;</span>
140+
<span class="cline-any cline-neutral">&nbsp;</span>
141+
<span class="cline-any cline-neutral">&nbsp;</span>
142+
<span class="cline-any cline-neutral">&nbsp;</span>
143+
<span class="cline-any cline-neutral">&nbsp;</span>
144+
<span class="cline-any cline-neutral">&nbsp;</span>
145+
<span class="cline-any cline-neutral">&nbsp;</span>
104146
<span class="cline-any cline-neutral">&nbsp;</span>
105147
<span class="cline-any cline-neutral">&nbsp;</span>
106148
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -138,6 +180,8 @@ <h1>
138180
<span class="cline-any cline-neutral">&nbsp;</span>
139181
<span class="cline-any cline-neutral">&nbsp;</span>
140182
<span class="cline-any cline-yes">2x</span>
183+
<span class="cline-any cline-neutral">&nbsp;</span>
184+
<span class="cline-any cline-yes">2x</span>
141185
<span class="cline-any cline-yes">2x</span>
142186
<span class="cline-any cline-yes">6x</span>
143187
<span class="cline-any cline-yes">6x</span>
@@ -152,19 +196,39 @@ <h1>
152196
<span class="cline-any cline-neutral">&nbsp;</span>
153197
<span class="cline-any cline-yes">6x</span>
154198
<span class="cline-any cline-neutral">&nbsp;</span>
199+
<span class="cline-any cline-yes">6x</span>
200+
<span class="cline-any cline-neutral">&nbsp;</span>
155201
<span class="cline-any cline-neutral">&nbsp;</span>
202+
<span class="cline-any cline-neutral">&nbsp;</span>
203+
<span class="cline-any cline-neutral">&nbsp;</span>
204+
<span class="cline-any cline-yes">2x</span>
205+
<span class="cline-any cline-yes">2x</span>
206+
<span class="cline-any cline-yes">2x</span>
207+
<span class="cline-any cline-yes">2x</span>
156208
<span class="cline-any cline-yes">2x</span>
157-
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import { canvasToFile, drawFileInCanvas, followExifOrientation, getExifOrientation, handleMaxWidthOrHeight, getNewCanvasAndCtx } from './utils'
209+
<span class="cline-any cline-neutral">&nbsp;</span>
210+
<span class="cline-any cline-yes">2x</span>
211+
<span class="cline-any cline-neutral">&nbsp;</span>
212+
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import {
213+
canvasToFile,
214+
cleanupMemory,
215+
drawFileInCanvas,
216+
followExifOrientation,
217+
getExifOrientation,
218+
getNewCanvasAndCtx,
219+
handleMaxWidthOrHeight
220+
} from './utils'
158221
&nbsp;
159222
/**
160223
* Compress an image file.
161224
*
162225
* @param {File} file
163-
* @param {Object} options - { maxSizeMB=Number.POSITIVE_INFINITY, maxWidthOrHeight, useWebWorker=true, maxIteration = 10, exifOrientation }
226+
* @param {Object} options - { maxSizeMB=Number.POSITIVE_INFINITY, maxWidthOrHeight, useWebWorker=false, maxIteration = 10, exifOrientation, fileType }
164227
* @param {number} [options.maxSizeMB=Number.POSITIVE_INFINITY]
165-
* @param {number} [options.maxWidthOrHeight=undefined] * @param {number} [options.maxWidthOrHeight=undefined]
228+
* @param {number} [options.maxWidthOrHeight=undefined]
166229
* @param {number} [options.maxIteration=10]
167230
* @param {number} [options.exifOrientation=] - default to be the exif orientation from the image file
231+
* @param {number} [options.fileType=undefined] - default to be the original mime type from the image file
168232
* @returns {Promise&lt;File | Blob&gt;}
169233
*/
170234
export default async function compress (file, options) {
@@ -173,59 +237,72 @@ <h1>
173237
const maxSizeByte = options.maxSizeMB * 1024 * 1024
174238
&nbsp;
175239
// drawFileInCanvas
176-
let [img, canvas] = await drawFileInCanvas(file)
240+
let [img, origCanvas] = await drawFileInCanvas(file)
177241
&nbsp;
178242
// handleMaxWidthOrHeight
179-
canvas = handleMaxWidthOrHeight(canvas, options)
243+
const maxWidthOrHeightFixedCanvas = handleMaxWidthOrHeight(origCanvas, options)
180244
&nbsp;
181245
// exifOrientation
182246
options.exifOrientation = options.exifOrientation || <span class="branch-1 cbranch-no" title="branch not covered" >await getExifOrientation(file)</span>
183-
canvas = followExifOrientation(canvas, options.exifOrientation)
247+
const orientationFixedCanvas = followExifOrientation(maxWidthOrHeightFixedCanvas, options.exifOrientation)
184248
&nbsp;
185249
let quality = 1
186250
&nbsp;
187-
let tempFile = await canvasToFile(canvas, file.type, file.name, file.lastModified, quality)
251+
let tempFile = await canvasToFile(orientationFixedCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
188252
// check if we need to compress or resize
189253
if (tempFile.size &lt;= maxSizeByte) {
190254
// no need to compress
191255
return tempFile
192256
}
193257
&nbsp;
194258
let compressedFile = tempFile
259+
let newCanvas, ctx
260+
let canvas = orientationFixedCanvas
195261
while (remainingTrials-- &amp;&amp; compressedFile.size &gt; maxSizeByte) {
196262
const newWidth = canvas.width * 0.9
197-
const newHeight = canvas.height * 0.9
198-
const [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight)
263+
const newHeight = canvas.height * 0.9;
264+
[newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight)
199265
&nbsp;
200266
ctx.drawImage(canvas, 0, 0, newWidth, newHeight)
201267
&nbsp;
202268
if (file.type === 'image/jpeg') {
203269
quality *= 0.9
204270
}
205-
compressedFile = await canvasToFile(newCanvas, file.type, file.name, file.lastModified, quality)
271+
compressedFile = await canvasToFile(newCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
272+
&nbsp;
273+
cleanupMemory(canvas)
206274
&nbsp;
207275
canvas = newCanvas
208276
}
277+
&nbsp;
278+
// garbage clean canvas for safari
279+
// ref: https://bugs.webkit.org/show_bug.cgi?id=195325
280+
cleanupMemory(canvas)
281+
cleanupMemory(newCanvas)
282+
cleanupMemory(maxWidthOrHeightFixedCanvas)
283+
cleanupMemory(orientationFixedCanvas)
284+
cleanupMemory(origCanvas)
209285
&nbsp;
210286
return compressedFile
211-
}</pre></td></tr>
212-
</table></pre>
213-
<div class='push'></div><!-- for sticky footer -->
214-
</div><!-- /wrapper -->
215-
<div class='footer quiet pad2 space-top1 center small'>
216-
Code coverage
217-
generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Jul 05 2019 12:39:02 GMT+0800 (Hong Kong Standard Time)
218-
</div>
219-
</div>
220-
<script src="prettify.js"></script>
221-
<script>
222-
window.onload = function () {
223-
if (typeof prettyPrint === 'function') {
224-
prettyPrint();
225-
}
226-
};
227-
</script>
228-
<script src="sorter.js"></script>
229-
<script src="block-navigation.js"></script>
230-
</body>
287+
}
288+
&nbsp;</pre></td></tr></table></pre>
289+
290+
<div class='push'></div><!-- for sticky footer -->
291+
</div><!-- /wrapper -->
292+
<div class='footer quiet pad2 space-top1 center small'>
293+
Code coverage generated by
294+
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
295+
at Sun Mar 15 2020 02:33:08 GMT+0800 (Hong Kong Standard Time)
296+
</div>
297+
</div>
298+
<script src="prettify.js"></script>
299+
<script>
300+
window.onload = function () {
301+
prettyPrint();
302+
};
303+
</script>
304+
<script src="sorter.js"></script>
305+
<script src="block-navigation.js"></script>
306+
</body>
231307
</html>
308+

0 commit comments

Comments
 (0)