@bensitu/image-editor 1.1.2 → 1.2.1

package/src/image-editor.js

@@ -1,7 +1,7 @@
 /**
  * @file image-editor.js
  * @module image-editor
- * @version 1.1.2
+ * @version 1.2.1
  * @author Ben Situ
  * @license MIT
  * @description Lightweight canvas-based image editor with masking/transform/export support.
@@ -12,19 +12,30 @@
  * See the license files for details.
  */
 
-(function (root, factory) {
-    if (typeof define === 'function' && define.amd) {
-        // AMD / RequireJS
-        define([], factory)
-    } else if (typeof module === 'object' && module.exports) {
-        // CommonJS / Node / webpack (target=commonjs)
-        module.exports = factory()
-    } else {
-        // Browser normal <script> method, hanging to the global
-        root.ImageEditor = factory()
-    }
-})(typeof self !== 'undefined' ? self : this, function () {
-    'use strict'
+let fabric = null;
+
+function getGlobalScope() {
+    if (typeof globalThis !== 'undefined') return globalThis;
+    if (typeof self !== 'undefined') return self;
+    if (typeof window !== 'undefined') return window;
+    return null;
+}
+
+function getGlobalFabric() {
+    const scope = getGlobalScope();
+    return scope && scope.fabric ? scope.fabric : null;
+}
+
+export function setFabric(fabricInstance) {
+    fabric = fabricInstance || getGlobalFabric();
+    return fabric;
+}
+
+function ensureFabric() {
+    if (!fabric) setFabric();
+    return fabric;
+}
+
     /**
      * ImageEditor
      * 
@@ -45,7 +56,7 @@
      * @param {Object} [options={}] - Customization options to override defaults.
      * @param {number} [options.canvasWidth=800] - The initial canvas width in pixels.
      * @param {number} [options.canvasHeight=600] - The initial canvas height in pixels.
-     * @param {string} [options.backgroundColor='#ffffff'] - The canvas background color.
+     * @param {string} [options.backgroundColor='transparent'] - The canvas background color.
      * @param {number} [options.animationDuration=300] - Duration in ms for scale/rotate animations.
      * @param {number} [options.minScale=0.1] - Minimum image scaling factor.
      * @param {number} [options.maxScale=5.0] - Maximum image scaling factor.
@@ -53,6 +64,7 @@
      * @param {number} [options.rotationStep=90] - Rotation step in degrees.
      * @param {boolean} [options.expandCanvasToImage=true] - If true, expands the canvas to fit image/mask.
      * @param {boolean} [options.fitImageToCanvas=false] - If true, fits loaded image inside canvas.
+     * @param {boolean} [options.coverImageToCanvas=false] - If true, scales image to cover canvas (at least one side fits, allowing overflow).
      * @param {boolean} [options.downsampleOnLoad=true] - Whether to downsample very large images on load.
      * @param {number} [options.downsampleMaxWidth=4000] - Max width for downsampling.
      * @param {number} [options.downsampleMaxHeight=3000] - Max height for downsampling.
@@ -69,21 +81,43 @@
      * @param {string|null} [options.initialImageBase64=null] - Base64 string to auto-load as initial image, if any.
      * @param {string} [options.defaultDownloadFileName='edited_image.jpg'] - Default file name for downloads.
      * @param {function} [options.onImageLoaded] - Optional callback to invoke after an image loads.
+     * @param {function} [options.onError] - Optional callback for recoverable internal errors.
+     * @param {function} [options.onWarning] - Optional callback for recoverable internal warnings.
      * 
      * @constructor
      */
     class ImageEditor {
         constructor(options = {}) {
-            // Verify that fabric.js is present
-            this._fabricLoaded = typeof fabric !== 'undefined';
-            if (!this._fabricLoaded) {
-                console.error('fabric.js is not loaded. Please include fabric.js first. Initialization will be aborted.');
-            }
             // Default options (can be overridden via ctor param)
+            const defaultLabel = {
+                getText: (mask) => mask.maskName,
+                textOptions: {
+                    fontSize: 12,
+                    fill: '#fff',
+                    backgroundColor: 'rgba(0,0,0,0.7)',
+                    padding: 2,
+                    fontFamily: 'monospace',
+                    fontWeight: 'bold',
+                    selectable: false,
+                    evented: false,
+                    originX: 'left',
+                    originY: 'top'
+                }
+            };
+            const defaultCrop = {
+                minWidth: 100,
+                minHeight: 100,
+                padding: 10,
+                hideMasksDuringCrop: true,
+                preserveMasksAfterCrop: false,
+                allowRotationOfCropRect: false
+            };
+            const userLabel = options.label || {};
+            const userCrop = options.crop || {};
             this.options = {
                 canvasWidth: 800,
                 canvasHeight: 600,
-                backgroundColor: '#ffffff',
+                backgroundColor: 'transparent',
 
                 animationDuration: 300,
                 minScale: 0.1,
@@ -93,6 +127,7 @@
 
                 expandCanvasToImage: true,
                 fitImageToCanvas: false,
+                coverImageToCanvas: false,
 
                 downsampleOnLoad: true,
                 downsampleMaxWidth: 4000,
@@ -115,32 +150,29 @@
                 initialImageBase64: null, // Provide a base64 'data:image/...' string here if you want auto-load
 
                 defaultDownloadFileName: 'edited_image.jpg',
-
-                ...options
-            };
-            this.options.label = {
-                getText: (mask, maskIndex) => mask.maskName,
-                textOptions: {
-                    fontSize: 12,
-                    fill: '#fff',
-                    backgroundColor: 'rgba(0,0,0,0.7)',
-                    padding: 2,
-                    fontFamily: "monospace",
-                    fontWeight: "bold",
-                    selectable: false,
-                    evented: false,
-                    originX: 'left',
-                    originY: 'top',
+                onError: null,
+                onWarning: null,
+
+                ...options,
+                label: {
+                    ...defaultLabel,
+                    ...userLabel,
+                    textOptions: {
+                        ...defaultLabel.textOptions,
+                        ...(userLabel.textOptions || {})
+                    }
+                },
+                crop: {
+                    ...defaultCrop,
+                    ...userCrop
                 }
             };
-            this.options.crop = {
-                minWidth: 100,
-                minHeight: 100,
-                padding: 10,
-                hideMasksDuringCrop: true,
-                preserveMasksAfterCrop: true,
-                allowRotationOfCropRect: false
-            };
+
+            // Verify that fabric.js is present
+            this._fabricLoaded = !!ensureFabric();
+            if (!this._fabricLoaded) {
+                this._reportError('fabric.js is not loaded. Please include fabric.js first. Initialization will be aborted.');
+            }
 
             // Runtime state
             this.canvas = null;
@@ -160,6 +192,7 @@
 
             this._boundHandlers = {};
 
+            this._lastMask = null;
             this._lastMaskInitialLeft = null;
             this._lastMaskInitialTop = null;
             this._lastMaskInitialWidth = null;
@@ -239,6 +272,28 @@
             }
         }
 
+        _reportError(message, error = null) {
+            const handler = this.options && this.options.onError;
+            if (typeof handler !== 'function') return;
+
+            try {
+                handler(error, message);
+            } catch {
+                // Ignore observer failures so editor recovery paths remain stable.
+            }
+        }
+
+        _reportWarning(message, error = null) {
+            const handler = this.options && this.options.onWarning;
+            if (typeof handler !== 'function') return;
+
+            try {
+                handler(error, message);
+            } catch {
+                // Ignore observer failures so editor recovery paths remain stable.
+            }
+        }
+
         /**
          * Canvas setup helpers
          * @private
@@ -336,7 +391,7 @@
 
             // Crop bindings (optional: bound only if element IDs exist in elements)
             this._bindIfExists('cropBtn', 'click', () => this.enterCropMode());
-            this._bindIfExists('applyCropBtn', 'click', () => { this.applyCrop().catch(e => console.error('applyCrop failed', e)); });
+            this._bindIfExists('applyCropBtn', 'click', () => { this.applyCrop().catch(e => this._reportError('applyCrop failed', e)); });
             this._bindIfExists('cancelCropBtn', 'click', () => this.cancelCrop());
         }
 
@@ -368,7 +423,7 @@
             if (!file || !file.type.startsWith('image/')) return;
             const reader = new FileReader();
             reader.onload = (e) => this.loadImage(e.target.result);
-            reader.onerror = (e) => { console.error(`[ImageEditor: fileReadError]`, e); }
+            reader.onerror = (e) => { this._reportError('Image file could not be read', e); };
             reader.readAsDataURL(file);
         }
 
@@ -379,6 +434,7 @@
         */
         async loadImage(base64) {
             if (!this._fabricLoaded) return;
+            if (!this.canvas) return;
             if (!base64 || typeof base64 !== 'string' || !base64.startsWith('data:image/')) return;
 
             this._setPlaceholderVisible(false);
@@ -402,71 +458,91 @@
             }
 
             // Create fabric.Image from URL
-            fabric.Image.fromURL(loadSrc, (fimg) => {
-                this.canvas.discardActiveObject();
-                this._hideAllMaskLabels();
-                this.canvas.clear();
-                this.canvas.setBackgroundColor(this.options.backgroundColor, this.canvas.renderAll.bind(this.canvas));
-
-                fimg.set({ originX: 'left', originY: 'top', selectable: false, evented: false });
-
-                const imgW = fimg.width;
-                const imgH = fimg.height;
-
-                const minW = this.containerEl ? Math.floor(this.containerEl.clientWidth || this.options.canvasWidth) : this.options.canvasWidth;
-                const minH = this.containerEl ? Math.floor(this.containerEl.clientHeight || this.options.canvasHeight) : this.options.canvasHeight;
-
-                if (this.options.fitImageToCanvas) {
-                    // Fit into current canvas (shrink only)
-                    const cw = Math.max(this.options.canvasWidth, minW);
-                    const ch = Math.max(this.options.canvasHeight, minH);
-                    this._setCanvasSizeInt(cw, ch);
-                    const fitScale = Math.min(cw / imgW, ch / imgH, 1);
-                    fimg.set({ left: 0, top: 0 });
-                    fimg.scale(fitScale);
-                    this.baseImageScale = fimg.scaleX || 1;
-                } else if (this.options.expandCanvasToImage) {
-                    // Expand canvas so that it fully contains the image
-                    const cw = Math.max(minW, Math.floor(imgW));
-                    const ch = Math.max(minH, Math.floor(imgH));
-                    this._setCanvasSizeInt(cw, ch);
-                    fimg.set({ left: 0, top: 0 });
-                    fimg.scale(1);
-                    this.baseImageScale = 1;
-                } else {
-                    // Keep existing canvas size and center the image
-                    const cw = Math.max(this.options.canvasWidth, minW);
-                    const ch = Math.max(this.options.canvasHeight, minH);
-                    this._setCanvasSizeInt(cw, ch);
-                    const fitScale = Math.min(cw / imgW, ch / imgH, 1);
-                    fimg.set({ left: (cw - imgW * fitScale) / 2, top: (ch - imgH * fitScale) / 2 });
-                    fimg.scale(fitScale);
-                    this.baseImageScale = fimg.scaleX || 1;
-                }
-                // Put the image onto the canvas
-                this.originalImage = fimg;
-                this.canvas.add(fimg);
-                this.canvas.sendToBack(fimg);
-
-                // Reset mask placement memory
-                this._lastMaskInitialLeft = null;
-                this._lastMaskInitialTop = null;
-                this._lastMaskInitialWidth = null;
-
-                this.maskCounter = 0;
-                this.currentScale = 1;
-                this.currentRotation = 0;
-
-                this._updateInputs();
-                this._updateMaskList();
-                this._updateUI();
-                this.canvas.renderAll();
-                this.isImageLoadedToCanvas = true;
+            return new Promise((resolve, reject) => {
+                fabric.Image.fromURL(loadSrc, (fimg) => {
+                    try {
+                        if (!fimg) throw new Error('Image could not be loaded');
+
+                        this.canvas.discardActiveObject();
+                        this._hideAllMaskLabels();
+                        this.canvas.clear();
+                        this.canvas.setBackgroundColor(this.options.backgroundColor, this.canvas.renderAll.bind(this.canvas));
+
+                        fimg.set({ originX: 'left', originY: 'top', selectable: false, evented: false });
+
+                        const imgW = fimg.width;
+                        const imgH = fimg.height;
+
+                        const minW = this.containerEl ? Math.floor(this.containerEl.clientWidth || this.options.canvasWidth) : this.options.canvasWidth;
+                        const minH = this.containerEl ? Math.floor(this.containerEl.clientHeight || this.options.canvasHeight) : this.options.canvasHeight;
+
+                        if (this.options.fitImageToCanvas) {
+                            // Fit into current canvas (shrink only) and ensure canvas does not exceed container
+                            const cw = Math.max(1, Math.min(this.options.canvasWidth, minW) - 1)
+                            const ch = Math.max(1, Math.min(this.options.canvasHeight, minH) - 1);
+                            this._setCanvasSizeInt(cw, ch);
+                            const fitScale = Math.min(cw / imgW, ch / imgH, 1);
+                            fimg.set({ left: 0, top: 0 });
+                            fimg.scale(fitScale);
+                            this.baseImageScale = fimg.scaleX || 1;
+                        } else if (this.options.coverImageToCanvas) {
+                            // Cover canvas: scale to cover, allowing overflow (at least one side fits)
+                            const cw = Math.max(this.options.canvasWidth, minW);
+                            const ch = Math.max(this.options.canvasHeight, minH);
+                            this._setCanvasSizeInt(cw, ch);
+                            const coverScale = Math.min(1, Math.max(cw / imgW, ch / imgH));
+                            fimg.set({ left: 0, top: 0 });
+                            fimg.scale(coverScale);
+                            this.baseImageScale = fimg.scaleX || 1;
+                        } else if (this.options.expandCanvasToImage) {
+                            // Expand canvas so that it fully contains the image
+                            const cw = Math.max(minW, Math.floor(imgW));
+                            const ch = Math.max(minH, Math.floor(imgH));
+                            this._setCanvasSizeInt(cw, ch);
+                            fimg.set({ left: 0, top: 0 });
+                            fimg.scale(1);
+                            this.baseImageScale = 1;
+                        } else {
+                            // Keep existing canvas size and center the image
+                            const cw = Math.max(this.options.canvasWidth, minW);
+                            const ch = Math.max(this.options.canvasHeight, minH);
+                            this._setCanvasSizeInt(cw, ch);
+                            const fitScale = Math.min(cw / imgW, ch / imgH, 1);
+                            fimg.set({ left: 0, top: 0 });
+                            fimg.scale(fitScale);
+                            this.baseImageScale = fimg.scaleX || 1;
+                        }
+                        // Put the image onto the canvas
+                        this.originalImage = fimg;
+                        this.canvas.add(fimg);
+                        this.canvas.sendToBack(fimg);
+
+                        // Reset mask placement memory
+                        this._lastMask = null;
+                        this._lastMaskInitialLeft = null;
+                        this._lastMaskInitialTop = null;
+                        this._lastMaskInitialWidth = null;
+
+                        this.maskCounter = 0;
+                        this.currentScale = 1;
+                        this.currentRotation = 0;
+
+                        this._updateInputs();
+                        this._updateMaskList();
+                        this.isImageLoadedToCanvas = true;
+                        this._updateUI();
+                        this.canvas.renderAll();
+
+                        if (typeof this.onImageLoaded === 'function') {
+                            this.onImageLoaded();
+                        }
 
-                if (typeof this.onImageLoaded === 'function') {
-                    this.onImageLoaded();
-                }
-            }, { crossOrigin: 'anonymous' });
+                        resolve();
+                    } catch (err) {
+                        reject(err);
+                    }
+                }, { crossOrigin: 'anonymous' });
+            });
         }
 
         /**
@@ -474,9 +550,11 @@
          * @returns {boolean} true if loaded, false if not
          */
         isImageLoaded() {
+            const fabricInstance = ensureFabric();
             return !!(
                 this.originalImage &&
-                this.originalImage instanceof fabric.Image &&
+                fabricInstance &&
+                this.originalImage instanceof fabricInstance.Image &&
                 this.originalImage.width > 0 &&
                 this.originalImage.height > 0
             );
@@ -766,7 +844,7 @@
                     this.saveState();
                 })
                 .catch(err => {
-                    console.error('reset() failed', err);
+                    this._reportError('reset() failed', err);
                 });
         }
 
@@ -783,24 +861,38 @@
                     : jsonString;
 
                 this.canvas.loadFromJSON(json, () => {
-                    this._hideAllMaskLabels();
-                    const objs = this.canvas.getObjects();
-                    this.originalImage = objs.find(o => o.type === 'image' && !o.maskId) || null;
-
-                    this.originalImage.set({ originX: 'left', originY: 'top', selectable: false, evented: false, hasControls: false, hoverCursor: 'default' });
-                    this.canvas.sendToBack(this.originalImage);
+                    try {
+                        this._hideAllMaskLabels();
+                        const objs = this.canvas.getObjects();
+                        this.originalImage = objs.find(o => o.type === 'image' && !o.maskId) || null;
 
-                    const masks = objs.filter(o => o.maskId);
-                    this.maskCounter = masks.reduce((max, m) =>
-                        Math.max(max, m.maskId), 0);
+                        if (this.originalImage) {
+                            this.originalImage.set({ originX: 'left', originY: 'top', selectable: false, evented: false, hasControls: false, hoverCursor: 'default' });
+                            this.canvas.sendToBack(this.originalImage);
+                        }
 
-                    this.canvas.renderAll();
-                    this._updateMaskList();
-                    this._updateUI();
+                        const masks = objs.filter(o => o.maskId);
+                        this.maskCounter = masks.reduce((max, m) =>
+                            Math.max(max, m.maskId), 0);
+                        this._lastMask = masks.length ? masks[masks.length - 1] : null;
+                        if (!this._lastMask) {
+                            this._lastMaskInitialLeft = null;
+                            this._lastMaskInitialTop = null;
+                            this._lastMaskInitialWidth = null;
+                        }
+                        this.isImageLoadedToCanvas = !!this.originalImage;
+
+                        this.canvas.renderAll();
+                        this._updateMaskList();
+                        this._updatePlaceholderStatus();
+                        this._updateUI();
+                    } catch (callbackError) {
+                        this._reportError('loadFromState() failed', callbackError);
+                    }
                 });
 
             } catch (e) {
-                console.error('loadFromState() failed', e);
+                this._reportError('loadFromState() failed', e);
             }
         }
 
@@ -842,7 +934,7 @@
                 }
                 this._updateUI();
             } catch (err) {
-                console.warn('saveState: failed to save canvas snapshot', err);
+                this._reportWarning('saveState: failed to save canvas snapshot', err);
             }
         }
 
@@ -968,7 +1060,7 @@
                             ...cfg.styles
                         });
                         break;
-                    case 'polygon':
+                    case 'polygon': {
                         let polyPoints = cfg.points || [];
                         if (Array.isArray(polyPoints) && polyPoints.length && typeof polyPoints[0] === 'object') {
                             // Ensure numeric {x,y} objects for fabric.Polygon
@@ -982,6 +1074,7 @@
                             ...cfg.styles
                         });
                         break;
+                    }
                     case 'rect':
                     default:
                         mask = new fabric.Rect({
@@ -1055,6 +1148,15 @@
             if (!active || !active.maskId) return;
             this._removeLabelForMask(active);
             this.canvas.remove(active);
+            if (this._lastMask === active) {
+                const masks = this.canvas.getObjects().filter(o => o.maskId);
+                this._lastMask = masks.length ? masks[masks.length - 1] : null;
+                if (!this._lastMask) {
+                    this._lastMaskInitialLeft = null;
+                    this._lastMaskInitialTop = null;
+                    this._lastMaskInitialWidth = null;
+                }
+            }
             this.canvas.discardActiveObject();
             this._updateMaskList();
             this._updateUI();
@@ -1071,6 +1173,7 @@
             masks.forEach(m => this._removeLabelForMask(m));
             masks.forEach(m => this.canvas.remove(m));
             this.canvas.discardActiveObject();
+            this._lastMask = null;
             this._lastMaskInitialLeft = null;
             this._lastMaskInitialTop = null;
             this._lastMaskInitialWidth = null;
@@ -1094,8 +1197,8 @@
                     if (objs.includes(mask.__label)) {
                         this.canvas.remove(mask.__label);
                     }
-                } catch (e) { /* ignore */ }
-                try { delete mask.__label; } catch (e) { }
+                } catch (e) { void e; }
+                try { delete mask.__label; } catch (e) { void e; }
             }
         }
 
@@ -1158,9 +1261,9 @@
             labels.forEach(l => {
                 try {
                     if (objs.includes(l)) this.canvas.remove(l);
-                } catch (e) { }
+                } catch (e) { void e; }
             });
-            objs.forEach(o => { if (o.maskId && o.__label) { try { delete o.__label; } catch (e) { } } });
+            objs.forEach(o => { if (o.maskId && o.__label) { try { delete o.__label; } catch (e) { void e; } } });
         }
 
         /**
@@ -1230,7 +1333,7 @@
             masks.forEach(m => {
                 if (m !== selectedMask) {
                     if (m.__label) {
-                        try { this.canvas.remove(m.__label); } catch (e) { }
+                        try { this.canvas.remove(m.__label); } catch (e) { void e; }
                         delete m.__label;
                     }
                     m.set({ stroke: '#ccc', strokeWidth: 1 });
@@ -1301,7 +1404,7 @@
                 await this.loadImage(merged);
                 this.saveState();
             } catch (err) {
-                console.error('merge error', err);
+                this._reportError('merge error', err);
                 if (this.canvasEl) this.canvasEl.style.visibility = '';
             }
         }
@@ -1323,7 +1426,7 @@
                     link.click();
                     document.body.removeChild(link);
                 })
-                .catch(err => console.error('download error', err));
+                .catch(err => this._reportError('download error', err));
         }
 
         /**
@@ -1368,74 +1471,77 @@
                 lockRotation: m.lockRotation
             }));
 
-            // Remove labels, deselect
-            masks.forEach(m => this._removeLabelForMask(m));
-            this.canvas.discardActiveObject();
-            this.canvas.renderAll();
-
-            // Set masks to opaque black no border
-            masks.forEach(m => {
-                m.set({ opacity: 1, fill: '#000000', strokeWidth: 0, stroke: null, selectable: false });
-                m.setCoords();
-            });
-            this.canvas.renderAll();
-
-            // Compute integer bounding box for image
-            this.originalImage.setCoords();
-            const imgBr = this.originalImage.getBoundingRect(true, true);
-            const sx = Math.max(0, Math.round(imgBr.left));
-            const sy = Math.max(0, Math.round(imgBr.top));
-            const sw = Math.max(1, Math.round(imgBr.width));
-            const sh = Math.max(1, Math.round(imgBr.height));
-
-            // Crop precisely in offscreen canvas
-            const finalBase64 = await new Promise((resolve, reject) => {
-                try {
-                    const fullDataUrl = this.canvas.toDataURL({
-                        format: 'jpeg',
-                        quality: this.options.downsampleQuality,
-                        multiplier: multiplier
-                    });
+            let finalBase64;
+            try {
+                // Remove labels, deselect
+                masks.forEach(m => this._removeLabelForMask(m));
+                this.canvas.discardActiveObject();
+                this.canvas.renderAll();
 
-                    const img = new Image();
-                    img.onload = () => {
-                        try {
-                            const sxM = Math.round(sx * multiplier);
-                            const syM = Math.round(sy * multiplier);
-                            const swM = Math.round(sw * multiplier);
-                            const shM = Math.round(sh * multiplier);
+                // Set masks to opaque black no border
+                masks.forEach(m => {
+                    m.set({ opacity: 1, fill: '#000000', strokeWidth: 0, stroke: null, selectable: false });
+                    m.setCoords();
+                });
+                this.canvas.renderAll();
 
-                            const oc = document.createElement('canvas');
-                            oc.width = swM;
-                            oc.height = shM;
-                            const ctx = oc.getContext('2d');
+                // Compute integer bounding box for image
+                this.originalImage.setCoords();
+                const imgBr = this.originalImage.getBoundingRect(true, true);
+                const sx = Math.max(0, Math.round(imgBr.left));
+                const sy = Math.max(0, Math.round(imgBr.top));
+                const sw = Math.max(1, Math.round(imgBr.width));
+                const sh = Math.max(1, Math.round(imgBr.height));
+
+                // Crop precisely in offscreen canvas
+                finalBase64 = await new Promise((resolve, reject) => {
+                    try {
+                        const fullDataUrl = this.canvas.toDataURL({
+                            format: 'jpeg',
+                            quality: this.options.downsampleQuality,
+                            multiplier: multiplier
+                        });
 
-                            ctx.drawImage(img, sxM, syM, swM, shM, 0, 0, swM, shM);
-                            const out = oc.toDataURL('image/jpeg', this.options.downsampleQuality);
-                            resolve(out);
-                        } catch (e) { reject(e); }
-                    };
-                    img.onerror = reject;
-                    img.src = fullDataUrl;
-                } catch (e) { reject(e); }
-            });
+                        const img = new Image();
+                        img.onload = () => {
+                            try {
+                                const sxM = Math.round(sx * multiplier);
+                                const syM = Math.round(sy * multiplier);
+                                const swM = Math.round(sw * multiplier);
+                                const shM = Math.round(sh * multiplier);
+
+                                const oc = document.createElement('canvas');
+                                oc.width = swM;
+                                oc.height = shM;
+                                const ctx = oc.getContext('2d');
+
+                                ctx.drawImage(img, sxM, syM, swM, shM, 0, 0, swM, shM);
+                                const out = oc.toDataURL('image/jpeg', this.options.downsampleQuality);
+                                resolve(out);
+                            } catch (e) { reject(e); }
+                        };
+                        img.onerror = reject;
+                        img.src = fullDataUrl;
+                    } catch (e) { reject(e); }
+                });
+            } finally {
+                masksBackup.forEach(b => {
+                    try {
+                        b.obj.set({
+                            opacity: b.opacity,
+                            fill: b.fill,
+                            strokeWidth: b.strokeWidth,
+                            stroke: b.stroke,
+                            selectable: b.selectable,
+                            lockRotation: b.lockRotation
+                        });
+                        b.obj.setCoords();
+                    } catch (e) { void e; }
+                });
 
-            // Restore masks
-            masksBackup.forEach(b => {
-                try {
-                    b.obj.set({
-                        opacity: b.opacity,
-                        fill: b.fill,
-                        strokeWidth: b.strokeWidth,
-                        stroke: b.stroke,
-                        selectable: b.selectable,
-                        lockRotation: b.lockRotation
-                    });
-                    b.obj.setCoords();
-                } catch (e) { }
-            });
+                this.canvas.renderAll();
+            }
 
-            this.canvas.renderAll();
             return finalBase64;
         }
 
@@ -1584,12 +1690,12 @@
             this.canvas.getObjects().forEach(o => {
                 if (o !== cropRect) {
                     this._cropPrevEvented.push({ obj: o, evented: o.evented, selectable: o.selectable });
-                    try { o.evented = false; o.selectable = false; } catch (e) { /* ignore */ }
+                    try { o.evented = false; o.selectable = false; } catch (e) { void e; }
                 }
             });
 
             // When the crop rect changes, re-render
-            const onModified = () => { try { cropRect.setCoords(); this.canvas.requestRenderAll(); } catch (e) { } };
+            const onModified = () => { try { cropRect.setCoords(); this.canvas.requestRenderAll(); } catch (e) { void e; } };
             cropRect.on('modified', onModified);
             cropRect.on('moving', onModified);
             cropRect.on('scaling', onModified);
@@ -1615,15 +1721,15 @@
                             h.handlers.forEach(rec => h.target.off(rec.evt, rec.fn));
                         });
                     }
-                } catch (e) { /* ignore */ }
+                } catch (e) { void e; }
 
-                try { this.canvas.remove(this._cropRect); } catch (e) { }
+                try { this.canvas.remove(this._cropRect); } catch (e) { void e; }
                 this._cropRect = null;
             }
             // restore evented/selectable flags
             if (Array.isArray(this._cropPrevEvented)) {
                 this._cropPrevEvented.forEach(i => {
-                    try { i.obj.evented = i.evented; i.obj.selectable = i.selectable; } catch (e) { }
+                    try { i.obj.evented = i.evented; i.obj.selectable = i.selectable; } catch (e) { void e; }
                 });
             }
             this._cropPrevEvented = null;
@@ -1665,7 +1771,7 @@
                 }
                 beforeJson = JSON.stringify(jsonObj);
             } catch (e) {
-                console.warn('applyCrop: could not serialize before state', e);
+                this._reportWarning('applyCrop: could not serialize before state', e);
                 beforeJson = null;
             }
 
@@ -1679,14 +1785,18 @@
                             this._removeLabelForMask(m);
                             this.canvas.remove(m);
                         } catch (err) {
-                            console.warn('applyCrop: failed to remove mask', err);
+                            this._reportWarning('applyCrop: failed to remove mask', err);
                         }
                     });
+                    this._lastMask = null;
+                    this._lastMaskInitialLeft = null;
+                    this._lastMaskInitialTop = null;
+                    this._lastMaskInitialWidth = null;
                     this.canvas.discardActiveObject();
                     this.canvas.renderAll();
                 }
             } catch (e) {
-                console.warn('applyCrop: error while removing masks', e);
+                this._reportWarning('applyCrop: error while removing masks', e);
             }
 
             try {
@@ -1697,11 +1807,11 @@
                                 h.handlers.forEach(rec => h.target.off(rec.evt, rec.fn));
                             });
                         }
-                    } catch (e) { /* ignore */ }
-                    try { this.canvas.remove(this._cropRect); } catch (e) { /* ignore */ }
+                    } catch (e) { void e; }
+                    try { this.canvas.remove(this._cropRect); } catch (e) { void e; }
                     this._cropRect = null;
                 }
-            } catch (e) { /* ignore */ }
+            } catch (e) { void e; }
 
             // End crop mode
             this._cropMode = false;
@@ -1736,7 +1846,7 @@
                     img.src = fullDataUrl;
                 });
             } catch (e) {
-                console.error('applyCrop: failed to create cropped image', e);
+                this._reportError('applyCrop: failed to create cropped image', e);
                 this._updateUI();
                 return;
             }
@@ -1745,7 +1855,7 @@
             try {
                 await this.loadImage(croppedBase64);
             } catch (e) {
-                console.error('applyCrop: loadImage(croppedBase64) failed', e);
+                this._reportError('applyCrop: loadImage(croppedBase64) failed', e);
                 this._updateUI();
                 return;
             }
@@ -1759,7 +1869,7 @@
                 }
                 afterJson = JSON.stringify(jsonObj2);
             } catch (e) {
-                console.warn('applyCrop: failed to serialize after state', e);
+                this._reportWarning('applyCrop: failed to serialize after state', e);
                 afterJson = null;
             }
 
@@ -1784,7 +1894,7 @@
                     this.historyManager.currentIndex++;
                 }
             } catch (e) {
-                console.warn('applyCrop: failed to push history command', e);
+                this._reportWarning('applyCrop: failed to push history command', e);
             }
 
             // Final UI update
@@ -1904,18 +2014,18 @@
                     const el = document.getElementById(this.elements[key]);
                     if (!el) continue;
                     handlers.forEach(h => {
-                        try { el.removeEventListener(h.event, h.handler); } catch (e) { }
+                        try { el.removeEventListener(h.event, h.handler); } catch (e) { void e; }
                     });
                 }
-            } catch (e) { }
+            } catch (e) { void e; }
 
             if (this._cropRect) {
-                try { this.canvas.remove(this._cropRect); } catch (e) { }
+                try { this.canvas.remove(this._cropRect); } catch (e) { void e; }
                 this._cropRect = null;
             }
 
             if (this.canvas) {
-                try { this.canvas.dispose(); } catch (e) { }
+                try { this.canvas.dispose(); } catch (e) { void e; }
                 this.canvas = null;
                 this.canvasEl = null;
                 this.isImageLoadedToCanvas = false;
@@ -2097,5 +2207,5 @@
         }
     }
 
-    return ImageEditor
-})
+export { ImageEditor };
+export default ImageEditor;