compressorjs 1.2.1 → 1.4.0

package/src/defaults.js

@@ -1,20 +1,20 @@
 export default {
   /**
-   * Indicates if output the original image instead of the compressed one
+   * Indicates whether to output the original image instead of the compressed one
    * when the size of the compressed image is greater than the original one's
    * @type {boolean}
    */
   strict: true,
 
   /**
-   * Indicates if read the image's Exif Orientation information,
+   * Indicates whether to 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.
+   * Indicates whether to retain the image's Exif information after compression.
    * @type {boolean}
   */
   retainExif: false,
@@ -83,7 +83,7 @@ export default {
   /**
    * Files whose file type is included in this list,
    * and whose file size exceeds the `convertSize` value will be converted to JPEGs.
-   * @type {string｜Array}
+   * @type {string|string[]}
    */
   convertTypes: ['image/png'],
 
@@ -95,9 +95,9 @@ export default {
   convertSize: 5000000,
 
   /**
-   * The hook function to execute before draw the image into the canvas for compression.
+   * The hook function to execute before drawing the image into the canvas for compression.
    * @type {Function}
-   * @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
+   * @param {CanvasRenderingContext2D} context - The 2D rendering context of the canvas.
    * @param {HTMLCanvasElement} canvas - The canvas for compression.
    * @example
    * function (context, canvas) {
@@ -107,9 +107,9 @@ export default {
   beforeDraw: null,
 
   /**
-   * The hook function to execute after drew the image into the canvas for compression.
+   * The hook function to execute after drawing the image into the canvas for compression.
    * @type {Function}
-   * @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
+   * @param {CanvasRenderingContext2D} context - The 2D rendering context of the canvas.
    * @param {HTMLCanvasElement} canvas - The canvas for compression.
    * @example
    * function (context, canvas) {
@@ -119,7 +119,7 @@ export default {
   drew: null,
 
   /**
-   * The hook function to execute when success to compress the image.
+   * The hook function to execute when the image is compressed successfully.
    * @type {Function}
    * @param {File} file - The compressed image File object.
    * @example

package/src/index.js

@@ -7,14 +7,15 @@ import {
 import {
   arrayBufferToDataURL,
   getAdjustedSizes,
+  getExif,
   imageTypeToExtension,
+  insertExif,
+  isCanvasAvailable,
   isImageType,
   isPositiveNumber,
   normalizeDecimalNumber,
   parseOrientation,
   resetAndGetOrientation,
-  getExif,
-  insertExif,
 } from './utilities';
 
 const { ArrayBuffer, FileReader } = WINDOW;
@@ -28,11 +29,11 @@ const AnotherCompressor = WINDOW.Compressor;
  */
 export default class Compressor {
   /**
-   * The constructor of Compressor.
-   * @param {File|Blob} file - The target image file for compressing.
-   * @param {Object} [options] - The options for compressing.
+   * Create a new Compressor.
+   * @param {File|Blob} file - The target image file to compress.
+   * @param {Object} [options={}] - The configuration options.
    */
-  constructor(file, options) {
+  constructor(file, options = {}) {
     this.file = file;
     this.exif = [];
     this.image = new Image();
@@ -140,11 +141,19 @@ export default class Compressor {
     const { file, image } = this;
 
     image.onload = () => {
-      this.draw({
-        ...data,
-        naturalWidth: image.naturalWidth,
-        naturalHeight: image.naturalHeight,
-      });
+      if (isCanvasAvailable()) {
+        this.draw({
+          ...data,
+          naturalWidth: image.naturalWidth,
+          naturalHeight: image.naturalHeight,
+        });
+      } else {
+        this.done({
+          naturalWidth: image.naturalWidth,
+          naturalHeight: image.naturalHeight,
+          result: null,
+        });
+      }
     };
     image.onabort = () => {
       this.fail(new Error('Aborted to load the image.'));
@@ -378,19 +387,31 @@ export default class Compressor {
       ) {
         result = file;
       } else {
-        const date = new Date();
-
-        result.lastModified = date.getTime();
-        result.lastModifiedDate = date;
-        result.name = file.name;
+        let fileName = file.name;
 
         // Convert the extension to match its type
-        if (result.name && result.type !== file.type) {
-          result.name = result.name.replace(
+        if (fileName && result.type !== file.type) {
+          fileName = fileName.replace(
             REGEXP_EXTENSION,
             imageTypeToExtension(result.type),
           );
         }
+
+        try {
+          // Convert the resulting Blob object into a File object for modern browsers.
+          result = new File([result], fileName, {
+            type: result.type,
+          });
+        } catch (error) {
+          // Fallback to Blob if the File constructor is not supported.
+          const date = new Date();
+
+          result.name = fileName;
+
+          // The last modified date is not accurate, but it's better than nothing.
+          result.lastModified = date.getTime();
+          result.lastModifiedDate = date;
+        }
       }
     } else {
       // Returns original file if the result is null in some cases.
@@ -430,12 +451,13 @@ export default class Compressor {
   }
 
   /**
-   * Get the no conflict compressor class.
-   * @returns {Compressor} The compressor class.
+   * Creates a new Compressor instance.
+   * @param {File|Blob} file - The target image file to compress.
+   * @param {Object} [options={}] - The configuration options.
+   * @returns {Compressor} A new Compressor instance.
    */
-  static noConflict() {
-    window.Compressor = AnotherCompressor;
-    return Compressor;
+  static create(file, options) {
+    return new Compressor(file, options);
   }
 
   /**
@@ -445,4 +467,13 @@ export default class Compressor {
   static setDefaults(options) {
     Object.assign(DEFAULTS, options);
   }
+
+  /**
+   * Get the no conflict compressor class.
+   * @returns {Compressor} The compressor class.
+   */
+  static noConflict() {
+    window.Compressor = AnotherCompressor;
+    return Compressor;
+  }
 }

package/src/utilities.js

@@ -1,6 +1,4 @@
-import {
-  WINDOW,
-} from './constants';
+import { WINDOW } from './constants';
 
 /**
  * Check if the given value is a positive number.
@@ -23,9 +21,9 @@ export function toArray(value) {
 const REGEXP_IMAGE_TYPE = /^image\/.+$/;
 
 /**
- * Check if the given value is a mime type of image.
+ * Check if the given value is an image MIME type.
  * @param {*} value - The value to check.
- * @returns {boolean} Returns `true` if the given is a mime type of image, else `false`.
+ * @returns {boolean} Returns `true` if the given value is an image MIME type, else `false`.
  */
 export function isImageType(value) {
   return REGEXP_IMAGE_TYPE.test(value);
@@ -34,7 +32,7 @@ export function isImageType(value) {
 /**
  * Convert image type to extension.
  * @param {string} value - The image type to convert.
- * @returns {boolean} Returns the image extension.
+ * @returns {string} Returns the image extension.
  */
 export function imageTypeToExtension(value) {
   let extension = isImageType(value) ? value.substr(6) : '';
@@ -68,12 +66,58 @@ export function getStringFromCharCode(dataView, start, length) {
   return str;
 }
 
+/**
+ * Check if `canvas.getContext('2d').getImageData` is available,
+ * Firefox randomizes the output of that function in `privacy.resistFingerprinting` mode (#137)
+ * @link https://github.com/nodeca/pica/blob/master/lib/utils.js
+ * @returns {boolean} Returns `true` if it is available, else `false`.
+ */
+export function isCanvasAvailable() {
+  try {
+    const canvas = document.createElement('canvas');
+
+    canvas.width = 2;
+    canvas.height = 1;
+
+    const context = canvas.getContext('2d');
+
+    if (!context) return false;
+
+    // Create 2x1 image data containing RGBA values for two pixels
+    const imageData = context.createImageData(2, 1);
+
+    // First pixel: R=12, G=23, B=34, A=255
+    imageData.data[0] = 12;
+    imageData.data[1] = 23;
+    imageData.data[2] = 34;
+    imageData.data[3] = 255;
+
+    // Second pixel: R=45, G=56, B=67, A=255
+    imageData.data[4] = 45;
+    imageData.data[5] = 56;
+    imageData.data[6] = 67;
+    imageData.data[7] = 255;
+
+    context.putImageData(imageData, 0, 0);
+
+    const readBack = context.getImageData(0, 0, 2, 1);
+
+    // Expected pixel data (matching the written values)
+    const expected = [12, 23, 34, 255, 45, 56, 67, 255];
+
+    // Compare element by element to ensure write and read consistency
+    return readBack.data.every((value, index) => value === expected[index]);
+  } catch (error) {
+    return false;
+  }
+}
+
 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.
+ * @param {string} mimeType - The MIME type of the Data URL.
  * @returns {string} The result Data URL.
  */
 export function arrayBufferToDataURL(arrayBuffer, mimeType) {

package/types/index.d.ts

@@ -1,5 +1,7 @@
 declare namespace Compressor {
-  export interface Options {
+  type ResizeMode = 'contain' | 'cover' | 'none';
+
+  interface Options {
     strict?: boolean;
     checkOrientation?: boolean;
     retainExif?: boolean;
@@ -9,22 +11,23 @@ declare namespace Compressor {
     minHeight?: number;
     width?: number;
     height?: number;
-    resize?: 'contain' | 'cover' | 'none';
+    resize?: ResizeMode;
     quality?: number;
     mimeType?: string;
     convertTypes?: string | string[];
     convertSize?: number;
-    beforeDraw?(context: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void;
-    drew?(context: CanvasRenderingContext2D, canvas: HTMLCanvasElement): void;
-    success?(file: File | Blob): void;
-    error?(error: Error): void;
+    beforeDraw?: ((this: Compressor, context: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => void) | null;
+    drew?: ((this: Compressor, context: CanvasRenderingContext2D, canvas: HTMLCanvasElement) => void) | null;
+    success?: ((this: Compressor, file: File) => void) | null;
+    error?: ((this: Compressor, error: Error) => void) | null;
   }
 }
 
 declare class Compressor {
   constructor(file: File | Blob, options?: Compressor.Options);
   abort(): void;
-  static noConflict(): Compressor;
+  static create(file: File | Blob, options?: Compressor.Options): Compressor;
+  static noConflict(): typeof Compressor;
   static setDefaults(options: Compressor.Options): void;
 }