compressorjs-next 1.1.2 → 2.0.1

package/src/index.js

@@ -9,9 +9,7 @@ import {
   isImageType,
   isPositiveNumber,
   normalizeDecimalNumber,
-  parseOrientation,
-  resetAndGetOrientation,
-  arrayBufferToDataURL,
+  resetOrientation,
   getExif,
   insertExif,
   stripExif,
@@ -69,7 +67,6 @@ export default class Compressor {
     }
 
     if (!ArrayBuffer) {
-      options.checkOrientation = false;
       options.retainExif = false;
     }
 
@@ -86,21 +83,20 @@ export default class Compressor {
         reader.onload = ({ 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;
 
@@ -136,10 +132,9 @@ export default class Compressor {
     }
 
     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,
@@ -149,41 +144,16 @@ export default class Compressor {
 
       this.reader = reader;
       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.'));
@@ -194,12 +164,7 @@ export default class Compressor {
       reader.onloadend = () => {
         this.reader = null;
       };
-
-      if (checkOrientation || retainExif) {
-        reader.readAsArrayBuffer(file);
-      } else {
-        reader.readAsDataURL(file);
-      }
+      reader.readAsArrayBuffer(file);
     }
   }
 
@@ -231,17 +196,10 @@ export default class Compressor {
     image.src = data.url;
   }
 
-  draw({
-    naturalWidth,
-    naturalHeight,
-    rotate = 0,
-    scaleX = 1,
-    scaleY = 1,
-  }) {
+  draw({ naturalWidth, naturalHeight }) {
     const { file, image, options } = 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;
@@ -250,12 +208,6 @@ export default class Compressor {
     let aspectRatio = naturalWidth / naturalHeight;
     let { width, height } = options;
 
-    if (is90DegreesRotated) {
-      [maxWidth, maxHeight] = [maxHeight, maxWidth];
-      [minWidth, minHeight] = [minHeight, minWidth];
-      [width, height] = [height, width];
-    }
-
     if (resizable) {
       aspectRatio = width / height;
     }
@@ -288,10 +240,6 @@ export default 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) {
@@ -309,11 +257,7 @@ export default class Compressor {
       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;
@@ -349,12 +293,7 @@ export default class Compressor {
       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);
@@ -374,13 +313,47 @@ export default 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();
@@ -418,6 +391,8 @@ export default class Compressor {
 
     this.revokeUrl();
 
+    let strictFallback = false;
+
     if (result) {
       // Returns original file if the result is greater than it and without size-related options
       if (
@@ -435,19 +410,23 @@ export default class Compressor {
         )
       ) {
         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(
+        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
@@ -455,6 +434,81 @@ export default class Compressor {
       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) {

package/src/utilities.js

@@ -90,7 +90,7 @@ export function arrayBufferToDataURL(arrayBuffer, mimeType) {
  * @param {ArrayBuffer} arrayBuffer - The array buffer to read.
  * @returns {number} The read orientation value.
  */
-export function resetAndGetOrientation(arrayBuffer) {
+export function resetOrientation(arrayBuffer) {
   const dataView = new DataView(arrayBuffer);
   let orientation;
 
@@ -164,63 +164,6 @@ export function resetAndGetOrientation(arrayBuffer) {
   return orientation;
 }
 
-/**
- * Parse Exif Orientation value.
- * @param {number} orientation - The orientation to parse.
- * @returns {Object} The parsed result.
- */
-export 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;
-
-    default:
-  }
-
-  return {
-    rotate,
-    scaleX,
-    scaleY,
-  };
-}
 
 let cachedCanvasReliable;
 

package/types/index.d.ts

@@ -1,7 +1,6 @@
 declare namespace Compressor {
   export interface Options {
     strict?: boolean;
-    checkOrientation?: boolean;
     retainExif?: boolean;
     maxWidth?: number;
     maxHeight?: number;