release v1.0.7

Author: Donaldcwl

.gitignore

@@ -87,5 +87,5 @@ Temporary Items
 .apdisk
 
 .idea/
-dist/
-coverage/
+#dist/
+#coverage/

coverage/badge.svg

@@ -1,5 +1,5 @@
-{"total": {"lines":{"total":175,"covered":135,"skipped":0,"pct":77.14},"statements":{"total":189,"covered":137,"skipped":0,"pct":72.49},"functions":{"total":24,"covered":20,"skipped":0,"pct":83.33},"branches":{"total":87,"covered":46,"skipped":0,"pct":52.87}}
-,"/Users/donald/Project/browser-image-compression/lib/image-compression.js": {"lines":{"total":28,"covered":28,"skipped":0,"pct":100},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":28,"covered":28,"skipped":0,"pct":100},"branches":{"total":14,"covered":13,"skipped":0,"pct":92.86}}
-,"/Users/donald/Project/browser-image-compression/lib/index.js": {"lines":{"total":29,"covered":25,"skipped":0,"pct":86.21},"functions":{"total":1,"covered":1,"skipped":0,"pct":100},"statements":{"total":29,"covered":25,"skipped":0,"pct":86.21},"branches":{"total":19,"covered":13,"skipped":0,"pct":68.42}}
+{"total": {"lines":{"total":192,"covered":151,"skipped":0,"pct":78.65},"statements":{"total":206,"covered":153,"skipped":0,"pct":74.27},"functions":{"total":26,"covered":22,"skipped":0,"pct":84.62},"branches":{"total":90,"covered":48,"skipped":0,"pct":53.33}}
+,"/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}}
+,"/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":118,"covered":82,"skipped":0,"pct":69.49},"functions":{"total":22,"covered":18,"skipped":0,"pct":81.82},"statements":{"total":132,"covered":84,"skipped":0,"pct":63.64},"branches":{"total":54,"covered":20,"skipped":0,"pct":37.04}}
 }

coverage/coverage-final.json

@@ -23,30 +23,30 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
         <div class='clearfix'>
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">95.65% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>28/28</span>
+                <span class='fraction'>44/46</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">92.86% </span>
+                <span class="strong">84.21% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>13/14</span>
+                <span class='fraction'>16/19</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Functions</span>
-                <span class='fraction'>1/1</span>
+                <span class='fraction'>3/3</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">100% </span>
+                <span class="strong">95.65% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>28/28</span>
+                <span class='fraction'>44/46</span>
             </div>
 
 
@@ -133,7 +133,48 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
 <a name='L74'></a><a href='#L74'>74</a>
 <a name='L75'></a><a href='#L75'>75</a>
 <a name='L76'></a><a href='#L76'>76</a>
-<a name='L77'></a><a href='#L77'>77</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L77'></a><a href='#L77'>77</a>
+<a name='L78'></a><a href='#L78'>78</a>
+<a name='L79'></a><a href='#L79'>79</a>
+<a name='L80'></a><a href='#L80'>80</a>
+<a name='L81'></a><a href='#L81'>81</a>
+<a name='L82'></a><a href='#L82'>82</a>
+<a name='L83'></a><a href='#L83'>83</a>
+<a name='L84'></a><a href='#L84'>84</a>
+<a name='L85'></a><a href='#L85'>85</a>
+<a name='L86'></a><a href='#L86'>86</a>
+<a name='L87'></a><a href='#L87'>87</a>
+<a name='L88'></a><a href='#L88'>88</a>
+<a name='L89'></a><a href='#L89'>89</a>
+<a name='L90'></a><a href='#L90'>90</a>
+<a name='L91'></a><a href='#L91'>91</a>
+<a name='L92'></a><a href='#L92'>92</a>
+<a name='L93'></a><a href='#L93'>93</a>
+<a name='L94'></a><a href='#L94'>94</a>
+<a name='L95'></a><a href='#L95'>95</a>
+<a name='L96'></a><a href='#L96'>96</a>
+<a name='L97'></a><a href='#L97'>97</a>
+<a name='L98'></a><a href='#L98'>98</a>
+<a name='L99'></a><a href='#L99'>99</a>
+<a name='L100'></a><a href='#L100'>100</a>
+<a name='L101'></a><a href='#L101'>101</a>
+<a name='L102'></a><a href='#L102'>102</a>
+<a name='L103'></a><a href='#L103'>103</a>
+<a name='L104'></a><a href='#L104'>104</a>
+<a name='L105'></a><a href='#L105'>105</a>
+<a name='L106'></a><a href='#L106'>106</a>
+<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>
+<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-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-neutral">&nbsp;</span>
@@ -149,37 +190,58 @@ <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">6x</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">36x</span>
+<span class="cline-any cline-yes">36x</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-yes">12x</span>
+<span class="cline-any cline-yes">12x</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-yes">6x</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">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">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">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-yes">6x</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">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-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-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>
@@ -198,6 +260,9 @@ <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-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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
@@ -208,10 +273,11 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
 <span class="cline-any cline-yes">2x</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-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span></td><td class="text"><pre class="prettyprint lang-js">import {
   canvasToFile,
-  cleanupMemory,
+  cleanupCanvasMemory,
   drawFileInCanvas,
   followExifOrientation,
   getExifOrientation,
@@ -227,38 +293,67 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
  * @param {number} [options.maxSizeMB=Number.POSITIVE_INFINITY]
  * @param {number} [options.maxWidthOrHeight=undefined]
  * @param {number} [options.maxIteration=10]
- * @param {number} [options.exifOrientation=] - default to be the exif orientation from the image file
- * @param {number} [options.fileType=undefined] - default to be the original mime type from the image file
+ * @param {number} [options.exifOrientation] - default to be the exif orientation from the image file
+ * @param {Function} [options.onProgress] - a function takes one progress argument (progress from 0 to 100)
+ * @param {string} [options.fileType] - default to be the original mime type from the image file
  * @returns {Promise&lt;File | Blob&gt;}
  */
 export default async function compress (file, options) {
+  let progress = 0
+&nbsp;
+  function incProgress (inc = 5) {
+    progress += inc
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof options.onProgress === 'function') {
+<span class="cstat-no" title="statement not covered" >      options.onProgress(Math.min(progress, 100))</span>
+    }
+  }
+&nbsp;
+  function setProgress (p) {
+    progress = Math.min(Math.max(p, progress), 100)
+    <span class="missing-if-branch" title="if path not taken" >I</span>if (typeof options.onProgress === 'function') {
+<span class="cstat-no" title="statement not covered" >      options.onProgress(progress)</span>
+    }
+  }
+&nbsp;
   let remainingTrials = options.maxIteration || 10
 &nbsp;
   const maxSizeByte = options.maxSizeMB * 1024 * 1024
+&nbsp;
+  incProgress()
 &nbsp;
   // drawFileInCanvas
   let [img, origCanvas] = await drawFileInCanvas(file)
+&nbsp;
+  incProgress()
 &nbsp;
   // handleMaxWidthOrHeight
   const maxWidthOrHeightFixedCanvas = handleMaxWidthOrHeight(origCanvas, options)
+&nbsp;
+  incProgress()
 &nbsp;
   // exifOrientation
   options.exifOrientation = options.exifOrientation || <span class="branch-1 cbranch-no" title="branch not covered" >await getExifOrientation(file)</span>
+  incProgress()
   const orientationFixedCanvas = followExifOrientation(maxWidthOrHeightFixedCanvas, options.exifOrientation)
+  incProgress()
 &nbsp;
   let quality = 1
 &nbsp;
   let tempFile = await canvasToFile(orientationFixedCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
+  incProgress()
   // check if we need to compress or resize
   if (tempFile.size &lt;= maxSizeByte) {
     // no need to compress
+    setProgress(100)
     return tempFile
   }
 &nbsp;
-  let compressedFile = tempFile
+  const originalSize = tempFile.size
+  let currentSize = originalSize
+  let compressedFile
   let newCanvas, ctx
   let canvas = orientationFixedCanvas
-  while (remainingTrials-- &amp;&amp; compressedFile.size &gt; maxSizeByte) {
+  while (remainingTrials-- &amp;&amp; currentSize &gt; maxSizeByte) {
     const newWidth = canvas.width * 0.9
     const newHeight = canvas.height * 0.9;
     [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight)
@@ -270,19 +365,23 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
     }
     compressedFile = await canvasToFile(newCanvas, options.fileType || file.type, file.name, file.lastModified, quality)
 &nbsp;
-    cleanupMemory(canvas)
+    cleanupCanvasMemory(canvas)
 &nbsp;
     canvas = newCanvas
+&nbsp;
+    currentSize = compressedFile.size
+    setProgress(Math.min(99, Math.floor((originalSize - currentSize) / (originalSize - maxSizeByte) * 100)))
   }
 &nbsp;
   // garbage clean canvas for safari
   // ref: https://bugs.webkit.org/show_bug.cgi?id=195325
-  cleanupMemory(canvas)
-  cleanupMemory(newCanvas)
-  cleanupMemory(maxWidthOrHeightFixedCanvas)
-  cleanupMemory(orientationFixedCanvas)
-  cleanupMemory(origCanvas)
+  cleanupCanvasMemory(canvas)
+  cleanupCanvasMemory(newCanvas)
+  cleanupCanvasMemory(maxWidthOrHeightFixedCanvas)
+  cleanupCanvasMemory(orientationFixedCanvas)
+  cleanupCanvasMemory(origCanvas)
 &nbsp;
+  setProgress(100)
   return compressedFile
 }
 &nbsp;</pre></td></tr></table></pre>
@@ -292,7 +391,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 Sun Mar 15 2020 02:33:08 GMT+0800 (Hong Kong Standard Time)
+                at Mon Mar 16 2020 12:52:28 GMT+0800 (Hong Kong Standard Time)
             </div>
         </div>
         <script src="prettify.js"></script>