compressorjs-next 1.0.0

package/dist/compressor.min.js

@@ -0,0 +1,10 @@
+/*!
+ * Compressor.js v1.0.0
+ * https://github.com/j9t/compressorjs-next
+ *
+ * Copyright 2018–2024 Chen Fengyuan
+ * Copyright 2026 Jens Oliver Meiert
+ *
+ * Released under the MIT license.
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Compressor=t()}(this,function(){"use strict";var e={strict:!0,checkOrientation:!0,retainExif:!1,maxWidth:1/0,maxHeight:1/0,minWidth:0,minHeight:0,width:void 0,height:void 0,resize:"none",quality:.8,mimeType:"auto",convertTypes:["image/png"],convertSize:5e6,beforeDraw:null,drew:null,success:null,error:null};const t="undefined"!=typeof window&&void 0!==window.document?window:{},i=e=>e>0&&e<1/0,r=/^image\/.+$/;function n(e){return r.test(e)}const{fromCharCode:a}=String;const{btoa:o}=t;function s(e){const t=new DataView(e);let i;try{let e,r,n;if(255===t.getUint8(0)&&216===t.getUint8(1)){const e=t.byteLength;let i=2;for(;i+1<e;){if(255===t.getUint8(i)&&225===t.getUint8(i+1)){r=i;break}i+=1}}if(r){const i=r+10;if("Exif"===function(e,t,i){let r,n="";for(i+=t,r=t;r<i;r+=1)n+=a(e.getUint8(r));return n}(t,r+4,4)){const r=t.getUint16(i);if(e=18761===r,(e||19789===r)&&42===t.getUint16(i+2,e)){const r=t.getUint32(i+4,e);r>=8&&(n=i+r)}}}if(n){const r=t.getUint16(n,e);let a,o;for(o=0;o<r;o+=1)if(a=n+12*o+2,274===t.getUint16(a,e)){a+=8,i=t.getUint16(a,e),t.setUint16(a,1,e);break}}}catch{i=1}return i}const h=/\.\d*(?:0|9){12}\d*$/;function l(e,t=1e11){return h.test(e)?Math.round(e*t)/t:e}function c({aspectRatio:e,height:t,width:r},n="none"){const a=i(r),o=i(t);if(a&&o){const i=t*e;("contain"===n||"none"===n)&&i>r||"cover"===n&&i<r?t=r/e:r=t*e}else a?t=r/e:o&&(r=t*e);return{width:r,height:t}}const{ArrayBuffer:d,FileReader:f}=t,u=t.URL||t.webkitURL,g=/\.\w+$/;return class{constructor(t,i){this.file=t,this.exif=[],this.image=new Image,this.options={...e,...i},this.aborted=!1,this.result=null,this.url=null,this.init()}init(){const{file:e,options:t}=this;if(!(e instanceof Blob))return void this.fail(new Error("The first argument must be a File or Blob object."));const i=e.type;if(!n(i))return void this.fail(new Error("The first argument must be an image File or Blob object."));if(!u||!f)return void this.fail(new Error("The current browser does not support image compression."));d||(t.checkOrientation=!1,t.retainExif=!1);const r="image/jpeg"===i,h=r&&t.checkOrientation,l=r&&t.retainExif;if(!u||h||l){const t=new f;this.reader=t,t.onload=({target:t})=>{const{result:r}=t,n={};let c=1;h&&(c=s(r),c>1&&Object.assign(n,function(e){let t=0,i=1,r=1;switch(e){case 2:i=-1;break;case 3:t=-180;break;case 4:r=-1;break;case 5:t=90,r=-1;break;case 6:t=90;break;case 7:t=90,i=-1;break;case 8:t=-90}return{rotate:t,scaleX:i,scaleY:r}}(c))),l&&(this.exif=function(e){const t=new DataView(e),{byteLength:i}=t,r=[];let n=0;for(;n+3<i;){const e=t.getUint8(n),a=t.getUint8(n+1);if(255===e&&218===a)break;if(255===e&&216===a)n+=2;else{const o=n+t.getUint16(n+2)+2;if(255===e&&225===a)for(let e=n;e<o&&e<i;e+=1)r.push(t.getUint8(e));n=o}}return r}(r)),h||l?!u||c>1?n.url=function(e,t){const i=new Uint8Array(e),{length:r}=i;let n="";for(let e=0;e<r;e+=8192){const t=Math.min(e+8192,r);let o="";for(let r=e;r<t;r+=1)o+=a(i[r]);n+=o}return`data:${t};base64,${o(n)}`}(r,i):(this.url=u.createObjectURL(e),n.url=this.url):n.url=r,this.load(n)},t.onabort=()=>{this.fail(new Error("Aborted to read the image with FileReader."))},t.onerror=()=>{this.fail(new Error("Failed to read the image with FileReader."))},t.onloadend=()=>{this.reader=null},h||l?t.readAsArrayBuffer(e):t.readAsDataURL(e)}else this.url=u.createObjectURL(e),this.load({url:this.url})}load(e){const{file:i,image:r}=this;r.onload=()=>{this.draw({...e,naturalWidth:r.naturalWidth,naturalHeight:r.naturalHeight})},r.onabort=()=>{this.fail(new Error("Aborted to load the image."))},r.onerror=()=>{this.fail(new Error("Failed to load the image."))},t.navigator&&/(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(t.navigator.userAgent)&&(r.crossOrigin="anonymous"),r.alt=i.name,r.src=e.url}draw({naturalWidth:e,naturalHeight:t,rotate:r=0,scaleX:a=1,scaleY:o=1}){const{file:s,image:h,options:d}=this,u=document.createElement("canvas"),g=u.getContext("2d"),m=Math.abs(r)%180==90,w=("contain"===d.resize||"cover"===d.resize)&&i(d.width)&&i(d.height);let p=Math.max(d.maxWidth,0)||1/0,b=Math.max(d.maxHeight,0)||1/0,y=Math.max(d.minWidth,0)||0,U=Math.max(d.minHeight,0)||0,x=e/t,{width:v,height:E}=d;m&&([p,b]=[b,p],[y,U]=[U,y],[v,E]=[E,v]),w&&(x=v/E),({width:p,height:b}=c({aspectRatio:x,width:p,height:b},"contain")),({width:y,height:U}=c({aspectRatio:x,width:y,height:U},"cover")),w?({width:v,height:E}=c({aspectRatio:x,width:v,height:E},d.resize)):({width:v=e,height:E=t}=c({aspectRatio:x,width:v,height:E})),v=Math.floor(l(Math.min(Math.max(v,y),p))),E=Math.floor(l(Math.min(Math.max(E,U),b)));const R=-v/2,T=-E/2,k=v,M=E,A=[];if(w){let i=0,r=0,n=e,a=t;({width:n,height:a}=c({aspectRatio:x,width:e,height:t},{contain:"cover",cover:"contain"}[d.resize])),i=(e-n)/2,r=(t-a)/2,A.push(i,r,n,a)}A.push(R,T,k,M),m&&([v,E]=[E,v]),u.width=v,u.height=E,n(d.mimeType)||(d.mimeType=s.type);let j="transparent";s.size>d.convertSize&&d.convertTypes.indexOf(d.mimeType)>=0&&(d.mimeType="image/jpeg");const B="image/jpeg"===d.mimeType;if(B&&(j="#fff"),g.fillStyle=j,g.fillRect(0,0,v,E),d.beforeDraw&&d.beforeDraw.call(this,g,u),this.aborted)return;if(g.save(),g.translate(v/2,E/2),g.rotate(r*Math.PI/180),g.scale(a,o),g.drawImage(h,...A),g.restore(),d.drew&&d.drew.call(this,g,u),this.aborted)return;u.toBlob(i=>{if(!this.aborted){const r=i=>this.done({naturalWidth:e,naturalHeight:t,result:i});if(i&&B&&d.retainExif&&this.exif&&this.exif.length>0){const e=e=>{const t=function(e,t){const i=new DataView(e),r=new Uint8Array(e);if(255!==i.getUint8(2)||224!==i.getUint8(3))return r;const n=4+i.getUint16(4),a=r.byteLength-n,o=new Uint8Array(2+t.length+a);o[0]=255,o[1]=216;for(let e=0;e<t.length;e+=1)o[2+e]=t[e];return o.set(r.subarray(n),2+t.length),o}(e,this.exif);var i,n;r((i=t,n=d.mimeType,new Blob([i],{type:n})))};if(i.arrayBuffer)i.arrayBuffer().then(e).catch(()=>{this.fail(new Error("Failed to read the compressed image with Blob.arrayBuffer()."))});else{const t=new f;this.reader=t,t.onload=({target:t})=>{e(t.result)},t.onabort=()=>{this.fail(new Error("Aborted to read the compressed image with FileReader."))},t.onerror=()=>{this.fail(new Error("Failed to read the compressed image with FileReader."))},t.onloadend=()=>{this.reader=null},t.readAsArrayBuffer(i)}}else r(i)}},d.mimeType,d.quality)}done({naturalWidth:e,naturalHeight:t,result:i}){const{file:r,options:a}=this;if(this.revokeUrl(),i)if(a.strict&&!a.retainExif&&i.size>r.size&&a.mimeType===r.type&&!(a.width>e||a.height>t||a.minWidth>e||a.minHeight>t||a.maxWidth<e||a.maxHeight<t))i=r;else{const e=new Date;i.lastModified=e.getTime(),i.lastModifiedDate=e,i.name=r.name,i.name&&i.type!==r.type&&(i.name=i.name.replace(g,function(e){let t=n(e)?e.slice(6):"";return"jpeg"===t&&(t="jpg"),`.${t}`}(i.type)))}else i=r;this.result=i,a.success&&a.success.call(this,i)}fail(e){const{options:t}=this;if(this.revokeUrl(),!t.error)throw e;t.error.call(this,e)}revokeUrl(){u&&this.url&&(u.revokeObjectURL(this.url),this.url=null)}abort(){this.aborted||(this.aborted=!0,this.reader?this.reader.abort():this.image.complete?this.fail(new Error("The compression process has been aborted.")):(this.image.onload=null,this.image.onerror=null,this.image.onabort=null,this.fail(new Error("Aborted to load the image."))))}static setDefaults(t){Object.assign(e,t)}}});

package/package.json

@@ -0,0 +1,94 @@
+{
+  "author": {
+    "name": "Jens Oliver Meiert",
+    "url": "https://meiert.com/"
+  },
+  "browser": "dist/compressor.js",
+  "bugs": {
+    "url": "https://github.com/j9t/compressorjs-next/issues"
+  },
+  "contributors": [
+    {
+      "name": "Chen Fengyuan",
+      "url": "https://chenfengyuan.com/"
+    }
+  ],
+  "description": "JavaScript image compressor.",
+  "devDependencies": {
+    "@babel/core": "^7.29.0",
+    "@babel/preset-env": "^7.29.0",
+    "@eslint/js": "^9.39.2",
+    "@rollup/plugin-babel": "^6.1.0",
+    "@rollup/plugin-commonjs": "^29.0.0",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@vitest/browser-playwright": "^4.0.18",
+    "@vitest/coverage-istanbul": "^4.0.18",
+    "del-cli": "^7.0.0",
+    "eslint": "^9.39.2",
+    "husky": "^9.1.7",
+    "playwright": "^1.58.2",
+    "rollup": "^4.57.1",
+    "stylelint": "^17.1.1",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-order": "^7.0.1",
+    "terser": "^5.46.0",
+    "vitest": "^4.0.18"
+  },
+  "exports": {
+    ".": {
+      "import": "./dist/compressor.esm.js",
+      "require": "./dist/compressor.common.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "homepage": "https://github.com/j9t/compressorjs-next",
+  "keywords": [
+    "blob",
+    "browser",
+    "canvas",
+    "client-side",
+    "compress",
+    "compressor",
+    "image",
+    "image-compression",
+    "image-processing",
+    "image-upload",
+    "javascript",
+    "jpeg",
+    "jpg",
+    "lossy-compression",
+    "png",
+    "webp"
+  ],
+  "license": "MIT",
+  "main": "dist/compressor.esm.js",
+  "name": "compressorjs-next",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/j9t/compressorjs-next.git"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "clean": "del-cli dist",
+    "compress": "terser dist/compressor.js -o dist/compressor.min.js -c -m --comments /^!/",
+    "dev": "rollup -c -m -w",
+    "lint": "npm run lint:js && npm run lint:css",
+    "lint:css": "stylelint docs/**/*.css --fix",
+    "lint:js": "eslint src test",
+    "prepare": "husky",
+    "pretest": "playwright install chromium",
+    "release": "npm run clean && npm run lint && npm run build && npm run compress && npm test",
+    "start": "npm run dev",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:watch": "vitest"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "types": "types/index.d.ts",
+  "version": "1.0.0"
+}

package/src/constants.js

@@ -0,0 +1,3 @@
+export const WINDOW = (typeof window !== 'undefined' && typeof window.document !== 'undefined')
+  ? window
+  : {};

package/src/defaults.js

@@ -0,0 +1,142 @@
+export default {
+  /**
+   * Indicates if 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,
+   * and then rotate or flip the image automatically.
+   * @type {boolean}
+   */
+  checkOrientation: true,
+
+  /**
+   * Indicates if retain the image’s Exif information after compressed.
+   * @type {boolean}
+  */
+  retainExif: false,
+
+  /**
+   * The max width of the output image.
+   * @type {number}
+   */
+  maxWidth: Infinity,
+
+  /**
+   * The max height of the output image.
+   * @type {number}
+   */
+  maxHeight: Infinity,
+
+  /**
+   * The min width of the output image.
+   * @type {number}
+   */
+  minWidth: 0,
+
+  /**
+   * The min height of the output image.
+   * @type {number}
+   */
+  minHeight: 0,
+
+  /**
+   * The width of the output image.
+   * If not specified, the natural width of the source image will be used.
+   * @type {number}
+   */
+  width: undefined,
+
+  /**
+   * The height of the output image.
+   * If not specified, the natural height of the source image will be used.
+   * @type {number}
+   */
+  height: undefined,
+
+  /**
+   * Sets how the size of the image should be resized to the container
+   * specified by the `width` and `height` options.
+   * @type {string}
+   */
+  resize: 'none',
+
+  /**
+   * The quality of the output image.
+   * It must be a number between `0` and `1`,
+   * and only available for `image/jpeg` and `image/webp` images.
+   * Check out {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob canvas.toBlob}.
+   * @type {number}
+   */
+  quality: 0.8,
+
+  /**
+   * The mime type of the output image.
+   * By default, the original mime type of the source image file will be used.
+   * @type {string}
+   */
+  mimeType: 'auto',
+
+  /**
+   * 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}
+   */
+  convertTypes: ['image/png'],
+
+  /**
+   * PNG files over this size (5 MB by default) will be converted to JPEGs.
+   * To disable this, just set the value to `Infinity`.
+   * @type {number}
+   */
+  convertSize: 5000000,
+
+  /**
+   * The hook function to execute before draw the image into the canvas for compression.
+   * @type {Function}
+   * @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
+   * @param {HTMLCanvasElement} canvas - The canvas for compression.
+   * @example
+   * function (context, canvas) {
+   *   context.fillStyle = '#fff';
+   * }
+   */
+  beforeDraw: null,
+
+  /**
+   * The hook function to execute after drew the image into the canvas for compression.
+   * @type {Function}
+   * @param {CanvasRenderingContext2D} context - The 2d rendering context of the canvas.
+   * @param {HTMLCanvasElement} canvas - The canvas for compression.
+   * @example
+   * function (context, canvas) {
+   *   context.filter = 'grayscale(100%)';
+   * }
+   */
+  drew: null,
+
+  /**
+   * The hook function to execute when success to compress the image.
+   * @type {Function}
+   * @param {File} file - The compressed image File object.
+   * @example
+   * function (file) {
+   *   console.log(file);
+   * }
+   */
+  success: null,
+
+  /**
+   * The hook function to execute when fail to compress the image.
+   * @type {Function}
+   * @param {Error} err - An Error object.
+   * @example
+   * function (err) {
+   *   console.log(err.message);
+   * }
+   */
+  error: null,
+};

package/src/index.js

@@ -0,0 +1,445 @@
+import DEFAULTS from './defaults';
+import {
+  WINDOW,
+} from './constants';
+import {
+  getAdjustedSizes,
+  imageTypeToExtension,
+  isImageType,
+  isPositiveNumber,
+  normalizeDecimalNumber,
+  parseOrientation,
+  resetAndGetOrientation,
+  arrayBufferToDataURL,
+  getExif,
+  insertExif,
+  uint8ArrayToBlob,
+} from './utilities';
+
+const { ArrayBuffer, FileReader } = WINDOW;
+const URL = WINDOW.URL || WINDOW.webkitURL;
+const REGEXP_EXTENSION = /\.\w+$/;
+
+/**
+ * Creates a new image compressor.
+ * @class
+ */
+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.
+   */
+  constructor(file, options) {
+    this.file = file;
+    this.exif = [];
+    this.image = new Image();
+    this.options = {
+      ...DEFAULTS,
+      ...options,
+    };
+    this.aborted = false;
+    this.result = null;
+    this.url = null;
+    this.init();
+  }
+
+  init() {
+    const { file, options } = this;
+
+    if (!(file instanceof Blob)) {
+      this.fail(new Error('The first argument must be a File or Blob object.'));
+      return;
+    }
+
+    const mimeType = file.type;
+
+    if (!isImageType(mimeType)) {
+      this.fail(new Error('The first argument must be an image File or Blob object.'));
+      return;
+    }
+
+    if (!URL || !FileReader) {
+      this.fail(new Error('The current browser does not support image compression.'));
+      return;
+    }
+
+    if (!ArrayBuffer) {
+      options.checkOrientation = false;
+      options.retainExif = false;
+    }
+
+    const isJPEGImage = mimeType === 'image/jpeg';
+    const checkOrientation = isJPEGImage && options.checkOrientation;
+    const retainExif = isJPEGImage && options.retainExif;
+
+    if (URL && !checkOrientation && !retainExif) {
+      this.url = URL.createObjectURL(file);
+      this.load({
+        url: this.url,
+      });
+    } else {
+      const reader = new FileReader();
+
+      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);
+      };
+      reader.onabort = () => {
+        this.fail(new Error('Aborted to read the image with FileReader.'));
+      };
+      reader.onerror = () => {
+        this.fail(new Error('Failed to read the image with FileReader.'));
+      };
+      reader.onloadend = () => {
+        this.reader = null;
+      };
+
+      if (checkOrientation || retainExif) {
+        reader.readAsArrayBuffer(file);
+      } else {
+        reader.readAsDataURL(file);
+      }
+    }
+  }
+
+  load(data) {
+    const { file, image } = this;
+
+    image.onload = () => {
+      this.draw({
+        ...data,
+        naturalWidth: image.naturalWidth,
+        naturalHeight: image.naturalHeight,
+      });
+    };
+    image.onabort = () => {
+      this.fail(new Error('Aborted to load the image.'));
+    };
+    image.onerror = () => {
+      this.fail(new Error('Failed to load the image.'));
+    };
+
+    // Match all browsers that use WebKit as the layout engine in iOS devices,
+    // such as Safari for iOS, Chrome for iOS, and in-app browsers
+    if (WINDOW.navigator && /(?:iPad|iPhone|iPod).*?AppleWebKit/i.test(WINDOW.navigator.userAgent)) {
+      // Fix the `The operation is insecure` error (#57)
+      image.crossOrigin = 'anonymous';
+    }
+
+    image.alt = file.name;
+    image.src = data.url;
+  }
+
+  draw({
+    naturalWidth,
+    naturalHeight,
+    rotate = 0,
+    scaleX = 1,
+    scaleY = 1,
+  }) {
+    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;
+    let minWidth = Math.max(options.minWidth, 0) || 0;
+    let minHeight = Math.max(options.minHeight, 0) || 0;
+    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;
+    }
+
+    ({ width: maxWidth, height: maxHeight } = getAdjustedSizes({
+      aspectRatio,
+      width: maxWidth,
+      height: maxHeight,
+    }, 'contain'));
+    ({ width: minWidth, height: minHeight } = getAdjustedSizes({
+      aspectRatio,
+      width: minWidth,
+      height: minHeight,
+    }, 'cover'));
+
+    if (resizable) {
+      ({ width, height } = getAdjustedSizes({
+        aspectRatio,
+        width,
+        height,
+      }, options.resize));
+    } else {
+      ({ width = naturalWidth, height = naturalHeight } = getAdjustedSizes({
+        aspectRatio,
+        width,
+        height,
+      }));
+    }
+
+    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) {
+      let srcX = 0;
+      let srcY = 0;
+      let srcWidth = naturalWidth;
+      let srcHeight = naturalHeight;
+
+      ({ width: srcWidth, height: srcHeight } = getAdjustedSizes({
+        aspectRatio,
+        width: naturalWidth,
+        height: naturalHeight,
+      }, {
+        contain: 'cover',
+        cover: 'contain',
+      }[options.resize]));
+      srcX = (naturalWidth - srcWidth) / 2;
+      srcY = (naturalHeight - srcHeight) / 2;
+
+      params.push(srcX, srcY, srcWidth, srcHeight);
+    }
+
+    params.push(destX, destY, destWidth, destHeight);
+
+    if (is90DegreesRotated) {
+      [width, height] = [height, width];
+    }
+
+    canvas.width = width;
+    canvas.height = height;
+
+    if (!isImageType(options.mimeType)) {
+      options.mimeType = file.type;
+    }
+
+    let fillStyle = 'transparent';
+
+    // Converts PNG files over the `convertSize` to JPEGs.
+    if (file.size > options.convertSize && options.convertTypes.indexOf(options.mimeType) >= 0) {
+      options.mimeType = 'image/jpeg';
+    }
+
+    const isJPEGImage = options.mimeType === 'image/jpeg';
+
+    if (isJPEGImage) {
+      fillStyle = '#fff';
+    }
+
+    // Override the default fill color (`#000`, black)
+    context.fillStyle = fillStyle;
+    context.fillRect(0, 0, width, height);
+
+    if (options.beforeDraw) {
+      options.beforeDraw.call(this, context, canvas);
+    }
+
+    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);
+    }
+
+    if (this.aborted) {
+      return;
+    }
+
+    const callback = (blob) => {
+      if (!this.aborted) {
+        const done = (result) => this.done({
+          naturalWidth,
+          naturalHeight,
+          result,
+        });
+
+        if (blob && isJPEGImage && options.retainExif && this.exif && this.exif.length > 0) {
+          const next = (arrayBuffer) => {
+            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().'));
+            });
+          } 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 {
+          done(blob);
+        }
+      }
+    };
+
+    canvas.toBlob(callback, options.mimeType, options.quality);
+  }
+
+  done({
+    naturalWidth,
+    naturalHeight,
+    result,
+  }) {
+    const { file, options } = this;
+
+    this.revokeUrl();
+
+    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;
+      } else {
+        const date = new Date();
+
+        result.lastModified = date.getTime();
+        result.lastModifiedDate = date;
+        result.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),
+          );
+        }
+      }
+    } else {
+      // Returns original file if the result is null in some cases
+      result = file;
+    }
+
+    this.result = result;
+
+    if (options.success) {
+      options.success.call(this, result);
+    }
+  }
+
+  fail(err) {
+    const { options } = this;
+
+    this.revokeUrl();
+
+    if (options.error) {
+      options.error.call(this, err);
+    } else {
+      throw err;
+    }
+  }
+
+  revokeUrl() {
+    if (URL && this.url) {
+      URL.revokeObjectURL(this.url);
+      this.url = null;
+    }
+  }
+
+  abort() {
+    if (!this.aborted) {
+      this.aborted = true;
+
+      if (this.reader) {
+        this.reader.abort();
+      } else if (!this.image.complete) {
+        this.image.onload = null;
+        this.image.onerror = null;
+        this.image.onabort = null;
+        this.fail(new Error('Aborted to load the image.'));
+      } else {
+        this.fail(new Error('The compression process has been aborted.'));
+      }
+    }
+  }
+
+  /**
+   * Change the default options.
+   * @param {Object} options - The new default options.
+   */
+  static setDefaults(options) {
+    Object.assign(DEFAULTS, options);
+  }
+}