release v1.0.2

- fixing bug related to image orientation and squeezing

Author: Donaldcwl

CHANGELOG.md

@@ -0,0 +1,12 @@
+## v1.0.2 (8 Apr 2019)
+* fixing bug related to image orientation and squeezing
+
+## v1.0.1 (8 Mar 2019)
+* fixing bug related to wrong image output resolution in some case
+
+## v1.0.0 (6 Feb 2019)
+* breaking change: change "imageCompression" function signature
+* use of OffscreenCanvas when support, fallback to document.createElement('canvas')
+* use createImageBitmap when support, fallback to FileReader readAsDataURL
+* add web worker support
+* follows image exif orientation

README.md

@@ -9,17 +9,6 @@ Javascript module to be run in the web browser for image compression.
 - You can use this module to compress jpeg and png image by reducing **resolution** or **storage size** before uploading to application server to save bandwidth.
 - **Multi-thread** (web worker) non-blocking compression are supported through options.
 
-## Change log ##
-v1.0.1
-- fixing bug related to wrong image output resolution in some case
-
-v1.0.0
-- breaking change: change "imageCompression" function signature
-- use of OffscreenCanvas when support, fallback to document.createElement('canvas')
-- use createImageBitmap when support, fallback to FileReader readAsDataURL
-- add web worker support
-- follows image exif orientation
-
 ## Install ##
 You can download imageCompression from the [dist folder][dist]. Alternatively, you can install it via yarn or npm
 ```

coverage/badge.svg

@@ -1,5 +1,5 @@
-{"total": {"lines":{"total":159,"covered":115,"skipped":0,"pct":72.33},"statements":{"total":172,"covered":117,"skipped":0,"pct":68.02},"functions":{"total":21,"covered":18,"skipped":0,"pct":85.71},"branches":{"total":74,"covered":39,"skipped":0,"pct":52.7}}
+{"total": {"lines":{"total":161,"covered":117,"skipped":0,"pct":72.67},"statements":{"total":174,"covered":119,"skipped":0,"pct":68.39},"functions":{"total":21,"covered":18,"skipped":0,"pct":85.71},"branches":{"total":74,"covered":39,"skipped":0,"pct":52.7}}
 ,"/Users/donald/Project/browser-image-compression/lib/image-compression.js": {"lines":{"total":31,"covered":23,"skipped":0,"pct":74.19},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":31,"covered":23,"skipped":0,"pct":74.19},"branches":{"total":18,"covered":13,"skipped":0,"pct":72.22}}
 ,"/Users/donald/Project/browser-image-compression/lib/index.js": {"lines":{"total":25,"covered":22,"skipped":0,"pct":88},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":25,"covered":22,"skipped":0,"pct":88},"branches":{"total":17,"covered":12,"skipped":0,"pct":70.59}}
-,"/Users/donald/Project/browser-image-compression/lib/utils.js": {"lines":{"total":103,"covered":70,"skipped":0,"pct":67.96},"functions":{"total":19,"covered":16,"skipped":0,"pct":84.21},"statements":{"total":116,"covered":72,"skipped":0,"pct":62.07},"branches":{"total":39,"covered":14,"skipped":0,"pct":35.9}}
+,"/Users/donald/Project/browser-image-compression/lib/utils.js": {"lines":{"total":105,"covered":72,"skipped":0,"pct":68.57},"functions":{"total":19,"covered":16,"skipped":0,"pct":84.21},"statements":{"total":118,"covered":74,"skipped":0,"pct":62.71},"branches":{"total":39,"covered":14,"skipped":0,"pct":35.9}}
 }

coverage/coverage-final.json

@@ -115,7 +115,8 @@ <h1>
 <a name='L67'></a><a href='#L67'>67</a>
 <a name='L68'></a><a href='#L68'>68</a>
 <a name='L69'></a><a href='#L69'>69</a>
-<a name='L70'></a><a href='#L70'>70</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L70'></a><a href='#L70'>70</a>
+<a name='L71'></a><a href='#L71'>71</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>
@@ -150,13 +151,14 @@ <h1>
 <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-yes">6x</span>
-<span class="cline-any cline-no">&nbsp;</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-yes">6x</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>
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">6x</span>
@@ -218,14 +220,15 @@ <h1>
   let temp2 = handleMaxWidthOrHeight(img, canvas, options)
   canvas = temp2[0]
   isResized = temp2[1]
-  // no need to compress or resize
-  <span class="missing-if-branch" title="if path not taken" >I</span>if (file.size &lt;= maxSizeByte &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >!isResized)</span> {
-<span class="cstat-no" title="statement not covered" >    return file</span>
-  }
 &nbsp;
   // exifOrientation
   options.exifOrientation = options.exifOrientation || <span class="branch-1 cbranch-no" title="branch not covered" >await getExifOrientation(file)</span>
   canvas = followExifOrientation(img, canvas, options.exifOrientation)
+&nbsp;
+  // no need to compress or resize
+  <span class="missing-if-branch" title="if path not taken" >I</span>if (file.size &lt;= maxSizeByte &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >!isResized)</span> {
+<span class="cstat-no" title="statement not covered" >    return file</span>
+  }
 &nbsp;
   let quality = 1
   let compressedFile = await canvasToFile(canvas, file.type, file.name, file.lastModified, quality)
@@ -259,7 +262,7 @@ <h1>
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Mar 08 2019 15:37:32 GMT+0800 (Hong Kong Standard Time)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Mon Apr 08 2019 21:56:18 GMT+0800 (Hong Kong Standard Time)
 </div>
 </div>
 <script src="prettify.js"></script>

coverage/coverage-summary.json

@@ -20,9 +20,9 @@ <h1>
     </h1>
     <div class='clearfix'>
       <div class='fl pad1y space-right2'>
-        <span class="strong">68.02% </span>
+        <span class="strong">68.39% </span>
         <span class="quiet">Statements</span>
-        <span class='fraction'>117/172</span>
+        <span class='fraction'>119/174</span>
       </div>
       <div class='fl pad1y space-right2'>
         <span class="strong">52.7% </span>
@@ -35,9 +35,9 @@ <h1>
         <span class='fraction'>18/21</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">72.33% </span>
+        <span class="strong">72.67% </span>
         <span class="quiet">Lines</span>
-        <span class='fraction'>115/159</span>
+        <span class='fraction'>117/161</span>
       </div>
     </div>
     <p class="quiet">
@@ -89,15 +89,15 @@ <h1>
 
 <tr>
 	<td class="file medium" data-value="utils.js"><a href="utils.js.html">utils.js</a></td>
-	<td data-value="62.07" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 62%;"></div><div class="cover-empty" style="width:38%;"></div></div></td>
-	<td data-value="62.07" class="pct medium">62.07%</td>
-	<td data-value="116" class="abs medium">72/116</td>
+	<td data-value="62.71" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 62%;"></div><div class="cover-empty" style="width:38%;"></div></div></td>
+	<td data-value="62.71" class="pct medium">62.71%</td>
+	<td data-value="118" class="abs medium">74/118</td>
 	<td data-value="35.9" class="pct low">35.9%</td>
 	<td data-value="39" class="abs low">14/39</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="67.96" class="pct medium">67.96%</td>
-	<td data-value="103" class="abs medium">70/103</td>
+	<td data-value="68.57" class="pct medium">68.57%</td>
+	<td data-value="105" class="abs medium">72/105</td>
 	</tr>
 
 </tbody>
@@ -106,7 +106,7 @@ <h1>
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Mar 08 2019 15:37:32 GMT+0800 (Hong Kong Standard Time)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Mon Apr 08 2019 21:56:18 GMT+0800 (Hong Kong Standard Time)
 </div>
 </div>
 <script src="prettify.js"></script>

coverage/image-compression.js.html

@@ -289,7 +289,7 @@ <h1>
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Mar 08 2019 15:37:32 GMT+0800 (Hong Kong Standard Time)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Mon Apr 08 2019 21:56:18 GMT+0800 (Hong Kong Standard Time)
 </div>
 </div>
 <script src="prettify.js"></script>

coverage/index.html

@@ -115,7 +115,8 @@ <h1>
 <a name='L67'></a><a href='#L67'>67</a>
 <a name='L68'></a><a href='#L68'>68</a>
 <a name='L69'></a><a href='#L69'>69</a>
-<a name='L70'></a><a href='#L70'>70</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L70'></a><a href='#L70'>70</a>
+<a name='L71'></a><a href='#L71'>71</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>
@@ -150,13 +151,14 @@ <h1>
 <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-yes">6x</span>
-<span class="cline-any cline-no">&nbsp;</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-yes">6x</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>
 <span class="cline-any cline-yes">6x</span>
 <span class="cline-any cline-yes">6x</span>
@@ -218,14 +220,15 @@ <h1>
   let temp2 = handleMaxWidthOrHeight(img, canvas, options)
   canvas = temp2[0]
   isResized = temp2[1]
-  // no need to compress or resize
-  <span class="missing-if-branch" title="if path not taken" >I</span>if (file.size &lt;= maxSizeByte &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >!isResized)</span> {
-<span class="cstat-no" title="statement not covered" >    return file</span>
-  }
 &nbsp;
   // exifOrientation
   options.exifOrientation = options.exifOrientation || <span class="branch-1 cbranch-no" title="branch not covered" >await getExifOrientation(file)</span>
   canvas = followExifOrientation(img, canvas, options.exifOrientation)
+&nbsp;
+  // no need to compress or resize
+  <span class="missing-if-branch" title="if path not taken" >I</span>if (file.size &lt;= maxSizeByte &amp;&amp; <span class="branch-1 cbranch-no" title="branch not covered" >!isResized)</span> {
+<span class="cstat-no" title="statement not covered" >    return file</span>
+  }
 &nbsp;
   let quality = 1
   let compressedFile = await canvasToFile(canvas, file.type, file.name, file.lastModified, quality)
@@ -259,7 +262,7 @@ <h1>
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Mar 08 2019 15:37:33 GMT+0800 (Hong Kong Standard Time)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Mon Apr 08 2019 21:56:19 GMT+0800 (Hong Kong Standard Time)
 </div>
 </div>
 <script src="prettify.js"></script>

coverage/index.js.html

@@ -20,9 +20,9 @@ <h1>
     </h1>
     <div class='clearfix'>
       <div class='fl pad1y space-right2'>
-        <span class="strong">68.02% </span>
+        <span class="strong">68.39% </span>
         <span class="quiet">Statements</span>
-        <span class='fraction'>117/172</span>
+        <span class='fraction'>119/174</span>
       </div>
       <div class='fl pad1y space-right2'>
         <span class="strong">52.7% </span>
@@ -35,9 +35,9 @@ <h1>
         <span class='fraction'>18/21</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">72.33% </span>
+        <span class="strong">72.67% </span>
         <span class="quiet">Lines</span>
-        <span class='fraction'>115/159</span>
+        <span class='fraction'>117/161</span>
       </div>
     </div>
     <p class="quiet">
@@ -89,15 +89,15 @@ <h1>
 
 <tr>
 	<td class="file medium" data-value="utils.js"><a href="utils.js.html">utils.js</a></td>
-	<td data-value="62.07" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 62%;"></div><div class="cover-empty" style="width:38%;"></div></div></td>
-	<td data-value="62.07" class="pct medium">62.07%</td>
-	<td data-value="116" class="abs medium">72/116</td>
+	<td data-value="62.71" class="pic medium"><div class="chart"><div class="cover-fill" style="width: 62%;"></div><div class="cover-empty" style="width:38%;"></div></div></td>
+	<td data-value="62.71" class="pct medium">62.71%</td>
+	<td data-value="118" class="abs medium">74/118</td>
 	<td data-value="35.9" class="pct low">35.9%</td>
 	<td data-value="39" class="abs low">14/39</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="67.96" class="pct medium">67.96%</td>
-	<td data-value="103" class="abs medium">70/103</td>
+	<td data-value="68.57" class="pct medium">68.57%</td>
+	<td data-value="105" class="abs medium">72/105</td>
 	</tr>
 
 </tbody>
@@ -106,7 +106,7 @@ <h1>
 </div><!-- /wrapper -->
 <div class='footer quiet pad2 space-top1 center small'>
   Code coverage
-  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Fri Mar 08 2019 15:37:33 GMT+0800 (Hong Kong Standard Time)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Mon Apr 08 2019 21:56:19 GMT+0800 (Hong Kong Standard Time)
 </div>
 </div>
 <script src="prettify.js"></script>