compressorjs-next 1.1.1 → 2.0.0

package/README.md

@@ -22,11 +22,12 @@ A JavaScript image compressor and converter. Uses the browser’s native [HTMLCa
 
 Change the package name from `compressorjs` to `compressorjs-next` in your `package.json` and imports (`import Compressor from 'compressorjs-next'`).
 
-The API is otherwise the same, with these exceptions (as of 1.1.0—follow [the changelog](https://github.com/j9t/compressorjs-next/blob/main/CHANGELOG.md) from there):
+The API is otherwise the same, with these exceptions (as of 2.0.0—follow [the changelog](https://github.com/j9t/compressorjs-next/blob/main/CHANGELOG.md) from there):
 
 * ESM is now the default module format (CommonJS is still supported)
-* The `noConflict()` method has been removed
+* The `checkOrientation` option has been removed, as all supported browsers now handle EXIF orientation natively
 * The default for `convertTypes` has changed from `['image/png']` to `[]`
+* The `noConflict()` method has been removed
 * Internet Explorer is no longer supported
 
 ## Main files
@@ -85,7 +86,7 @@ document.getElementById('file').addEventListener('change', (e) => {
     return;
   }
 
-  new Compressor(file, {
+  const compressor = new Compressor(file, {
     quality: 0.6,
 
     // The compression process is asynchronous,
@@ -130,19 +131,6 @@ Indicates whether to output the original image instead of the compressed one whe
 * The `maxWidth` option is set and its value is less than the natural width of the image.
 * The `maxHeight` option is set and its value is less than the natural height of the image.
 
-### `checkOrientation`
-
-* Type: `boolean`
-* Default: `true`
-
-Indicates whether to read the image’s Exif Orientation value (JPEG image only), and then rotate or flip the image automatically with the value.
-
-**Notes:**
-
-* Don’t trust this all the time as some JPEG images have incorrect (not standard) `Orientation` values.
-* If the size of the target image is too large (e.g., greater than 10 MB), you should disable this option to avoid an out-of-memory crash.
-* The image’s Exif information will be removed after compressed, so if you need the Exif information, you may need to upload the original image as well.
-
 ### `retainExif`
 
 * Type: `boolean`

package/dist/compressor.common.js

@@ -1,5 +1,5 @@
 /*!
- * Compressor.js Next v1.1.1
+ * Compressor.js Next v2.0.0
  * https://github.com/j9t/compressorjs-next
  *
  * Copyright 2018–2024 Chen Fengyuan
@@ -16,12 +16,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}
@@ -187,40 +181,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;
 
@@ -282,60 +249,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;
 
 /**
@@ -609,7 +522,6 @@ class Compressor {
       return;
     }
     if (!ArrayBuffer) {
-      options.checkOrientation = false;
       options.retainExif = false;
     }
     if (!isCanvasReliable()) {
@@ -665,9 +577,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
@@ -678,36 +589,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.'));
@@ -718,11 +609,7 @@ class Compressor {
       reader.onloadend = () => {
         this.reader = null;
       };
-      if (checkOrientation || retainExif) {
-        reader.readAsArrayBuffer(file);
-      } else {
-        reader.readAsDataURL(file);
-      }
+      reader.readAsArrayBuffer(file);
     }
   }
   load(data) {
@@ -755,10 +642,7 @@ class Compressor {
   }
   draw({
     naturalWidth,
-    naturalHeight,
-    rotate = 0,
-    scaleX = 1,
-    scaleY = 1
+    naturalHeight
   }) {
     const {
       file,
@@ -767,7 +651,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;
@@ -778,11 +661,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;
     }
@@ -823,10 +701,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 {
@@ -844,10 +718,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)) {
@@ -874,12 +745,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);
     }
@@ -895,12 +761,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();
@@ -938,10 +838,12 @@ 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();
@@ -957,6 +859,61 @@ class Compressor {
       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 stripped = uint8ArrayToBlob(stripExif(arrayBuffer), file.type);
+          stripped.name = file.name;
+          stripped.lastModified = file.lastModified;
+          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 stripped = uint8ArrayToBlob(stripExif(target.result), file.type);
+          stripped.name = file.name;
+          stripped.lastModified = file.lastModified;
+          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);