Release 1.0.9

Author: Donaldcwl

CHANGELOG.md

@@ -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

README.md

@@ -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
 ```
@@ -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

coverage/badge.svg

@@ -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}}
 }

coverage/coverage-final.json

@@ -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>
 
 
@@ -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>
 
 
@@ -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>
@@ -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>
@@ -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>
@@ -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;
@@ -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
@@ -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>

coverage/coverage-summary.json

@@ -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>
 
 
@@ -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>
 
 
@@ -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>
@@ -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>

coverage/image-compression.js.html

@@ -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>
@@ -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>