code refactoring

Author: Donaldcwl

dist/browser-image-compression.js

@@ -1,4 +1,4 @@
-import { canvasToFile, drawFileInCanvas, followExifOrientation, getExifOrientation, handleMaxWidthOrHeight } from './utils'
+import { canvasToFile, drawFileInCanvas, followExifOrientation, getExifOrientation, handleMaxWidthOrHeight, getNewCanvasAndCtx } from './utils'
 
 /**
  * Compress an image file.
@@ -16,55 +16,39 @@ export default async function compress (file, options) {
 
   const maxSizeByte = options.maxSizeMB * 1024 * 1024
 
-  // no need to compress or resize
-  if (file.size <= maxSizeByte && typeof options.maxWidthOrHeight === 'undefined') {
-    return file
-  }
-
-  let img, canvas, isResized
-
   // drawFileInCanvas
-  let temp = await drawFileInCanvas(file)
-  img = temp[0]
-  canvas = temp[1]
+  let [img, canvas] = await drawFileInCanvas(file)
 
   // handleMaxWidthOrHeight
-  let temp2 = handleMaxWidthOrHeight(img, canvas, options)
-  canvas = temp2[0]
-  isResized = temp2[1]
+  canvas = handleMaxWidthOrHeight(canvas, options)
 
   // exifOrientation
   options.exifOrientation = options.exifOrientation || await getExifOrientation(file)
-  canvas = followExifOrientation(img, canvas, options.exifOrientation)
-
-  // no need to compress or resize
-  if (file.size <= maxSizeByte && !isResized) {
-    return file
-  }
+  canvas = followExifOrientation(canvas, options.exifOrientation)
 
   let quality = 1
-  let compressedFile = await canvasToFile(canvas, file.type, file.name, file.lastModified, quality)
-  if (file.type === 'image/png') {
-    while (remainingTrials-- && compressedFile.size > maxSizeByte) {
-      canvas.width *= 0.9
-      canvas.height *= 0.9
 
-      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 <= maxSizeByte) {
+    // no need to compress
+    return tempFile
+  }
 
-      compressedFile = await canvasToFile(canvas, file.type, file.name, file.lastModified, quality)
-    }
-  } else { // if (file.type === 'image/jpeg') {
-    while (remainingTrials-- && compressedFile.size > maxSizeByte) {
-      canvas.width *= 0.9
-      canvas.height *= 0.9
+  let compressedFile = tempFile
+  while (remainingTrials-- && compressedFile.size > maxSizeByte) {
+    const newWidth = canvas.width * 0.9
+    const newHeight = canvas.height * 0.9
+    const [newCanvas, ctx] = getNewCanvasAndCtx(newWidth, newHeight)
 
-      const ctx = canvas.getContext('2d')
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+    ctx.drawImage(img, 0, 0, newWidth, newHeight)
 
+    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)
+
+    canvas = newCanvas
   }
 
   return compressedFile

dist/browser-image-compression.js.map

@@ -52,7 +52,7 @@ async function imageCompression (file, options) {
       // "compressOnWebWorker" is kind of like a recursion to call "imageCompression" again inside web worker
       compressedFile = await compressOnWebWorker(file, options)
     } catch (e) {
-      // console.error('run compression in web worker failed', e)
+      console.warn('Run compression in web worker failed:', e, ', fall back to main thread')
       compressedFile = await compress(file, options)
     }
   } else {

dist/browser-image-compression.mjs

@@ -1,5 +1,5 @@
 // add support for cordova-plugin-file
-const moduleMapper = window.cordova && window.cordova.require('cordova/modulemapper');
+const moduleMapper = typeof window !== 'undefined' && window.cordova && window.cordova.require('cordova/modulemapper');
 export const CustomFile = (moduleMapper && moduleMapper.getOriginalSymbol(window, 'File')) || File;
 export const CustomFileReader = (moduleMapper && moduleMapper.getOriginalSymbol(window, 'FileReader')) || FileReader;
 /**
@@ -77,17 +77,7 @@ export function loadImage (src) {
  * @returns {HTMLCanvasElement}
  */
 export function drawImageInCanvas (img) {
-  let canvas
-  let ctx
-  try {
-    canvas = new OffscreenCanvas(img.width, img.height)
-    ctx = canvas.getContext('2d')
-  } catch (e) {
-    canvas = document.createElement('canvas')
-    ctx = canvas.getContext('2d')
-  }
-  canvas.width = img.width
-  canvas.height = img.height
+  const [canvas, ctx] = getNewCanvasAndCtx(img.width, img.height)
   ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
   return canvas
 }
@@ -121,16 +111,16 @@ export async function drawFileInCanvas (file) {
  * @returns {Promise<File|Blob>}
  */
 export async function canvasToFile (canvas, fileType, fileName, fileLastModified, quality = 1) {
-  let compressedFile
+  let file
   if (typeof OffscreenCanvas === 'function' && canvas instanceof OffscreenCanvas) {
-    compressedFile = await canvas.convertToBlob({ type: fileType, quality })
-    compressedFile.name = fileName
-    compressedFile.lastModified = fileLastModified
+    file = await canvas.convertToBlob({ type: fileType, quality })
+    file.name = fileName
+    file.lastModified = fileLastModified
   } else {
     const dataUrl = canvas.toDataURL(fileType, quality)
-    compressedFile = await getFilefromDataUrl(dataUrl, fileName, fileLastModified)
+    file = await getFilefromDataUrl(dataUrl, fileName, fileLastModified)
   }
-  return compressedFile
+  return file
 }
 
 /**
@@ -184,55 +174,56 @@ export function getExifOrientation (file) {
 
 /**
  *
- * @param img
- * @param canvas
+ * @param {HTMLCanvasElement} canvas
  * @param options
- * @returns {Promise<[HTMLCanvasElement, boolean]>}
+ * @returns {HTMLCanvasElement>}
  */
-export function handleMaxWidthOrHeight (img, canvas, options) {
-  const ctx = canvas.getContext('2d')
-
+export function handleMaxWidthOrHeight (canvas, options) {
+  const width = canvas.width
+  const height = canvas.height
   const maxWidthOrHeight = options.maxWidthOrHeight
-  const needToHandle = Number.isInteger(maxWidthOrHeight) && (img.width > maxWidthOrHeight || img.height > maxWidthOrHeight)
+
+  const needToHandle = Number.isInteger(maxWidthOrHeight) && (width > maxWidthOrHeight || height > maxWidthOrHeight)
+
+  let newCanvas = canvas
+  let ctx
+
   if (needToHandle) {
-    if (img.width > img.height) {
-      canvas.width = maxWidthOrHeight
-      canvas.height = (img.height / img.width) * maxWidthOrHeight
+    [newCanvas, ctx] = getNewCanvasAndCtx(width, height)
+    if (width > height) {
+      newCanvas.width = maxWidthOrHeight
+      newCanvas.height = (height / width) * maxWidthOrHeight
     } else {
-      canvas.width = (img.width / img.height) * maxWidthOrHeight
-      canvas.height = maxWidthOrHeight
+      newCanvas.width = (width / height) * maxWidthOrHeight
+      newCanvas.height = maxWidthOrHeight
     }
-  } else {
-    canvas.width = img.width
-    canvas.height = img.height
+    ctx.drawImage(canvas, 0, 0, newCanvas.width, newCanvas.height)
   }
 
-  ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
-  return [canvas, needToHandle]
+  return newCanvas
 }
 
 /**
  * followExifOrientation
  * source: https://stackoverflow.com/a/40867559/10395024
  *
- * @param {HTMLImageElement} img
  * @param {HTMLCanvasElement} canvas
  * @param {number} exifOrientation
  * @returns {HTMLCanvasElement} canvas
  */
-export function followExifOrientation (img, canvas, exifOrientation) {
-  const ctx = canvas.getContext('2d')
-
+export function followExifOrientation (canvas, exifOrientation) {
   const width = canvas.width
   const height = canvas.height
 
+  const [newCanvas, ctx] = getNewCanvasAndCtx(width, height)
+
   // set proper canvas dimensions before transform & export
   if (4 < exifOrientation && exifOrientation < 9) {
-    canvas.width = height
-    canvas.height = width
+    newCanvas.width = height
+    newCanvas.height = width
   } else {
-    canvas.width = width
-    canvas.height = height
+    newCanvas.width = width
+    newCanvas.height = height
   }
 
   // transform context before drawing image
@@ -247,7 +238,28 @@ export function followExifOrientation (img, canvas, exifOrientation) {
     default: break;
   }
 
-  ctx.drawImage(img, 0, 0, width, height)
+  ctx.drawImage(canvas, 0, 0, width, height)
 
-  return canvas
+  return newCanvas
+}
+
+/**
+ * get new Canvas and it's context
+ * @param width
+ * @param height
+ * @returns {[HTMLCanvasElement, CanvasRenderingContext2D]}
+ */
+export function getNewCanvasAndCtx (width, height) {
+  let canvas
+  let ctx
+  try {
+    canvas = new OffscreenCanvas(width, height)
+    ctx = canvas.getContext('2d')
+  } catch (e) {
+    canvas = document.createElement('canvas')
+    ctx = canvas.getContext('2d')
+  }
+  canvas.width = width
+  canvas.height = height
+  return [canvas, ctx]
 }

dist/browser-image-compression.mjs.map

@@ -1,5 +1,6 @@
 import imageCompression from './index'
-import compress from './image-compression'
+// import compress from './image-compression'
+// import { getNewCanvasAndCtx } from './utils'
 
 let cnt = 0
 let imageCompressionLibUrl
@@ -9,11 +10,15 @@ function createWorker (f) {
 }
 
 const worker = createWorker(() => {
+  let scriptImported = false
   self.addEventListener('message', async (e) => {
     const { file, id, imageCompressionLibUrl, options } = e.data
     try {
-      // console.log('[worker] importScripts', imageCompressionLibUrl)
-      importScripts(imageCompressionLibUrl)
+      if (!scriptImported) {
+        // console.log('[worker] importScripts', imageCompressionLibUrl)
+        importScripts(imageCompressionLibUrl)
+        scriptImported = true
+      }
       // console.log('[worker] self', self)
       const compressedFile = await imageCompression(file, options)
       self.postMessage({ file: compressedFile, id })
@@ -24,40 +29,48 @@ const worker = createWorker(() => {
   })
 })
 
-function createSourceObject (str) {
-  return URL.createObjectURL(new Blob([str], { type: 'application/javascript' }))
-}
+// function createSourceObject (str) {
+//   return URL.createObjectURL(new Blob([str], { type: 'application/javascript' }))
+// }
 
 export function compressOnWebWorker (file, options) {
   return new Promise(async (resolve, reject) => {
     if (!imageCompressionLibUrl) {
-      imageCompressionLibUrl = createSourceObject(`
-    function imageCompression (){return (${imageCompression}).apply(null, arguments)}
-    
-    imageCompression.getDataUrlFromFile = ${imageCompression.getDataUrlFromFile}
-    imageCompression.getFilefromDataUrl = ${imageCompression.getFilefromDataUrl}
-    imageCompression.loadImage = ${imageCompression.loadImage}
-    imageCompression.drawImageInCanvas = ${imageCompression.drawImageInCanvas}
-    imageCompression.drawFileInCanvas = ${imageCompression.drawFileInCanvas}
-    imageCompression.canvasToFile = ${imageCompression.canvasToFile}
-    imageCompression.getExifOrientation = ${imageCompression.getExifOrientation}
-    imageCompression.handleMaxWidthOrHeight = ${imageCompression.handleMaxWidthOrHeight}
-    imageCompression.followExifOrientation = ${imageCompression.followExifOrientation}
-    
-    getDataUrlFromFile = imageCompression.getDataUrlFromFile
-    getFilefromDataUrl = imageCompression.getFilefromDataUrl
-    loadImage = imageCompression.loadImage
-    drawImageInCanvas = imageCompression.drawImageInCanvas
-    drawFileInCanvas = imageCompression.drawFileInCanvas
-    canvasToFile = imageCompression.canvasToFile
-    getExifOrientation = imageCompression.getExifOrientation
-    handleMaxWidthOrHeight = imageCompression.handleMaxWidthOrHeight
-    followExifOrientation = imageCompression.followExifOrientation
-
-    function compress (){return (${compress}).apply(null, arguments)}
-    `)
-      // imageCompressionLibUrl = new URL('../dist/browser-image-compression.js', window.location.href).href
+      if (typeof document !== 'undefined' && 'currentScript' in document) {
+        imageCompressionLibUrl =  document.currentScript.src
+      } else {
+        return reject(new Error('Cannot obtain library url to be loaded in web worker'))
+      }
     }
+    // if (!imageCompressionLibUrl) {
+    //   imageCompressionLibUrl = createSourceObject(`
+    // function imageCompression (){return (${imageCompression}).apply(null, arguments)}
+    //
+    // imageCompression.getDataUrlFromFile = ${imageCompression.getDataUrlFromFile}
+    // imageCompression.getFilefromDataUrl = ${imageCompression.getFilefromDataUrl}
+    // imageCompression.loadImage = ${imageCompression.loadImage}
+    // imageCompression.drawImageInCanvas = ${imageCompression.drawImageInCanvas}
+    // imageCompression.drawFileInCanvas = ${imageCompression.drawFileInCanvas}
+    // imageCompression.canvasToFile = ${imageCompression.canvasToFile}
+    // imageCompression.getExifOrientation = ${imageCompression.getExifOrientation}
+    // imageCompression.handleMaxWidthOrHeight = ${imageCompression.handleMaxWidthOrHeight}
+    // imageCompression.followExifOrientation = ${imageCompression.followExifOrientation}
+    //
+    // getDataUrlFromFile = imageCompression.getDataUrlFromFile
+    // getFilefromDataUrl = imageCompression.getFilefromDataUrl
+    // loadImage = imageCompression.loadImage
+    // drawImageInCanvas = imageCompression.drawImageInCanvas
+    // drawFileInCanvas = imageCompression.drawFileInCanvas
+    // canvasToFile = imageCompression.canvasToFile
+    // getExifOrientation = imageCompression.getExifOrientation
+    // handleMaxWidthOrHeight = imageCompression.handleMaxWidthOrHeight
+    // followExifOrientation = imageCompression.followExifOrientation
+    //
+    // getNewCanvasAndCtx = ${getNewCanvasAndCtx}
+    //
+    // function compress (){return (${compress}).apply(null, arguments)}
+    // `)
+    // }
     let id = cnt++
 
     function handler (e) {