Merge pull request #91 from Donaldcwl/dev

Dev 1.0.14

Author: Donaldcwl

.nycrc

@@ -5,7 +5,8 @@
     "lib/**/*.js"
   ],
   "exclude": [
-    "lib/web-worker.js"
+    "lib/web-worker.js",
+    "lib/UPNG.js"
   ],
   "reporter": [
     "text",
@@ -14,4 +15,4 @@
     "html",
     "lcov"
   ]
-}
+}

.travis.yml

@@ -1,3 +1,3 @@
 language: node_js
 node_js:
-  - "10"
+  - "14"

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v1.0.14 (6 Jan 2021)
+* updated: use UZIP to compress PNG image instead of Canvas
+* fixed: PNG transparent background become black after compression [#84](https://github.com/Donaldcwl/browser-image-compression/issues/84), [#76](https://github.com/Donaldcwl/browser-image-compression/issues/76)
+* fixed: progress jump back to 0 when Web Worker failback to main thread [#90](https://github.com/Donaldcwl/browser-image-compression/issues/90)
+
 ## v1.0.13 (8 Nov 2020)
 * added: new option for setting initial quality level [#64](https://github.com/Donaldcwl/browser-image-compression/issues/64), [#78](https://github.com/Donaldcwl/browser-image-compression/issues/78)
 * fixed: options object being altered by the compress func [#71](https://github.com/Donaldcwl/browser-image-compression/pull/71)

README.md

@@ -50,25 +50,25 @@ const options = {
   onProgress: Function,       // optional, a function takes one progress argument (percentage from 0 to 100) 
   useWebWorker: boolean,      // optional, use multi-thread web worker, fallback to run in main-thread (default: true)
 
-  // following options are for advanced user
+  // following options are for advanced users
   maxIteration: number,       // optional, max number of iteration to compress the image (default: 10)
   exifOrientation: number,    // optional, see https://stackoverflow.com/a/32490603/10395024
   fileType: string,           // optional, fileType override
   initialQuality: number      // optional, initial quality value between 0 and 1 (default: 1)
 }
 
-imageCompression(file: File, options): Promise<File | Blob>
+imageCompression(file: File, options): Promise<File>
 ```
 ### Helper function ###
-- for advanced user only, most user won't need to use the helper functions
+- for advanced users only, most users won't need to use the helper functions
 ```javascript
-imageCompression.getDataUrlFromFile(file: File | Blob): Promise<base64 encoded string>
+imageCompression.getDataUrlFromFile(file: File): Promise<base64 encoded string>
 imageCompression.getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise<File>
 imageCompression.loadImage(url: string): Promise<HTMLImageElement>
 imageCompression.drawImageInCanvas(img: HTMLImageElement): HTMLCanvasElement | OffscreenCanvas
-imageCompression.drawFileInCanvas(file: File| Blob): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>
-imageCompression.canvasToFile(canvas: HTMLCanvasElement | OffscreenCanvas, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File | Blob>
-imageCompression.getExifOrientation(file: File| Blob): Promise<number> // based on https://stackoverflow.com/a/32490603/10395024
+imageCompression.drawFileInCanvas(file: File): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement | OffscreenCanvas]>
+imageCompression.canvasToFile(canvas: HTMLCanvasElement | OffscreenCanvas, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File>
+imageCompression.getExifOrientation(file: File): Promise<number> // based on https://stackoverflow.com/a/32490603/10395024
 ```
 
 ## Usage ##
@@ -148,11 +148,7 @@ You can include the following script to load the Promise polyfill:
 ```
 
 ## Typescript type definitions ##
-```
-npm install --save-dev @types/browser-image-compression
-or
-yarn add --dev @types/browser-image-compression
-```
+Typescript definitions are included in the package & referenced in the `types` section of the `package.json`
 
 ## Contribution ##
 1. fork the repo and git clone it

coverage/badge.svg

@@ -1,5 +1,5 @@
-{"total": {"lines":{"total":219,"covered":173,"skipped":0,"pct":79},"statements":{"total":226,"covered":175,"skipped":0,"pct":77.43},"functions":{"total":28,"covered":24,"skipped":0,"pct":85.71},"branches":{"total":107,"covered":61,"skipped":0,"pct":57.01}}
-,"D:\\Projects\\browser-image-compression\\lib\\image-compression.js": {"lines":{"total":53,"covered":53,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":53,"covered":53,"skipped":0,"pct":100},"branches":{"total":26,"covered":21,"skipped":0,"pct":80.77}}
-,"D:\\Projects\\browser-image-compression\\lib\\index.js": {"lines":{"total":30,"covered":27,"skipped":0,"pct":90},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":30,"covered":27,"skipped":0,"pct":90},"branches":{"total":19,"covered":13,"skipped":0,"pct":68.42}}
-,"D:\\Projects\\browser-image-compression\\lib\\utils.js": {"lines":{"total":136,"covered":93,"skipped":0,"pct":68.38},"functions":{"total":23,"covered":19,"skipped":0,"pct":82.61},"statements":{"total":143,"covered":95,"skipped":0,"pct":66.43},"branches":{"total":62,"covered":27,"skipped":0,"pct":43.55}}
+{"total": {"lines":{"total":226,"covered":179,"skipped":0,"pct":79.2},"statements":{"total":233,"covered":181,"skipped":0,"pct":77.68},"functions":{"total":28,"covered":24,"skipped":0,"pct":85.71},"branches":{"total":106,"covered":61,"skipped":0,"pct":57.55}}
+,"D:\\Projects\\browser-image-compression\\lib\\image-compression.js": {"lines":{"total":47,"covered":47,"skipped":0,"pct":100},"functions":{"total":3,"covered":3,"skipped":0,"pct":100},"statements":{"total":47,"covered":47,"skipped":0,"pct":100},"branches":{"total":23,"covered":19,"skipped":0,"pct":82.61}}
+,"D:\\Projects\\browser-image-compression\\lib\\index.js": {"lines":{"total":35,"covered":31,"skipped":0,"pct":88.57},"functions":{"total":2,"covered":2,"skipped":0,"pct":100},"statements":{"total":35,"covered":31,"skipped":0,"pct":88.57},"branches":{"total":19,"covered":13,"skipped":0,"pct":68.42}}
+,"D:\\Projects\\browser-image-compression\\lib\\utils.js": {"lines":{"total":144,"covered":101,"skipped":0,"pct":70.14},"functions":{"total":23,"covered":19,"skipped":0,"pct":82.61},"statements":{"total":151,"covered":103,"skipped":0,"pct":68.21},"branches":{"total":64,"covered":29,"skipped":0,"pct":45.31}}
 }

coverage/coverage-final.json

@@ -25,14 +25,14 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Statements</span>
-                <span class='fraction'>53/53</span>
+                <span class='fraction'>47/47</span>
             </div>
 
 
             <div class='fl pad1y space-right2'>
-                <span class="strong">80.77% </span>
+                <span class="strong">82.61% </span>
                 <span class="quiet">Branches</span>
-                <span class='fraction'>21/26</span>
+                <span class='fraction'>19/23</span>
             </div>
 
 
@@ -46,7 +46,7 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
             <div class='fl pad1y space-right2'>
                 <span class="strong">100% </span>
                 <span class="quiet">Lines</span>
-                <span class='fraction'>53/53</span>
+                <span class='fraction'>47/47</span>
             </div>
 
 
@@ -174,13 +174,8 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
 <a name='L115'></a><a href='#L115'>115</a>
 <a name='L116'></a><a href='#L116'>116</a>
 <a name='L117'></a><a href='#L117'>117</a>
-<a name='L118'></a><a href='#L118'>118</a>
-<a name='L119'></a><a href='#L119'>119</a>
-<a name='L120'></a><a href='#L120'>120</a>
-<a name='L121'></a><a href='#L121'>121</a>
-<a name='L122'></a><a href='#L122'>122</a>
-<a name='L123'></a><a href='#L123'>123</a>
-<a name='L124'></a><a href='#L124'>124</a></td><td class="line-coverage quiet"><span class="cline-any cline-neutral">&nbsp;</span>
+<a name='L118'></a><a href='#L118'>118</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>
@@ -215,8 +210,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">9x</span>
-<span class="cline-any cline-yes">9x</span>
+<span class="cline-any cline-yes">8x</span>
+<span class="cline-any cline-yes">8x</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>
@@ -244,7 +239,6 @@ <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-yes">6x</span>
 <span class="cline-any cline-yes">6x</span>
@@ -257,51 +251,45 @@ <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">4x</span>
-<span class="cline-any cline-yes">4x</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-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-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-yes">2x</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-yes">3x</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-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">2x</span>
 <span class="cline-any cline-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">2x</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-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
+<span class="cline-any cline-yes">2x</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-neutral">&nbsp;</span>
-<span class="cline-any cline-yes">3x</span>
-<span class="cline-any cline-yes">3x</span>
+<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-neutral">&nbsp;</span>
+<span class="cline-any cline-neutral">&nbsp;</span>
+<span class="cline-any cline-yes">1x</span>
+<span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</span>
 <span class="cline-any cline-yes">1x</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-yes">2x</span>
-<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-yes">1x</span>
+<span class="cline-any cline-yes">1x</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,
@@ -327,10 +315,11 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
  * @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
  * @param {number} [options.initialQuality=1.0]
+ * @param {number} previousProgress - for internal try catch rerunning start from previous progress
  * @returns {Promise&lt;File | Blob&gt;}
  */
-export default async function compress (file, options) {
-  let progress = 0
+export default async function compress (file, options, previousProgress = 0) {
+  let progress = previousProgress
 &nbsp;
   function incProgress (inc = 5) {
     progress += inc
@@ -361,12 +350,11 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
   // exifOrientation
   const exifOrientation = options.exifOrientation || <span class="branch-1 cbranch-no" title="branch not covered" >await getExifOrientation(file)</span>
   incProgress()
-  const orientationFixedCanvas = (await isAutoOrientationInBrowser) ? <span class="branch-0 cbranch-no" title="branch not covered" >maxWidthOrHeightFixedCanvas </span>: followExifOrientation(maxWidthOrHeightFixedCanvas, exifOrientation)
+  const orientationFixedCanvas = (await isAutoOrientationInBrowser()) ? <span class="branch-0 cbranch-no" title="branch not covered" >maxWidthOrHeightFixedCanvas </span>: followExifOrientation(maxWidthOrHeightFixedCanvas, exifOrientation)
   incProgress()
 &nbsp;
   let quality = options.initialQuality || 1.0
 &nbsp;
-  const tempFileType = 'image/jpeg'
   const outputFileType = options.fileType || file.type
 &nbsp;
   let tempFile = await canvasToFile(orientationFixedCanvas, outputFileType, file.name, file.lastModified, quality)
@@ -399,23 +387,17 @@ <h1><a href="index.html">All files</a> image-compression.js</h1>
 &nbsp;
     ctx.drawImage(canvas, 0, 0, newWidth, newHeight)
 &nbsp;
-    <span class="missing-if-branch" title="else path not taken" >E</span>if (tempFileType === 'image/jpeg') {
-      quality *= 0.95
-    }
-    compressedFile = await canvasToFile(newCanvas, tempFileType, file.name, file.lastModified, quality)
+    quality *= 0.95
+    compressedFile = await canvasToFile(newCanvas, outputFileType, file.name, file.lastModified, quality)
 &nbsp;
     cleanupCanvasMemory(canvas)
 &nbsp;
     canvas = newCanvas
 &nbsp;
     currentSize = compressedFile.size
+    // console.log('currentSize', currentSize)
     setProgress(Math.min(99, Math.floor((renderedSize - currentSize) / (renderedSize - maxSizeByte) * 100)))
   }
-  if (tempFileType !== outputFileType) {
-    compressedFile = new Blob([compressedFile], { type: outputFileType })
-    compressedFile.name = file.name
-    compressedFile.lastModified = file.lastModified
-  }
 &nbsp;
   cleanupCanvasMemory(canvas)
   cleanupCanvasMemory(newCanvas)
@@ -433,7 +415,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 Nov 08 2020 23:03:52 GMT+0800 (Hong Kong Standard Time)
+                at Wed Jan 06 2021 01:44:51 GMT+0800 (Hong Kong Standard Time)
             </div>
         </div>
         <script src="prettify.js"></script>