compressorjs-next 1.1.2 → 2.0.1

package/dist/compressor.esm.js

@@ -1,5 +1,5 @@
 /*!
- * Compressor.js Next v1.1.2
+ * Compressor.js Next v2.0.1
  * https://github.com/j9t/compressorjs-next
  *
  * Copyright 2018–2024 Chen Fengyuan
@@ -14,12 +14,6 @@ var DEFAULTS = {
    * @type {boolean}
    */
   strict: true,
-  /**
-   * Indicates if read the image’s Exif Orientation information,
-   * and then rotate or flip the image automatically.
-   * @type {boolean}
-   */
-  checkOrientation: true,
   /**
    * Indicates if retain the image’s Exif information after compressed.
    * @type {boolean}
@@ -185,40 +179,13 @@ function getStringFromCharCode(dataView, start, length) {
   }
   return str;
 }
-const {
-  btoa
-} = WINDOW;
-
-/**
- * Transform array buffer to Data URL.
- * @param {ArrayBuffer} arrayBuffer - The array buffer to transform.
- * @param {string} mimeType - The mime type of the Data URL.
- * @returns {string} The result Data URL.
- */
-function arrayBufferToDataURL(arrayBuffer, mimeType) {
-  const uint8 = new Uint8Array(arrayBuffer);
-  const {
-    length
-  } = uint8;
-  const chunkSize = 8192;
-  let binary = '';
-  for (let i = 0; i < length; i += chunkSize) {
-    const end = Math.min(i + chunkSize, length);
-    let chunk = '';
-    for (let j = i; j < end; j += 1) {
-      chunk += fromCharCode(uint8[j]);
-    }
-    binary += chunk;
-  }
-  return `data:${mimeType};base64,${btoa(binary)}`;
-}
 
 /**
  * Get orientation value from given array buffer.
  * @param {ArrayBuffer} arrayBuffer - The array buffer to read.
  * @returns {number} The read orientation value.
  */
-function resetAndGetOrientation(arrayBuffer) {
+function resetOrientation(arrayBuffer) {
   const dataView = new DataView(arrayBuffer);
   let orientation;
 
@@ -280,60 +247,6 @@ function resetAndGetOrientation(arrayBuffer) {
   }
   return orientation;
 }
-
-/**
- * Parse Exif Orientation value.
- * @param {number} orientation - The orientation to parse.
- * @returns {Object} The parsed result.
- */
-function parseOrientation(orientation) {
-  let rotate = 0;
-  let scaleX = 1;
-  let scaleY = 1;
-  switch (orientation) {
-    // Flip horizontal
-    case 2:
-      scaleX = -1;
-      break;
-
-    // Rotate left 180°
-    case 3:
-      rotate = -180;
-      break;
-
-    // Flip vertical
-    case 4:
-      scaleY = -1;
-      break;
-
-    // Flip vertical and rotate right 90°
-    case 5:
-      rotate = 90;
-      scaleY = -1;
-      break;
-
-    // Rotate right 90°
-    case 6:
-      rotate = 90;
-      break;
-
-    // Flip horizontal and rotate right 90°
-    case 7:
-      rotate = 90;
-      scaleX = -1;
-      break;
-
-    // Rotate left 90°
-    case 8:
-      rotate = -90;
-      break;
-  }
-  return {
-    rotate,
-    scaleX,
-    scaleY
-  };
-}
 let cachedCanvasReliable;
 
 /**
@@ -607,7 +520,6 @@ class Compressor {
       return;
     }
     if (!ArrayBuffer) {
-      options.checkOrientation = false;
       options.retainExif = false;
     }
     if (!isCanvasReliable()) {
@@ -623,17 +535,18 @@ class Compressor {
           target
         }) => {
           if (this.aborted) return;
-          let result;
+          let blob;
           try {
-            const stripped = stripExif(target.result);
-            result = uint8ArrayToBlob(stripped, mimeType);
+            blob = uint8ArrayToBlob(stripExif(target.result), mimeType);
           } catch {
             this.fail(new Error('Failed to process the image data.'));
             return;
           }
           const date = new Date();
-          result.name = file.name;
-          result.lastModified = date.getTime();
+          const result = new File([blob], file.name || '', {
+            type: mimeType,
+            lastModified: date.getTime()
+          });
           this.result = result;
           if (options.success) {
             options.success.call(this, result);
@@ -663,9 +576,8 @@ class Compressor {
       return;
     }
     const isJPEGImage = mimeType === 'image/jpeg';
-    const checkOrientation = isJPEGImage && options.checkOrientation;
     const retainExif = isJPEGImage && options.retainExif;
-    if (URL && !checkOrientation && !retainExif) {
+    if (!retainExif) {
       this.url = URL.createObjectURL(file);
       this.load({
         url: this.url
@@ -676,36 +588,16 @@ class Compressor {
       reader.onload = ({
         target
       }) => {
-        const {
-          result
-        } = target;
-        const data = {};
-        let orientation = 1;
-        if (checkOrientation) {
-          // Reset the orientation value to its default value (1)
-          // as some iOS browsers will render image with its orientation
-          orientation = resetAndGetOrientation(result);
-          if (orientation > 1) {
-            Object.assign(data, parseOrientation(orientation));
-          }
-        }
-        if (retainExif) {
-          this.exif = getExif(result);
-        }
-        if (checkOrientation || retainExif) {
-          if (!URL
-
-          // Generate a new URL with the default orientation value (1)
-          || orientation > 1) {
-            data.url = arrayBufferToDataURL(result, mimeType);
-          } else {
-            this.url = URL.createObjectURL(file);
-            data.url = this.url;
-          }
-        } else {
-          data.url = result;
-        }
-        this.load(data);
+        if (this.aborted) return;
+
+        // Normalize EXIF orientation to 1 before extracting, since the browser
+        // handles rotation natively via `image-orientation: from-image`
+        resetOrientation(target.result);
+        this.exif = getExif(target.result);
+        this.url = URL.createObjectURL(file);
+        this.load({
+          url: this.url
+        });
       };
       reader.onabort = () => {
         this.fail(new Error('Aborted to read the image with FileReader.'));
@@ -716,11 +608,7 @@ class Compressor {
       reader.onloadend = () => {
         this.reader = null;
       };
-      if (checkOrientation || retainExif) {
-        reader.readAsArrayBuffer(file);
-      } else {
-        reader.readAsDataURL(file);
-      }
+      reader.readAsArrayBuffer(file);
     }
   }
   load(data) {
@@ -753,10 +641,7 @@ class Compressor {
   }
   draw({
     naturalWidth,
-    naturalHeight,
-    rotate = 0,
-    scaleX = 1,
-    scaleY = 1
+    naturalHeight
   }) {
     const {
       file,
@@ -765,7 +650,6 @@ class Compressor {
     } = this;
     const canvas = document.createElement('canvas');
     const context = canvas.getContext('2d');
-    const is90DegreesRotated = Math.abs(rotate) % 180 === 90;
     const resizable = (options.resize === 'contain' || options.resize === 'cover') && isPositiveNumber(options.width) && isPositiveNumber(options.height);
     let maxWidth = Math.max(options.maxWidth, 0) || Infinity;
     let maxHeight = Math.max(options.maxHeight, 0) || Infinity;
@@ -776,11 +660,6 @@ class Compressor {
       width,
       height
     } = options;
-    if (is90DegreesRotated) {
-      [maxWidth, maxHeight] = [maxHeight, maxWidth];
-      [minWidth, minHeight] = [minHeight, minWidth];
-      [width, height] = [height, width];
-    }
     if (resizable) {
       aspectRatio = width / height;
     }
@@ -821,10 +700,6 @@ class Compressor {
     }
     width = Math.floor(normalizeDecimalNumber(Math.min(Math.max(width, minWidth), maxWidth)));
     height = Math.floor(normalizeDecimalNumber(Math.min(Math.max(height, minHeight), maxHeight)));
-    const destX = -width / 2;
-    const destY = -height / 2;
-    const destWidth = width;
-    const destHeight = height;
     const params = [];
     if (resizable) {
       const {
@@ -842,10 +717,7 @@ class Compressor {
       const srcY = (naturalHeight - srcHeight) / 2;
       params.push(srcX, srcY, srcWidth, srcHeight);
     }
-    params.push(destX, destY, destWidth, destHeight);
-    if (is90DegreesRotated) {
-      [width, height] = [height, width];
-    }
+    params.push(0, 0, width, height);
     canvas.width = width;
     canvas.height = height;
     if (!isImageType(options.mimeType)) {
@@ -872,12 +744,7 @@ class Compressor {
     if (this.aborted) {
       return;
     }
-    context.save();
-    context.translate(width / 2, height / 2);
-    context.rotate(rotate * Math.PI / 180);
-    context.scale(scaleX, scaleY);
     context.drawImage(image, ...params);
-    context.restore();
     if (options.drew) {
       options.drew.call(this, context, canvas);
     }
@@ -893,12 +760,46 @@ class Compressor {
         });
         if (blob && isJPEGImage && options.retainExif && this.exif && this.exif.length > 0) {
           const next = arrayBuffer => {
+            if (this.aborted) return;
             const withExif = insertExif(arrayBuffer, this.exif);
             done(uint8ArrayToBlob(withExif, options.mimeType));
           };
           if (blob.arrayBuffer) {
             blob.arrayBuffer().then(next).catch(() => {
-              this.fail(new Error('Failed to read the compressed image with Blob.arrayBuffer().'));
+              if (this.aborted) return;
+              this.fail(new Error('Failed to read the compressed image with `Blob.arrayBuffer()`.'));
+            });
+          } else {
+            const reader = new FileReader();
+            this.reader = reader;
+            reader.onload = ({
+              target
+            }) => {
+              next(target.result);
+            };
+            reader.onabort = () => {
+              this.fail(new Error('Aborted to read the compressed image with FileReader.'));
+            };
+            reader.onerror = () => {
+              this.fail(new Error('Failed to read the compressed image with FileReader.'));
+            };
+            reader.onloadend = () => {
+              this.reader = null;
+            };
+            reader.readAsArrayBuffer(blob);
+          }
+        } else if (blob && isJPEGImage && !options.retainExif) {
+          // Strip any EXIF that may be present in the canvas output
+          // (most browsers strip it automatically, but WebKit preserves the
+          // source EXIF—this ensures consistent, privacy-safe output)
+          const next = arrayBuffer => {
+            if (this.aborted) return;
+            done(uint8ArrayToBlob(stripExif(arrayBuffer), options.mimeType));
+          };
+          if (blob.arrayBuffer) {
+            blob.arrayBuffer().then(next).catch(() => {
+              if (this.aborted) return;
+              this.fail(new Error('Failed to read the compressed image with `Blob.arrayBuffer()`.'));
             });
           } else {
             const reader = new FileReader();
@@ -936,25 +837,89 @@ class Compressor {
       options
     } = this;
     this.revokeUrl();
+    let strictFallback = false;
     if (result) {
       // Returns original file if the result is greater than it and without size-related options
       if (options.strict && !options.retainExif && result.size > file.size && options.mimeType === file.type && !(options.width > naturalWidth || options.height > naturalHeight || options.minWidth > naturalWidth || options.minHeight > naturalHeight || options.maxWidth < naturalWidth || options.maxHeight < naturalHeight)) {
         result = file;
+        strictFallback = true;
       } else {
         const date = new Date();
-        result.lastModified = date.getTime();
-        result.name = file.name;
+        let name = file.name || '';
 
         // Convert the extension to match its type
-        if (result.name && result.type !== file.type) {
-          result.name = result.name.replace(REGEXP_EXTENSION, imageTypeToExtension(result.type));
+        if (name && result.type !== file.type) {
+          name = name.replace(REGEXP_EXTENSION, imageTypeToExtension(result.type));
         }
+        result = new File([result], name, {
+          type: result.type,
+          lastModified: date.getTime()
+        });
       }
     } else {
       // Returns original file if the result is null in some cases
       console.warn('Compressor.js Next: Canvas produced no output—returning the original image');
       result = file;
     }
+
+    // When strict returns the original file, it may still contain EXIF—strip it
+    // asynchronously so the output is consistently EXIF-free across all browsers
+    if (strictFallback && file.type === 'image/jpeg') {
+      if (file.arrayBuffer) {
+        file.arrayBuffer().then(arrayBuffer => {
+          if (this.aborted) return;
+          const strippedBlob = uint8ArrayToBlob(stripExif(arrayBuffer), file.type);
+          const stripped = new File([strippedBlob], file.name || '', {
+            type: file.type,
+            lastModified: file.lastModified || Date.now()
+          });
+          this.result = stripped;
+          if (options.success) {
+            options.success.call(this, stripped);
+          }
+        }).catch(err => {
+          if (this.aborted) return;
+          console.warn(`Compressor.js Next: Failed to strip EXIF from original file—returning original with EXIF intact${file.name ? ` [${file.name}]` : ''}${err?.message ? `: ${err.message}` : ''}`);
+          this.result = file;
+          if (options.success) {
+            options.success.call(this, file);
+          }
+        });
+      } else {
+        const reader = new FileReader();
+        this.reader = reader;
+        reader.onload = ({
+          target
+        }) => {
+          if (this.aborted) return;
+          const strippedBlob = uint8ArrayToBlob(stripExif(target.result), file.type);
+          const stripped = new File([strippedBlob], file.name || '', {
+            type: file.type,
+            lastModified: file.lastModified || Date.now()
+          });
+          this.result = stripped;
+          if (options.success) {
+            options.success.call(this, stripped);
+          }
+        };
+        reader.onabort = () => {
+          this.fail(new Error('Aborted to read the original file with FileReader.'));
+        };
+        reader.onerror = () => {
+          if (this.aborted) return;
+          console.warn(`Compressor.js Next: Failed to strip EXIF from original file—returning original with EXIF intact${file.name ? ` [${file.name}]` : ''}`);
+          this.result = file;
+          if (options.success) {
+            options.success.call(this, file);
+          }
+        };
+        reader.onloadend = () => {
+          this.reader = null;
+        };
+        reader.readAsArrayBuffer(file);
+      }
+      return;
+    }
     this.result = result;
     if (options.success) {
       options.success.call(this, result);