Merge pull request #121 from Donaldcwl/dev

Dev v1.0.16

Author: Donaldcwl

.mocharc.js

@@ -1,4 +1,4 @@
 module.exports = {
   recursive: true,
-  require: ['@babel/register', '@babel/polyfill', './test/setup_jsdom.js']
+  require: ['@babel/register', '@babel/polyfill', './test/setup_global.js', './test/setup_jsdom.js']
 }

CHANGELOG.md

@@ -1,3 +1,8 @@
+## v1.0.16 (26 Sep 2021)
+* fixed: Fixed output white picture on iOS Safari for large image because of canvas max size [#116](https://github.com/Donaldcwl/browser-image-compression/issues/116)
+* fixed: Fixed wrong image orientation on iOS device [#118](https://github.com/Donaldcwl/browser-image-compression/issues/118)
+* feature: set white background for transparent png file with jpeg file extension [#119](https://github.com/Donaldcwl/browser-image-compression/issues/119)
+
 ## v1.0.15 (12 Aug 2021)
 * fixed: Fixed black Images and type error by considering Canvas maximum size supported by different browsers [#84](https://github.com/Donaldcwl/browser-image-compression/issues/84), [#36](https://github.com/Donaldcwl/browser-image-compression/issues/36)
 * fixed: IE compatibility, include polyfill with core-js@3 e.g, globalThis, Promise [#108](https://github.com/Donaldcwl/browser-image-compression/issues/108), [#110](https://github.com/Donaldcwl/browser-image-compression/issues/110)

README.md

@@ -78,7 +78,7 @@ So, we resize the image to less than the maximum size that each browser restrict
 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.drawImageInCanvas(img: HTMLImageElement, fileType?: string): HTMLCanvasElement | OffscreenCanvas
 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

example/basic.html

@@ -78,14 +78,18 @@
       useWebWorker: useWebWorker,
       onProgress: onProgress
     }
-    imageCompression(file, options).then(function (output) {
-        logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
-        console.log('output', output)
-        const downloadLink = URL.createObjectURL(output)
-        logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
-        document.getElementById('preview-after-compress').src = downloadLink
-        return uploadToServer(output)
-    })
+    imageCompression(file, options)
+      .then(function (output) {
+          logDom.innerHTML += ', output size:' + (output.size / 1024 / 1024).toFixed(2) + 'mb'
+          console.log('output', output)
+          const downloadLink = URL.createObjectURL(output)
+          logDom.innerHTML += '&nbsp;<a href="' + downloadLink + '" download="' + file.name + '">download compressed image</a>'
+          document.getElementById('preview-after-compress').src = downloadLink
+          return uploadToServer(output)
+      })
+      .catch(function (error) {
+        alert(error.message)
+      })
 
 
     function onProgress (p) {

example/development.html

@@ -87,6 +87,9 @@
         document.getElementById('preview-after-compress').src = downloadLink
         return uploadToServer(output)
       })
+      .catch(function (error) {
+        alert(error.message)
+      })
 
     function onProgress (p) {
       console.log('onProgress', p)

lib/config/max-canvas-size.js

@@ -1,8 +1,10 @@
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
+// see: https://github.com/jhildenbiddle/canvas-size#test-results
+// see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
 export default {
   chrome: 16384,
-  firefox: 22528,
-  safari: 16384,
+  firefox: 11180,
+  'desktop safari': 16384,
   'internet explorer': 8192,
+  'mobile safari': 4096,
   etc: 8192,
 };

lib/image-compression.js

@@ -69,12 +69,17 @@ export default async function compress(file, options, previousProgress = 0) {
 
   const origExceedMaxSize = tempFile.size > maxSizeByte;
   const sizeBecomeLarger = tempFile.size > file.size;
-  // console.log('original file size', file.size)
-  // console.log('current file size', tempFile.size)
+  if (process.env.BUILD === 'development') {
+    console.log('original file size', file.size);
+    console.log('current file size', tempFile.size);
+  }
 
   // check if we need to compress or resize
   if (!origExceedMaxSize && !sizeBecomeLarger) {
     // no need to compress
+    if (process.env.BUILD === 'development') {
+      console.log('no need to compress');
+    }
     setProgress(100);
     return tempFile;
   }
@@ -89,8 +94,10 @@ export default async function compress(file, options, previousProgress = 0) {
   while (remainingTrials-- && (currentSize > maxSizeByte || currentSize > sourceSize)) {
     const newWidth = origExceedMaxSize ? canvas.width * 0.95 : canvas.width;
     const newHeight = origExceedMaxSize ? canvas.height * 0.95 : canvas.height;
-    // console.log('current width', newWidth);
-    // console.log('current height', newHeight);
+    if (process.env.BUILD === 'development') {
+      console.log('current width', newWidth);
+      console.log('current height', newHeight);
+    }
     [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight);
 
     ctx.drawImage(canvas, 0, 0, newWidth, newHeight);

lib/index.d.ts

@@ -28,7 +28,7 @@ declare namespace imageCompression {
     function getDataUrlFromFile(file: File): Promise<string>;
     function getFilefromDataUrl(dataUrl: string, filename: string, lastModified?: number): Promise<File>;
     function loadImage(src: string): Promise<HTMLImageElement>;
-    function drawImageInCanvas(img: HTMLImageElement): HTMLCanvasElement;
+    function drawImageInCanvas(img: HTMLImageElement, fileType?: string): HTMLCanvasElement;
     function drawFileInCanvas(file: File): Promise<[ImageBitmap | HTMLImageElement, HTMLCanvasElement]>;
     function canvasToFile(canvas: HTMLCanvasElement, fileType: string, fileName: string, fileLastModified: number, quality?: number): Promise<File>;
     function getExifOrientation(file: File): Promise<number>;

lib/index.js

@@ -18,7 +18,7 @@ import {
   getBrowserName,
 } from './utils';
 // eslint-disable-next-line import/no-cycle
-import { compressOnWebWorker } from './web-worker';
+import compressOnWebWorker from './web-worker';
 
 /**
  * Compress an image file.
@@ -61,18 +61,22 @@ async function imageCompression(file, options) {
   // eslint-disable-next-line no-undef, no-restricted-globals
   const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 
-  // if ((useWebWorker && typeof Worker === 'function') || inWebWorker) {
-  //   console.log('run compression in web worker');
-  // } else {
-  //   console.log('run compression in main thread');
-  // }
+  if (process.env.BUILD === 'development') {
+    if ((useWebWorker && typeof Worker === 'function') || inWebWorker) {
+      console.log('run compression in web worker');
+    } else {
+      console.log('run compression in main thread');
+    }
+  }
 
   if (useWebWorker && typeof Worker === 'function' && !inWebWorker) {
     try {
       // "compressOnWebWorker" is kind of like a recursion to call "imageCompression" again inside web worker
       compressedFile = await compressOnWebWorker(file, opts);
     } catch (e) {
-      // console.warn('Run compression in web worker failed:', e, ', fall back to main thread');
+      if (process.env.BUILD === 'development') {
+        console.warn('Run compression in web worker failed:', e, ', fall back to main thread');
+      }
       compressedFile = await compress(file, opts);
     }
   } else {
@@ -82,8 +86,11 @@ async function imageCompression(file, options) {
   try {
     compressedFile.name = file.name;
     compressedFile.lastModified = file.lastModified;
-  // eslint-disable-next-line no-empty
-  } catch (e) {}
+  } catch (e) {
+    if (process.env.BUILD === 'development') {
+      console.error(e);
+    }
+  }
 
   return compressedFile;
 }
@@ -102,6 +109,6 @@ imageCompression.cleanupCanvasMemory = cleanupCanvasMemory;
 imageCompression.isAutoOrientationInBrowser = isAutoOrientationInBrowser;
 imageCompression.approximateBelowMaximumCanvasSizeOfBrowser = approximateBelowMaximumCanvasSizeOfBrowser;
 imageCompression.getBrowserName = getBrowserName;
-imageCompression.version = '1.0.15';
+imageCompression.version = __buildVersion__;
 
 export default imageCompression;

lib/utils.js

@@ -87,13 +87,17 @@ export function loadImage(src) {
  */
 export function getBrowserName() {
   let browserName = 'etc';
-  if (navigator.userAgent.indexOf('Chrome') !== -1 || navigator.userAgent.indexOf('Chromium') !== -1) {
+  const { userAgent } = navigator;
+  if (/Chrom(e|ium)/i.test(userAgent)) {
     browserName = 'chrome';
-  } if (navigator.userAgent.indexOf('Safari') !== -1) {
-    browserName = 'safari';
-  } else if (navigator.userAgent.indexOf('Firefox') !== -1) {
+  } else if (/iP(ad|od|hone)/i.test(userAgent) && /WebKit/i.test(userAgent) && !(/(CriOS|FxiOS|OPiOS|mercury)/i.test(userAgent))) {
+    // see: https://stackoverflow.com/a/35813965
+    browserName = 'mobile safari';
+  } else if (/Safari/i.test(userAgent)) {
+    browserName = 'desktop safari';
+  } else if (/Firefox/i.test(userAgent)) {
     browserName = 'firefox';
-  } else if ((navigator.userAgent.indexOf('MSIE') !== -1) || (!!document.documentMode === true)) { // IF IE > 10
+  } else if (/MSIE/i.test(userAgent) || (!!document.documentMode) === true) { // IF IE > 10
     browserName = 'internet explorer';
   }
   return browserName;
@@ -104,8 +108,6 @@ export function getBrowserName() {
  *
  * it uses binary search to converge below the browser's maximum Canvas size.
  *
- * ref: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas#maximum_canvas_size
- *
  * @param {number} initWidth
  * @param {number} initHeight
  * @returns {object}
@@ -168,15 +170,42 @@ export function getNewCanvasAndCtx(width, height) {
  * drawImageInCanvas
  *
  * @param {HTMLImageElement} img
+ * @param {string} [fileType=undefined]
  * @returns {HTMLCanvasElement | OffscreenCanvas}
  */
-export function drawImageInCanvas(img) {
+export function drawImageInCanvas(img, fileType = undefined) {
   const { width, height } = approximateBelowMaximumCanvasSizeOfBrowser(img.width, img.height);
   const [canvas, ctx] = getNewCanvasAndCtx(width, height);
+  if (fileType && /jpe?g/.test(fileType)) {
+    ctx.fillStyle = 'white'; // to fill the transparent background with white color for png file in jpeg extension
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+  }
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
   return canvas;
 }
 
+/**
+ * Detect IOS device
+ * see: https://stackoverflow.com/a/9039885
+ * @returns {boolean} isIOS device
+ */
+export function isIOS() {
+  if (isIOS.cachedResult !== undefined) {
+    return isIOS.cachedResult;
+  }
+  isIOS.cachedResult = [
+    'iPad Simulator',
+    'iPhone Simulator',
+    'iPod Simulator',
+    'iPad',
+    'iPhone',
+    'iPod',
+  ].includes(navigator.platform)
+  // iPad on iOS 13 detection
+  || (navigator.userAgent.includes('Mac') && 'ontouchend' in document);
+  return isIOS.cachedResult;
+}
+
 /**
  * drawFileInCanvas
  *
@@ -186,12 +215,25 @@ export function drawImageInCanvas(img) {
 export async function drawFileInCanvas(file) {
   let img;
   try {
+    if (isIOS()) {
+      throw new Error('Skip createImageBitmap on IOS device'); // see https://github.com/Donaldcwl/browser-image-compression/issues/118
+    }
     img = await createImageBitmap(file);
   } catch (e) {
-    const dataUrl = await getDataUrlFromFile(file);
-    img = await loadImage(dataUrl);
+    if (process.env.BUILD === 'development') {
+      console.error(e);
+    }
+    try {
+      const dataUrl = await getDataUrlFromFile(file);
+      img = await loadImage(dataUrl);
+    } catch (e2) {
+      if (process.env.BUILD === 'development') {
+        console.error(e2);
+      }
+      throw e2;
+    }
   }
-  const canvas = drawImageInCanvas(img);
+  const canvas = drawImageInCanvas(img, file.type);
   return [img, canvas];
 }