Skip to content

Commit

Permalink
Release 1.0.9
Browse files Browse the repository at this point in the history
  • Loading branch information
@Donaldcwl
Donaldcwl committed Mar 25, 2020
1 parent 752a577 commit 7d1f4f5
Show file tree
Hide file tree
Showing 24 changed files with 288 additions and 239 deletions.
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## v1.0.9 (25 Mar 2020)
* updated: compression becomes less aggressive, output file is closer to the 'maxWidthOrHeight' and/or 'maxSizeMB' in config
* fixed: file size increased in specific situation

## v1.0.8 (16 Mar 2020)
* added: support for Server Side Rendering (SSR)
* updated: ts type file
Expand Down
4 changes: 2 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ yarn add browser-image-compression
```
or use a CDN like [delivrjs]:
```
https://cdn.jsdelivr.net/npm/[email protected].8/dist/browser-image-compression.js
https://cdn.jsdelivr.net/npm/[email protected].9/dist/browser-image-compression.js
or
https://cdn.jsdelivr.net/npm/browser-image-compression@latest/dist/browser-image-compression.js
```
Expand Down Expand Up @@ -80,7 +80,7 @@ async function handleImageUpload(event) {
console.log('originalFile instanceof Blob', imageFile instanceof Blob); // true
console.log(`originalFile size ${imageFile.size / 1024 / 1024} MB`);

var options = {
const options = {
maxSizeMB: 1,
maxWidthOrHeight: 1920,
useWebWorker: true
Expand Down
2 changes: 1 addition & 1 deletion coverage/badge.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
6 changes: 3 additions & 3 deletions coverage/coverage-final.json
View file

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions coverage/coverage-summary.json
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{"total": {"lines":{"total":194,"covered":153,"skipped":0,"pct":78.87},"statements":{"total":208,"covered":155,"skipped":0,"pct":74.52},"functions":{"total":26,"covered":22,"skipped":0,"pct":84.62},"branches":{"total":94,"covered":51,"skipped":0,"pct":54.26}}
,"/Users/donald/Project/browser-image-compression/lib/image-compression.js": {"lines":{"total":46,"covered":44,"skipped":0,"pct":95.65},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":46,"covered":44,"skipped":0,"pct":95.65},"branches":{"total":19,"covered":16,"skipped":0,"pct":84.21}}
{"total": {"lines":{"total":197,"covered":156,"skipped":0,"pct":79.19},"statements":{"total":211,"covered":158,"skipped":0,"pct":74.88},"functions":{"total":26,"covered":22,"skipped":0,"pct":84.62},"branches":{"total":101,"covered":56,"skipped":0,"pct":55.45}}
,"/Users/donald/Project/browser-image-compression/lib/image-compression.js": {"lines":{"total":49,"covered":47,"skipped":0,"pct":95.92},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":49,"covered":47,"skipped":0,"pct":95.92},"branches":{"total":26,"covered":21,"skipped":0,"pct":80.77}}
,"/Users/donald/Project/browser-image-compression/lib/index.js": {"lines":{"total":28,"covered":25,"skipped":0,"pct":89.29},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":28,"covered":25,"skipped":0,"pct":89.29},"branches":{"total":17,"covered":12,"skipped":0,"pct":70.59}}
,"/Users/donald/Project/browser-image-compression/lib/utils.js": {"lines":{"total":120,"covered":84,"skipped":0,"pct":70},"functions":{"total":22,"covered":18,"skipped":0,"pct":81.82},"statements":{"total":134,"covered":86,"skipped":0,"pct":64.18},"branches":{"total":58,"covered":23,"skipped":0,"pct":39.66}}
}
71 changes: 43 additions & 28 deletions coverage/image-compression.js.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<div class='clearfix'>

<div class='fl pad1y space-right2'>
<span class="strong">95.65% </span>
<span class="strong">95.92% </span>
<span class="quiet">Statements</span>
<span class='fraction'>44/46</span>
<span class='fraction'>47/49</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">84.21% </span>
<span class="strong">80.77% </span>
<span class="quiet">Branches</span>
<span class='fraction'>16/19</span>
<span class='fraction'>21/26</span>
</div>


Expand All @@ -44,9 +44,9 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>


<div class='fl pad1y space-right2'>
<span class="strong">95.65% </span>
<span class="strong">95.92% </span>
<span class="quiet">Lines</span>
<span class='fraction'>44/46</span>
<span class='fraction'>47/49</span>
</div>


Expand Down Expand Up @@ -166,7 +166,12 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<a name='L107'></a><a href='#L107'>107</a>
<a name='L108'></a><a href='#L108'>108</a>
<a name='L109'></a><a href='#L109'>109</a>
<a name='L110'></a><a href='#L110'>110</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<a name='L110'></a><a href='#L110'>110</a>
<a name='L111'></a><a href='#L111'>111</a>
<a name='L112'></a><a href='#L112'>112</a>
<a name='L113'></a><a href='#L113'>113</a>
<a name='L114'></a><a href='#L114'>114</a>
<a name='L115'></a><a href='#L115'>115</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -200,8 +205,8 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-yes">12x</span>
<span class="cline-any cline-yes">15x</span>
<span class="cline-any cline-yes">15x</span>
<span class="cline-any cline-no">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -234,34 +239,39 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-yes">4x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">2x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">6x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-yes">9x</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
<span class="cline-any cline-neutral">&nbsp;</span>
Expand Down Expand Up @@ -341,27 +351,32 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
&nbsp;
let tempFile = await canvasToFile(orientationFixedCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
incProgress()
&nbsp;
const origExceedMaxSize = tempFile.size &gt; maxSizeByte
const sizeBecomeLarger = tempFile.size &gt; file.size
&nbsp;
// check if we need to compress or resize
if (tempFile.size &lt;= maxSizeByte) {
if (!origExceedMaxSize &amp;&amp; !sizeBecomeLarger) {
// no need to compress
setProgress(100)
return tempFile
}
&nbsp;
const originalSize = tempFile.size
let currentSize = originalSize
const sourceSize = file.size
const renderedSize = tempFile.size
let currentSize = renderedSize
let compressedFile
let newCanvas, ctx
let canvas = orientationFixedCanvas
while (remainingTrials-- &amp;&amp; currentSize &gt; maxSizeByte) {
const newWidth = canvas.width * 0.9
const newHeight = canvas.height * 0.9;
while (remainingTrials-- &amp;&amp; (currentSize &gt; maxSizeByte || currentSize &gt; sourceSize)) {
const newWidth = origExceedMaxSize ? canvas.width * 0.95 : <span class="branch-1 cbranch-no" title="branch not covered" >canvas.width</span>
const newHeight = origExceedMaxSize ? canvas.height * 0.95 : <span class="branch-1 cbranch-no" title="branch not covered" >canvas.height;</span>
[newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight)
&nbsp;
ctx.drawImage(canvas, 0, 0, newWidth, newHeight)
&nbsp;
if (file.type === 'image/jpeg') {
quality *= 0.9
quality *= 0.95
}
compressedFile = await canvasToFile(newCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
&nbsp;
Expand All @@ -370,7 +385,7 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
canvas = newCanvas
&nbsp;
currentSize = compressedFile.size
setProgress(Math.min(99, Math.floor((originalSize - currentSize) / (originalSize - maxSizeByte) * 100)))
setProgress(Math.min(99, Math.floor((renderedSize - currentSize) / (renderedSize - maxSizeByte) * 100)))
}
&nbsp;
// garbage clean canvas for safari
Expand All @@ -391,7 +406,7 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Mon Mar 16 2020 16:08:11 GMT+0800 (Hong Kong Standard Time)
at Wed Mar 25 2020 23:40:22 GMT+0800 (Hong Kong Standard Time)
</div>
</div>
<script src="prettify.js"></script>
Expand Down
28 changes: 14 additions & 14 deletions coverage/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,16 +23,16 @@ <h1>All files</h1>
<div class='clearfix'>

<div class='fl pad1y space-right2'>
<span class="strong">74.52% </span>
<span class="strong">74.88% </span>
<span class="quiet">Statements</span>
<span class='fraction'>155/208</span>
<span class='fraction'>158/211</span>
</div>


<div class='fl pad1y space-right2'>
<span class="strong">54.26% </span>
<span class="strong">55.45% </span>
<span class="quiet">Branches</span>
<span class='fraction'>51/94</span>
<span class='fraction'>56/101</span>
</div>


Expand All @@ -44,9 +44,9 @@ <h1>All files</h1>


<div class='fl pad1y space-right2'>
<span class="strong">78.87% </span>
<span class="strong">79.19% </span>
<span class="quiet">Lines</span>
<span class='fraction'>153/194</span>
<span class='fraction'>156/197</span>
</div>


Expand Down Expand Up @@ -74,17 +74,17 @@ <h1>All files</h1>
</thead>
<tbody><tr>
<td class="file high" data-value="image-compression.js"><a href="image-compression.js.html">image-compression.js</a></td>
<td data-value="95.65" class="pic high">
<td data-value="95.92" class="pic high">
<div class="chart"><div class="cover-fill" style="width: 95%"></div><div class="cover-empty" style="width: 5%"></div></div>
</td>
<td data-value="95.65" class="pct high">95.65%</td>
<td data-value="46" class="abs high">44/46</td>
<td data-value="84.21" class="pct high">84.21%</td>
<td data-value="19" class="abs high">16/19</td>
<td data-value="95.92" class="pct high">95.92%</td>
<td data-value="49" class="abs high">47/49</td>
<td data-value="80.77" class="pct high">80.77%</td>
<td data-value="26" class="abs high">21/26</td>
<td data-value="100" class="pct high">100%</td>
<td data-value="3" class="abs high">3/3</td>
<td data-value="95.65" class="pct high">95.65%</td>
<td data-value="46" class="abs high">44/46</td>
<td data-value="95.92" class="pct high">95.92%</td>
<td data-value="49" class="abs high">47/49</td>
</tr>

<tr>
Expand Down Expand Up @@ -125,7 +125,7 @@ <h1>All files</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Mon Mar 16 2020 16:08:11 GMT+0800 (Hong Kong Standard Time)
at Wed Mar 25 2020 23:40:22 GMT+0800 (Hong Kong Standard Time)
</div>
</div>
<script src="prettify.js"></script>
Expand Down
4 changes: 2 additions & 2 deletions coverage/index.js.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -321,7 +321,7 @@ <h1><a href="index.html">All files</a> index.js</h1>
imageCompression.handleMaxWidthOrHeight = handleMaxWidthOrHeight
imageCompression.followExifOrientation = followExifOrientation
imageCompression.cleanupMemory = cleanupCanvasMemory
imageCompression.version = '1.0.8'
imageCompression.version = '1.0.9'
&nbsp;
export default imageCompression
&nbsp;</pre></td></tr></table></pre>
Expand All @@ -331,7 +331,7 @@ <h1><a href="index.html">All files</a> index.js</h1>
<div class='footer quiet pad2 space-top1 center small'>
Code coverage generated by
<a href="https://istanbul.js.org/" target="_blank">istanbul</a>
at Mon Mar 16 2020 16:08:11 GMT+0800 (Hong Kong Standard Time)
at Wed Mar 25 2020 23:40:22 GMT+0800 (Hong Kong Standard Time)
</div>
</div>
<script src="prettify.js"></script>
Expand Down
Loading

0 comments on commit 7d1f4f5

Please sign in to comment.