Skip to content

Commit e751c56

Browse files
DonaldcwlDonaldcwl
committed
Dev 1.0.14
1 parent b6e8f6e commit e751c56

28 files changed

+2921
-1853
lines changed

‎CHANGELOG.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1+
## v1.0.14 (6 Jan 2021)
2+
* updated: use UZIP to compress PNG image instead of Canvas
3+
* fixed: PNG transparent background become black after compression [#84](https://github.com/Donaldcwl/browser-image-compression/issues/84), [#76](https://github.com/Donaldcwl/browser-image-compression/issues/76)
4+
* fixed: progress jump back to 0 when Web Worker failback to main thread [#90](https://github.com/Donaldcwl/browser-image-compression/issues/90)
5+
16
## v1.0.13 (8 Nov 2020)
27
* added: new option for setting initial quality level [#64](https://github.com/Donaldcwl/browser-image-compression/issues/64), [#78](https://github.com/Donaldcwl/browser-image-compression/issues/78)
38
* fixed: options object being altered by the compress func [#71](https://github.com/Donaldcwl/browser-image-compression/pull/71)

‎coverage/badge.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎coverage/coverage-final.json‎

Lines changed: 1 addition & 4 deletions
Large diffs are not rendered by default.

‎coverage/coverage-summary.json‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,2 @@
1-
{"total": {"lines":{"total":219,"covered":173,"skipped":0,"pct":79},"statements":{"total":226,"covered":175,"skipped":0,"pct":77.43},"functions":{"total":28,"covered":24,"skipped":0,"pct":85.71},"branches":{"total":107,"covered":61,"skipped":0,"pct":57.01}}
2-
,"D:\\Projects\\browser-image-compression\\lib\\image-compression.js": {"lines":{"total":53,"covered":53,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":53,"covered":53,"skipped":0,"pct":100},"branches":{"total":26,"covered":21,"skipped":0,"pct":80.77}}
3-
,"D:\\Projects\\browser-image-compression\\lib\\index.js": {"lines":{"total":30,"covered":27,"skipped":0,"pct":90},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":30,"covered":27,"skipped":0,"pct":90},"branches":{"total":19,"covered":13,"skipped":0,"pct":68.42}}
4-
,"D:\\Projects\\browser-image-compression\\lib\\utils.js": {"lines":{"total":136,"covered":93,"skipped":0,"pct":68.38},"functions":{"total":23,"covered":19,"skipped":0,"pct":82.61},"statements":{"total":143,"covered":95,"skipped":0,"pct":66.43},"branches":{"total":62,"covered":27,"skipped":0,"pct":43.55}}
1+
{"total": {"lines":{"total":0,"covered":0,"skipped":0,"pct":"Unknown"},"statements":{"total":0,"covered":0,"skipped":0,"pct":"Unknown"},"functions":{"total":0,"covered":0,"skipped":0,"pct":"Unknown"},"branches":{"total":0,"covered":0,"skipped":0,"pct":"Unknown"}}
52
}

‎coverage/image-compression.js.html‎

Lines changed: 36 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,14 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
2525
<div class='fl pad1y space-right2'>
2626
<span class="strong">100% </span>
2727
<span class="quiet">Statements</span>
28-
<span class='fraction'>53/53</span>
28+
<span class='fraction'>47/47</span>
2929
</div>
3030

3131

3232
<div class='fl pad1y space-right2'>
33-
<span class="strong">80.77% </span>
33+
<span class="strong">82.61% </span>
3434
<span class="quiet">Branches</span>
35-
<span class='fraction'>21/26</span>
35+
<span class='fraction'>19/23</span>
3636
</div>
3737

3838

@@ -46,7 +46,7 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
4646
<div class='fl pad1y space-right2'>
4747
<span class="strong">100% </span>
4848
<span class="quiet">Lines</span>
49-
<span class='fraction'>53/53</span>
49+
<span class='fraction'>47/47</span>
5050
</div>
5151

5252

@@ -174,13 +174,8 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
174174
<a name='L115'></a><a href='#L115'>115</a>
175175
<a name='L116'></a><a href='#L116'>116</a>
176176
<a name='L117'></a><a href='#L117'>117</a>
177-
<a name='L118'></a><a href='#L118'>118</a>
178-
<a name='L119'></a><a href='#L119'>119</a>
179-
<a name='L120'></a><a href='#L120'>120</a>
180-
<a name='L121'></a><a href='#L121'>121</a>
181-
<a name='L122'></a><a href='#L122'>122</a>
182-
<a name='L123'></a><a href='#L123'>123</a>
183-
<a name='L124'></a><a href='#L124'>124</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
177+
<a name='L118'></a><a href='#L118'>118</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
178+
<span class="cline-any cline-neutral">&nbsp;</span>
184179
<span class="cline-any cline-neutral">&nbsp;</span>
185180
<span class="cline-any cline-neutral">&nbsp;</span>
186181
<span class="cline-any cline-neutral">&nbsp;</span>
@@ -215,8 +210,8 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
215210
<span class="cline-any cline-neutral">&nbsp;</span>
216211
<span class="cline-any cline-neutral">&nbsp;</span>
217212
<span class="cline-any cline-neutral">&nbsp;</span>
218-
<span class="cline-any cline-yes">9x</span>
219-
<span class="cline-any cline-yes">9x</span>
213+
<span class="cline-any cline-yes">8x</span>
214+
<span class="cline-any cline-yes">8x</span>
220215
<span class="cline-any cline-neutral">&nbsp;</span>
221216
<span class="cline-any cline-neutral">&nbsp;</span>
222217
<span class="cline-any cline-yes">6x</span>
@@ -244,7 +239,6 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
244239
<span class="cline-any cline-yes">6x</span>
245240
<span class="cline-any cline-neutral">&nbsp;</span>
246241
<span class="cline-any cline-yes">6x</span>
247-
<span class="cline-any cline-yes">6x</span>
248242
<span class="cline-any cline-neutral">&nbsp;</span>
249243
<span class="cline-any cline-yes">6x</span>
250244
<span class="cline-any cline-yes">6x</span>
@@ -257,51 +251,45 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
257251
<span class="cline-any cline-neutral">&nbsp;</span>
258252
<span class="cline-any cline-yes">6x</span>
259253
<span class="cline-any cline-neutral">&nbsp;</span>
260-
<span class="cline-any cline-yes">4x</span>
261-
<span class="cline-any cline-yes">4x</span>
254+
<span class="cline-any cline-yes">5x</span>
255+
<span class="cline-any cline-yes">5x</span>
262256
<span class="cline-any cline-neutral">&nbsp;</span>
263257
<span class="cline-any cline-neutral">&nbsp;</span>
264-
<span class="cline-any cline-yes">2x</span>
265-
<span class="cline-any cline-yes">2x</span>
266-
<span class="cline-any cline-yes">2x</span>
258+
<span class="cline-any cline-yes">1x</span>
259+
<span class="cline-any cline-yes">1x</span>
260+
<span class="cline-any cline-yes">1x</span>
267261
<span class="cline-any cline-neutral">&nbsp;</span>
268262
<span class="cline-any cline-neutral">&nbsp;</span>
263+
<span class="cline-any cline-yes">1x</span>
264+
<span class="cline-any cline-yes">1x</span>
269265
<span class="cline-any cline-yes">2x</span>
270266
<span class="cline-any cline-yes">2x</span>
271-
<span class="cline-any cline-yes">3x</span>
272-
<span class="cline-any cline-yes">3x</span>
273-
<span class="cline-any cline-neutral">&nbsp;</span>
274267
<span class="cline-any cline-neutral">&nbsp;</span>
275-
<span class="cline-any cline-yes">3x</span>
276268
<span class="cline-any cline-neutral">&nbsp;</span>
277-
<span class="cline-any cline-yes">3x</span>
269+
<span class="cline-any cline-yes">2x</span>
278270
<span class="cline-any cline-neutral">&nbsp;</span>
279-
<span class="cline-any cline-yes">3x</span>
280-
<span class="cline-any cline-yes">3x</span>
271+
<span class="cline-any cline-yes">2x</span>
281272
<span class="cline-any cline-neutral">&nbsp;</span>
282-
<span class="cline-any cline-yes">3x</span>
273+
<span class="cline-any cline-yes">2x</span>
274+
<span class="cline-any cline-yes">2x</span>
283275
<span class="cline-any cline-neutral">&nbsp;</span>
284-
<span class="cline-any cline-yes">3x</span>
276+
<span class="cline-any cline-yes">2x</span>
285277
<span class="cline-any cline-neutral">&nbsp;</span>
286-
<span class="cline-any cline-yes">3x</span>
278+
<span class="cline-any cline-yes">2x</span>
287279
<span class="cline-any cline-neutral">&nbsp;</span>
288-
<span class="cline-any cline-yes">3x</span>
289-
<span class="cline-any cline-yes">3x</span>
280+
<span class="cline-any cline-yes">2x</span>
290281
<span class="cline-any cline-neutral">&nbsp;</span>
291282
<span class="cline-any cline-yes">2x</span>
283+
<span class="cline-any cline-neutral">&nbsp;</span>
284+
<span class="cline-any cline-neutral">&nbsp;</span>
285+
<span class="cline-any cline-yes">1x</span>
286+
<span class="cline-any cline-yes">1x</span>
292287
<span class="cline-any cline-yes">1x</span>
293288
<span class="cline-any cline-yes">1x</span>
294289
<span class="cline-any cline-yes">1x</span>
295290
<span class="cline-any cline-neutral">&nbsp;</span>
296-
<span class="cline-any cline-neutral">&nbsp;</span>
297-
<span class="cline-any cline-yes">2x</span>
298-
<span class="cline-any cline-yes">2x</span>
299-
<span class="cline-any cline-yes">2x</span>
300-
<span class="cline-any cline-yes">2x</span>
301-
<span class="cline-any cline-yes">2x</span>
302-
<span class="cline-any cline-neutral">&nbsp;</span>
303-
<span class="cline-any cline-yes">2x</span>
304-
<span class="cline-any cline-yes">2x</span>
291+
<span class="cline-any cline-yes">1x</span>
292+
<span class="cline-any cline-yes">1x</span>
305293
<span class="cline-any cline-neutral">&nbsp;</span>
306294
<span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import {
307295
canvasToFile,
@@ -327,10 +315,11 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
327315
* @param {Function} [options.onProgress] - a function takes one progress argument (progress from 0 to 100)
328316
* @param {string} [options.fileType] - default to be the original mime type from the image file
329317
* @param {number} [options.initialQuality=1.0]
318+
* @param {number} previousProgress - for internal try catch rerunning start from previous progress
330319
* @returns {Promise&lt;File | Blob&gt;}
331320
*/
332-
export default async function compress (file, options) {
333-
let progress = 0
321+
export default async function compress (file, options, previousProgress = 0) {
322+
let progress = previousProgress
334323
&nbsp;
335324
function incProgress (inc = 5) {
336325
progress += inc
@@ -361,12 +350,11 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
361350
// exifOrientation
362351
const exifOrientation = options.exifOrientation || <span class="branch-1 cbranch-no" title="branch not covered" >await getExifOrientation(file)</span>
363352
incProgress()
364-
const orientationFixedCanvas = (await isAutoOrientationInBrowser) ? <span class="branch-0 cbranch-no" title="branch not covered" >maxWidthOrHeightFixedCanvas </span>: followExifOrientation(maxWidthOrHeightFixedCanvas, exifOrientation)
353+
const orientationFixedCanvas = (await isAutoOrientationInBrowser()) ? <span class="branch-0 cbranch-no" title="branch not covered" >maxWidthOrHeightFixedCanvas </span>: followExifOrientation(maxWidthOrHeightFixedCanvas, exifOrientation)
365354
incProgress()
366355
&nbsp;
367356
let quality = options.initialQuality || 1.0
368357
&nbsp;
369-
const tempFileType = 'image/jpeg'
370358
const outputFileType = options.fileType || file.type
371359
&nbsp;
372360
let tempFile = await canvasToFile(orientationFixedCanvas, outputFileType, file.name, file.lastModified, quality)
@@ -399,23 +387,17 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
399387
&nbsp;
400388
ctx.drawImage(canvas, 0, 0, newWidth, newHeight)
401389
&nbsp;
402-
<span class="missing-if-branch" title="else path not taken" >E</span>if (tempFileType === 'image/jpeg') {
403-
quality *= 0.95
404-
}
405-
compressedFile = await canvasToFile(newCanvas, tempFileType, file.name, file.lastModified, quality)
390+
quality *= 0.95
391+
compressedFile = await canvasToFile(newCanvas, outputFileType, file.name, file.lastModified, quality)
406392
&nbsp;
407393
cleanupCanvasMemory(canvas)
408394
&nbsp;
409395
canvas = newCanvas
410396
&nbsp;
411397
currentSize = compressedFile.size
398+
// console.log('currentSize', currentSize)
412399
setProgress(Math.min(99, Math.floor((renderedSize - currentSize) / (renderedSize - maxSizeByte) * 100)))
413400
}
414-
if (tempFileType !== outputFileType) {
415-
compressedFile = new Blob([compressedFile], { type: outputFileType })
416-
compressedFile.name = file.name
417-
compressedFile.lastModified = file.lastModified
418-
}
419401
&nbsp;
420402
cleanupCanvasMemory(canvas)
421403
cleanupCanvasMemory(newCanvas)
@@ -433,7 +415,7 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
433415
<div class='footer quiet pad2 space-top1 center small'>
434416
Code coverage generated by
435417
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
436-
at Sun Nov 08 2020 23:03:52 GMT+0800 (Hong Kong Standard Time)
418+
at Wed Jan 06 2021 01:34:08 GMT+0800 (Hong Kong Standard Time)
437419
</div>
438420
</div>
439421
<script src="prettify.js"></script>

‎coverage/index.html‎

Lines changed: 10 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -23,30 +23,30 @@ <h1>All files</h1>
2323
<div class='clearfix'>
2424

2525
<div class='fl pad1y space-right2'>
26-
<span class="strong">77.43% </span>
26+
<span class="strong">Unknown% </span>
2727
<span class="quiet">Statements</span>
28-
<span class='fraction'>175/226</span>
28+
<span class='fraction'>0/0</span>
2929
</div>
3030

3131

3232
<div class='fl pad1y space-right2'>
33-
<span class="strong">57.01% </span>
33+
<span class="strong">Unknown% </span>
3434
<span class="quiet">Branches</span>
35-
<span class='fraction'>61/107</span>
35+
<span class='fraction'>0/0</span>
3636
</div>
3737

3838

3939
<div class='fl pad1y space-right2'>
40-
<span class="strong">85.71% </span>
40+
<span class="strong">Unknown% </span>
4141
<span class="quiet">Functions</span>
42-
<span class='fraction'>24/28</span>
42+
<span class='fraction'>0/0</span>
4343
</div>
4444

4545

4646
<div class='fl pad1y space-right2'>
47-
<span class="strong">79% </span>
47+
<span class="strong">Unknown% </span>
4848
<span class="quiet">Lines</span>
49-
<span class='fraction'>173/219</span>
49+
<span class='fraction'>0/0</span>
5050
</div>
5151

5252

@@ -72,60 +72,15 @@ <h1>All files</h1>
7272
<th data-col="lines_raw" data-type="number" data-fmt="html" class="abs"></th>
7373
</tr>
7474
</thead>
75-
<tbody><tr>
76-
<td class="file high" data-value="image-compression.js"><a href="image-compression.js.html">image-compression.js</a></td>
77-
<td data-value="100" class="pic high">
78-
<div class="chart"><div class="cover-fill cover-full" style="width: 100%"></div><div class="cover-empty" style="width: 0%"></div></div>
79-
</td>
80-
<td data-value="100" class="pct high">100%</td>
81-
<td data-value="53" class="abs high">53/53</td>
82-
<td data-value="80.77" class="pct high">80.77%</td>
83-
<td data-value="26" class="abs high">21/26</td>
84-
<td data-value="100" class="pct high">100%</td>
85-
<td data-value="3" class="abs high">3/3</td>
86-
<td data-value="100" class="pct high">100%</td>
87-
<td data-value="53" class="abs high">53/53</td>
88-
</tr>
89-
90-
<tr>
91-
<td class="file high" data-value="index.js"><a href="index.js.html">index.js</a></td>
92-
<td data-value="90" class="pic high">
93-
<div class="chart"><div class="cover-fill" style="width: 90%"></div><div class="cover-empty" style="width: 10%"></div></div>
94-
</td>
95-
<td data-value="90" class="pct high">90%</td>
96-
<td data-value="30" class="abs high">27/30</td>
97-
<td data-value="68.42" class="pct medium">68.42%</td>
98-
<td data-value="19" class="abs medium">13/19</td>
99-
<td data-value="100" class="pct high">100%</td>
100-
<td data-value="2" class="abs high">2/2</td>
101-
<td data-value="90" class="pct high">90%</td>
102-
<td data-value="30" class="abs high">27/30</td>
103-
</tr>
104-
105-
<tr>
106-
<td class="file medium" data-value="utils.js"><a href="utils.js.html">utils.js</a></td>
107-
<td data-value="66.43" class="pic medium">
108-
<div class="chart"><div class="cover-fill" style="width: 66%"></div><div class="cover-empty" style="width: 34%"></div></div>
109-
</td>
110-
<td data-value="66.43" class="pct medium">66.43%</td>
111-
<td data-value="143" class="abs medium">95/143</td>
112-
<td data-value="43.55" class="pct low">43.55%</td>
113-
<td data-value="62" class="abs low">27/62</td>
114-
<td data-value="82.61" class="pct high">82.61%</td>
115-
<td data-value="23" class="abs high">19/23</td>
116-
<td data-value="68.38" class="pct medium">68.38%</td>
117-
<td data-value="136" class="abs medium">93/136</td>
118-
</tr>
119-
120-
</tbody>
75+
<tbody></tbody>
12176
</table>
12277
</div>
12378
<div class='push'></div><!-- for sticky footer -->
12479
</div><!-- /wrapper -->
12580
<div class='footer quiet pad2 space-top1 center small'>
12681
Code coverage generated by
12782
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
128-
at Sun Nov 08 2020 23:03:52 GMT+0800 (Hong Kong Standard Time)
83+
at Wed Jan 06 2021 01:34:56 GMT+0800 (Hong Kong Standard Time)
12984
</div>
13085
</div>
13186
<script src="prettify.js"></script>

0 commit comments

Comments
 (0)