release 1.0.3

Author: Donaldcwl

CHANGELOG.md

@@ -1,12 +1,18 @@
+## v1.0.3 (1 June 2019)
+* added: support for cordova project that uses cordova-plugin-file
+* optimized: follow image exif orientation even though image do not required to compress or resize
+* fixed: error may throw on iPhone Safari because of OffscreenCanvas cannot get 2d context
+* fixed: exif orientation do not work in some situation
+
 ## v1.0.2 (8 Apr 2019)
-* fixing bug related to image orientation and squeezing
+* fixed: bug related to image orientation and squeezing
 
 ## v1.0.1 (8 Mar 2019)
-* fixing bug related to wrong image output resolution in some case
+* fixed: 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
+* optimized: use of OffscreenCanvas when support, fallback to document.createElement('canvas')
+* optimized: use createImageBitmap when support, fallback to FileReader readAsDataURL
+* added: support web worker
+* added: follows image exif orientation

README.md

@@ -18,7 +18,7 @@ yarn add browser-image-compression
 ```
 or use a CDN like [delivrjs]:
 ```
-https://cdn.jsdelivr.net/npm/[email protected].2/dist/browser-image-compression.js
+https://cdn.jsdelivr.net/npm/[email protected].3/dist/browser-image-compression.js
 or
 https://cdn.jsdelivr.net/npm/browser-image-compression@latest/dist/browser-image-compression.js
 ```

coverage/badge.svg

@@ -1,5 +1,5 @@
-{"total": {"lines":{"total":163,"covered":125,"skipped":0,"pct":76.69},"statements":{"total":177,"covered":127,"skipped":0,"pct":71.75},"functions":{"total":21,"covered":18,"skipped":0,"pct":85.71},"branches":{"total":80,"covered":45,"skipped":0,"pct":56.25}}
-,"/Users/donald/Project/browser-image-compression/lib/image-compression.js": {"lines":{"total":31,"covered":29,"skipped":0,"pct":93.55},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":31,"covered":29,"skipped":0,"pct":93.55},"branches":{"total":18,"covered":15,"skipped":0,"pct":83.33}}
-,"/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":107,"covered":74,"skipped":0,"pct":69.16},"functions":{"total":19,"covered":16,"skipped":0,"pct":84.21},"statements":{"total":121,"covered":76,"skipped":0,"pct":62.81},"branches":{"total":45,"covered":18,"skipped":0,"pct":40}}
+{"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}}
+,"/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}}
+,"/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}}
+,"/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}}
 }

coverage/coverage-final.json

@@ -20,24 +20,24 @@ <h1>
     </h1>
     <div class='clearfix'>
       <div class='fl pad1y space-right2'>
-        <span class="strong">93.55% </span>
+        <span class="strong">100% </span>
         <span class="quiet">Statements</span>
-        <span class='fraction'>29/31</span>
+        <span class='fraction'>21/21</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">83.33% </span>
+        <span class="strong">90% </span>
         <span class="quiet">Branches</span>
-        <span class='fraction'>15/18</span>
+        <span class='fraction'>9/10</span>
       </div>
       <div class='fl pad1y space-right2'>
         <span class="strong">100% </span>
         <span class="quiet">Functions</span>
         <span class='fraction'>1/1</span>
       </div>
       <div class='fl pad1y space-right2'>
-        <span class="strong">93.55% </span>
+        <span class="strong">100% </span>
         <span class="quiet">Lines</span>
-        <span class='fraction'>29/31</span>
+        <span class='fraction'>21/21</span>
       </div>
     </div>
     <p class="quiet">
@@ -100,23 +100,7 @@ <h1>
 <a name='L52'></a><a href='#L52'>52</a>
 <a name='L53'></a><a href='#L53'>53</a>
 <a name='L54'></a><a href='#L54'>54</a>
-<a name='L55'></a><a href='#L55'>55</a>
-<a name='L56'></a><a href='#L56'>56</a>
-<a name='L57'></a><a href='#L57'>57</a>
-<a name='L58'></a><a href='#L58'>58</a>
-<a name='L59'></a><a href='#L59'>59</a>
-<a name='L60'></a><a href='#L60'>60</a>
-<a name='L61'></a><a href='#L61'>61</a>
-<a name='L62'></a><a href='#L62'>62</a>
-<a name='L63'></a><a href='#L63'>63</a>
-<a name='L64'></a><a href='#L64'>64</a>
-<a name='L65'></a><a href='#L65'>65</a>
-<a name='L66'></a><a href='#L66'>66</a>
-<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>
-<a name='L71'></a><a href='#L71'>71</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L55'></a><a href='#L55'>55</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>
@@ -136,57 +120,41 @@ <h1>
 <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-no">&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>
 <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-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-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-neutral">&nbsp;</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-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">6x</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</span>
-<span class="cline-any cline-yes">5x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">5x</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">3x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</span>
+<span class="cline-any cline-yes">7x</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">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">2x</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">7x</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></td><td class="text"><pre class="prettyprint lang-js">import { canvasToFile, drawFileInCanvas, followExifOrientation, getExifOrientation, handleMaxWidthOrHeight } from './utils'
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">2x</span>
+<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'
 &nbsp;
 /**
  * Compress an image file.
@@ -203,56 +171,40 @@ <h1>
   let remainingTrials = options.maxIteration || 10
 &nbsp;
   const maxSizeByte = options.maxSizeMB * 1024 * 1024
-&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; typeof options.maxWidthOrHeight === 'undefined') {
-<span class="cstat-no" title="statement not covered" >    return file</span>
-  }
-&nbsp;
-  let img, canvas, isResized
 &nbsp;
   // drawFileInCanvas
-  let temp = await drawFileInCanvas(file)
-  img = temp[0]
-  canvas = temp[1]
+  let [img, canvas] = await drawFileInCanvas(file)
 &nbsp;
   // handleMaxWidthOrHeight
-  let temp2 = handleMaxWidthOrHeight(img, canvas, options)
-  canvas = temp2[0]
-  isResized = temp2[1]
+  canvas = handleMaxWidthOrHeight(canvas, options)
 &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; !isResized) {
-<span class="cstat-no" title="statement not covered" >    return file</span>
-  }
+  canvas = followExifOrientation(canvas, options.exifOrientation)
 &nbsp;
   let quality = 1
-  let compressedFile = await canvasToFile(canvas, file.type, file.name, file.lastModified, quality)
-  if (file.type === 'image/png') {
-    while (remainingTrials-- &amp;&amp; compressedFile.size &gt; maxSizeByte) {
-      canvas.width *= 0.9
-      canvas.height *= 0.9
 &nbsp;
-      const ctx = canvas.getContext('2d')
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+  let tempFile = await canvasToFile(canvas, file.type, file.name, file.lastModified, quality)
+  // check if we need to compress or resize
+  if (tempFile.size &lt;= maxSizeByte) {
+    // no need to compress
+    return tempFile
+  }
 &nbsp;
-      compressedFile = await canvasToFile(canvas, file.type, file.name, file.lastModified, quality)
-    }
-  } else { // if (file.type === 'image/jpeg') {
-    while (remainingTrials-- &amp;&amp; compressedFile.size &gt; maxSizeByte) {
-      canvas.width *= 0.9
-      canvas.height *= 0.9
+  let compressedFile = tempFile
+  while (remainingTrials-- &amp;&amp; compressedFile.size &gt; maxSizeByte) {
+    const newWidth = canvas.width * 0.9
+    const newHeight = canvas.height * 0.9
+    const [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight)
 &nbsp;
-      const ctx = canvas.getContext('2d')
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+    ctx.drawImage(img, 0, 0, newWidth, newHeight)
 &nbsp;
+    if (file.type === 'image/jpeg') {
       quality *= 0.9
-      compressedFile = await canvasToFile(canvas, file.type, file.name, file.lastModified, quality)
     }
+    compressedFile = await canvasToFile(newCanvas, file.type, file.name, file.lastModified, quality)
+&nbsp;
+    canvas = newCanvas
   }
 &nbsp;
   return compressedFile
@@ -262,7 +214,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 May 31 2019 16:31:31 GMT+0800 (Hong Kong Standard Time)
+  generated by <a href="https://istanbul.js.org/" target="_blank">istanbul</a> at Sat Jun 01 2019 02:19:15 GMT+0800 (Hong Kong Standard Time)
 </div>
 </div>
 <script src="prettify.js"></script>