ngx-image-cropper 9.1.2 → 9.1.4

package/fesm2022/ngx-image-cropper.mjs

@@ -268,7 +268,7 @@ class CropperState {
             roundCropper: false,
             onlyScaleDown: false,
             imageQuality: 92,
-            backgroundColor: null,
+            backgroundColor: undefined,
             containWithinAspectRatio: false,
             hideResizeSquares: false,
             alignImage: 'center',
@@ -429,6 +429,15 @@ class CropperState {
             y2: this.maxSize().height
         };
     }
+    toCropInput() {
+        return {
+            cropper: this.cropper(),
+            maxSize: this.maxSize(),
+            transform: this.transform,
+            loadedImage: this.loadedImage,
+            options: { ...this.options }
+        };
+    }
 }
 
 var MoveTypes;
@@ -519,8 +528,8 @@ function percentage(percent, totalValue) {
 }
 
 class CropService {
-    crop(cropperState, output) {
-        const imagePosition = this.getImagePosition(cropperState);
+    crop(input, output) {
+        const imagePosition = this.getImagePosition(input);
         const width = imagePosition.x2 - imagePosition.x1;
         const height = imagePosition.y2 - imagePosition.y1;
         const cropCanvas = document.createElement('canvas');
@@ -530,77 +539,76 @@ class CropService {
         if (!ctx) {
             return null;
         }
-        if (cropperState.options.backgroundColor != null) {
-            ctx.fillStyle = cropperState.options.backgroundColor;
+        if (input.options?.backgroundColor != null) {
+            ctx.fillStyle = input.options.backgroundColor;
             ctx.fillRect(0, 0, width, height);
         }
-        const scaleX = (cropperState.transform.scale || 1) * (cropperState.transform.flipH ? -1 : 1);
-        const scaleY = (cropperState.transform.scale || 1) * (cropperState.transform.flipV ? -1 : 1);
-        const { translateH, translateV } = this.getCanvasTranslate(cropperState);
-        const transformedImage = cropperState.loadedImage.transformed;
+        const scaleX = (input.transform?.scale || 1) * (input.transform?.flipH ? -1 : 1);
+        const scaleY = (input.transform?.scale || 1) * (input.transform?.flipV ? -1 : 1);
+        const { translateH, translateV } = this.getCanvasTranslate(input);
+        const transformedImage = input.loadedImage.transformed;
         ctx.setTransform(scaleX, 0, 0, scaleY, transformedImage.size.width / 2 + translateH, transformedImage.size.height / 2 + translateV);
         ctx.translate(-imagePosition.x1 / scaleX, -imagePosition.y1 / scaleY);
-        ctx.rotate((cropperState.transform.rotate || 0) * Math.PI / 180);
+        ctx.rotate((input.transform?.rotate || 0) * Math.PI / 180);
         ctx.drawImage(transformedImage.image, -transformedImage.size.width / 2, -transformedImage.size.height / 2);
         const result = {
             width, height,
             imagePosition,
-            cropperPosition: { ...cropperState.cropper() }
+            cropperPosition: { ...input.cropper }
         };
-        if (cropperState.options.containWithinAspectRatio) {
-            result.offsetImagePosition = this.getOffsetImagePosition(cropperState);
+        if (input.options?.containWithinAspectRatio) {
+            result.offsetImagePosition = this.getOffsetImagePosition(input);
         }
-        const resizeRatio = this.getResizeRatio(width, height, cropperState.options);
+        const resizeRatio = this.getResizeRatio(width, height, input.options);
         if (resizeRatio !== 1) {
             result.width = Math.round(width * resizeRatio);
-            result.height = cropperState.options.maintainAspectRatio
-                ? Math.round(result.width / cropperState.options.aspectRatio)
+            result.height = input.options?.maintainAspectRatio
+                ? Math.round(result.width / (input.options?.aspectRatio ?? 1))
                 : Math.round(height * resizeRatio);
             resizeCanvas(cropCanvas, result.width, result.height);
         }
         if (output === 'blob') {
-            return this.cropToBlob(result, cropCanvas, cropperState);
+            return this.cropToBlob(result, cropCanvas, input);
         }
         else {
-            result.base64 = cropCanvas.toDataURL('image/' + cropperState.options.format, this.getQuality(cropperState.options));
+            result.base64 = cropCanvas.toDataURL('image/' + (input.options?.format ?? 'png'), this.getQuality(input.options));
             return result;
         }
     }
-    async cropToBlob(output, cropCanvas, cropperState) {
-        output.blob = await new Promise(resolve => cropCanvas.toBlob(resolve, 'image/' + cropperState.options.format, this.getQuality(cropperState.options)));
+    async cropToBlob(output, cropCanvas, input) {
+        output.blob = await new Promise(resolve => cropCanvas.toBlob(resolve, 'image/' + (input.options?.format ?? 'png'), this.getQuality(input.options)));
         if (output.blob) {
             output.objectUrl = URL.createObjectURL(output.blob);
         }
         return output;
     }
-    getCanvasTranslate(cropperState) {
-        if (cropperState.transform.translateUnit === 'px') {
-            const ratio = this.getRatio(cropperState);
+    getCanvasTranslate(input) {
+        if (input.transform?.translateUnit === 'px') {
+            const ratio = this.getRatio(input);
             return {
-                translateH: (cropperState.transform.translateH || 0) * ratio,
-                translateV: (cropperState.transform.translateV || 0) * ratio
+                translateH: (input.transform?.translateH || 0) * ratio,
+                translateV: (input.transform?.translateV || 0) * ratio
             };
         }
         else {
             return {
-                translateH: cropperState.transform.translateH ? percentage(cropperState.transform.translateH, cropperState.loadedImage.transformed.size.width) : 0,
-                translateV: cropperState.transform.translateV ? percentage(cropperState.transform.translateV, cropperState.loadedImage.transformed.size.height) : 0
+                translateH: input.transform?.translateH ? percentage(input.transform.translateH, input.loadedImage.transformed.size.width) : 0,
+                translateV: input.transform?.translateV ? percentage(input.transform.translateV, input.loadedImage.transformed.size.height) : 0
             };
         }
     }
-    getRatio(cropperState) {
-        return cropperState.loadedImage.transformed.size.width / cropperState.maxSize().width;
+    getRatio(input) {
+        return input.loadedImage.transformed.size.width / input.maxSize.width;
     }
     getImagePosition(cropperState) {
         const ratio = this.getRatio(cropperState);
-        const cropper = cropperState.cropper();
         const out = {
-            x1: Math.round(cropper.x1 * ratio),
-            y1: Math.round(cropper.y1 * ratio),
-            x2: Math.round(cropper.x2 * ratio),
-            y2: Math.round(cropper.y2 * ratio)
+            x1: Math.round(cropperState.cropper.x1 * ratio),
+            y1: Math.round(cropperState.cropper.y1 * ratio),
+            x2: Math.round(cropperState.cropper.x2 * ratio),
+            y2: Math.round(cropperState.cropper.y2 * ratio)
         };
-        if (!cropperState.options.containWithinAspectRatio) {
+        if (!cropperState.options?.containWithinAspectRatio) {
             out.x1 = Math.max(out.x1, 0);
             out.y1 = Math.max(out.y1, 0);
             out.x2 = Math.min(out.x2, cropperState.loadedImage.transformed.size.width);
@@ -608,52 +616,50 @@ class CropService {
         }
         return out;
     }
-    getOffsetImagePosition(cropperState) {
-        const canvasRotation = cropperState.options.canvasRotation + cropperState.loadedImage.exifTransform.rotate;
-        const ratio = this.getRatio(cropperState);
+    getOffsetImagePosition(input) {
+        const canvasRotation = (input.options?.canvasRotation ?? 0) + input.loadedImage.exifTransform.rotate;
+        const ratio = this.getRatio(input);
         let offsetX;
         let offsetY;
         if (canvasRotation % 2) {
-            offsetX = (cropperState.loadedImage.transformed.size.width - cropperState.loadedImage.original.size.height) / 2;
-            offsetY = (cropperState.loadedImage.transformed.size.height - cropperState.loadedImage.original.size.width) / 2;
+            offsetX = (input.loadedImage.transformed.size.width - input.loadedImage.original.size.height) / 2;
+            offsetY = (input.loadedImage.transformed.size.height - input.loadedImage.original.size.width) / 2;
         }
         else {
-            offsetX = (cropperState.loadedImage.transformed.size.width - cropperState.loadedImage.original.size.width) / 2;
-            offsetY = (cropperState.loadedImage.transformed.size.height - cropperState.loadedImage.original.size.height) / 2;
+            offsetX = (input.loadedImage.transformed.size.width - input.loadedImage.original.size.width) / 2;
+            offsetY = (input.loadedImage.transformed.size.height - input.loadedImage.original.size.height) / 2;
         }
-        const cropper = cropperState.cropper();
+        const cropper = input.cropper;
         const out = {
             x1: Math.round(cropper.x1 * ratio) - offsetX,
             y1: Math.round(cropper.y1 * ratio) - offsetY,
             x2: Math.round(cropper.x2 * ratio) - offsetX,
             y2: Math.round(cropper.y2 * ratio) - offsetY
         };
-        if (!cropperState.options.containWithinAspectRatio) {
+        if (!input.options?.containWithinAspectRatio) {
             out.x1 = Math.max(out.x1, 0);
             out.y1 = Math.max(out.y1, 0);
-            out.x2 = Math.min(out.x2, cropperState.loadedImage.transformed.size.width);
-            out.y2 = Math.min(out.y2, cropperState.loadedImage.transformed.size.height);
+            out.x2 = Math.min(out.x2, input.loadedImage.transformed.size.width);
+            out.y2 = Math.min(out.y2, input.loadedImage.transformed.size.height);
         }
         return out;
     }
     getResizeRatio(width, height, options) {
-        const ratioWidth = options.resizeToWidth / width;
-        const ratioHeight = options.resizeToHeight / height;
         const ratios = new Array();
-        if (options.resizeToWidth > 0) {
-            ratios.push(ratioWidth);
+        if (options?.resizeToWidth && options.resizeToWidth > 0) {
+            ratios.push(options.resizeToWidth / width);
         }
-        if (options.resizeToHeight > 0) {
-            ratios.push(ratioHeight);
+        if (options?.resizeToHeight && options.resizeToHeight > 0) {
+            ratios.push(options.resizeToHeight / height);
         }
         const result = ratios.length === 0 ? 1 : Math.min(...ratios);
-        if (result > 1 && !options.onlyScaleDown) {
+        if (result > 1 && !options?.onlyScaleDown) {
             return result;
         }
         return Math.min(result, 1);
     }
     getQuality(options) {
-        return Math.min(1, Math.max(0, options.imageQuality / 100));
+        return Math.min(1, Math.max(0, options?.imageQuality ?? 92 / 100));
     }
 }
 
@@ -736,31 +742,31 @@ class LoadImageService {
     constructor() {
         this.autoRotateSupported = supportsAutomaticRotation();
     }
-    async loadImageFile(file, cropperSettings) {
+    async loadImageFile(file, options) {
         const arrayBuffer = await file.arrayBuffer();
-        if (cropperSettings.options.checkImageType) {
-            return await this.checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, file.type, cropperSettings);
+        if (options.checkImageType) {
+            return await this.checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, file.type, options);
         }
-        return await this.loadImageFromArrayBuffer(arrayBuffer, cropperSettings);
+        return await this.loadImageFromArrayBuffer(arrayBuffer, options);
     }
-    checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, imageType, cropperSettings) {
+    checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, imageType, options) {
         if (!this.isValidImageType(imageType)) {
             return Promise.reject(new Error('Invalid image type'));
         }
-        return this.loadImageFromArrayBuffer(arrayBuffer, cropperSettings, imageType);
+        return this.loadImageFromArrayBuffer(arrayBuffer, options, imageType);
     }
     isValidImageType(type) {
         return /image\/(png|jpg|jpeg|heic|bmp|gif|tiff|svg|webp|x-icon|vnd.microsoft.icon)/.test(type);
     }
-    async loadImageFromURL(url, cropperSettings) {
+    async loadImageFromURL(url, options) {
         const res = await fetch(url);
         const blob = await res.blob();
         const buffer = await blob.arrayBuffer();
-        return await this.loadImageFromArrayBuffer(buffer, cropperSettings, blob.type);
+        return await this.loadImageFromArrayBuffer(buffer, options, blob.type);
     }
-    loadBase64Image(imageBase64, cropperSettings) {
+    loadBase64Image(imageBase64, options) {
         const arrayBuffer = this.base64ToArrayBuffer(imageBase64);
-        return this.loadImageFromArrayBuffer(arrayBuffer, cropperSettings);
+        return this.loadImageFromArrayBuffer(arrayBuffer, options);
     }
     base64ToArrayBuffer(imageBase64) {
         imageBase64 = imageBase64.replace(/^data:([^;]+);base64,/gmi, '');
@@ -772,7 +778,7 @@ class LoadImageService {
         }
         return bytes.buffer;
     }
-    async loadImageFromArrayBuffer(arrayBuffer, cropperState, imageType) {
+    async loadImageFromArrayBuffer(arrayBuffer, options, imageType) {
         const res = await new Promise(async (resolve, reject) => {
             try {
                 const blob = new Blob([arrayBuffer], imageType ? { type: imageType } : undefined);
@@ -793,7 +799,7 @@ class LoadImageService {
                 reject(e);
             }
         });
-        return await this.transformImageFromArrayBuffer(res, cropperState, res.originalImageSize != null);
+        return await this.transformImageFromArrayBuffer(res, options, res.originalImageSize != null);
     }
     async getSvgImageSize(blob) {
         const parser = new DOMParser();
@@ -818,7 +824,7 @@ class LoadImageService {
         }
         throw Error('Failed to load SVG image. SVG must have width + height or viewBox definition.');
     }
-    async transformImageFromArrayBuffer(res, cropperSettings, forceTransform = false) {
+    async transformImageFromArrayBuffer(res, options, forceTransform = false) {
         const autoRotate = await this.autoRotateSupported;
         const exifTransform = getTransformationsFromExifData(autoRotate ? -1 : res.originalArrayBuffer);
         if (!res.originalImage || !res.originalImage.complete) {
@@ -835,12 +841,12 @@ class LoadImageService {
             },
             exifTransform
         };
-        return this.transformLoadedImage(loadedImage, cropperSettings, forceTransform);
+        return this.transformLoadedImage(loadedImage, options, forceTransform);
     }
-    async transformLoadedImage(loadedImage, cropperState, forceTransform = false) {
-        const canvasRotation = cropperState.options.canvasRotation + loadedImage.exifTransform.rotate;
+    async transformLoadedImage(loadedImage, options, forceTransform = false) {
+        const canvasRotation = (options.canvasRotation ?? 0) + loadedImage.exifTransform.rotate;
         const originalSize = loadedImage.original.size;
-        if (!forceTransform && canvasRotation === 0 && !loadedImage.exifTransform.flip && !cropperState.options.containWithinAspectRatio) {
+        if (!forceTransform && canvasRotation === 0 && !loadedImage.exifTransform.flip && !options.containWithinAspectRatio) {
             return {
                 original: {
                     objectUrl: loadedImage.original.objectUrl,
@@ -855,7 +861,7 @@ class LoadImageService {
                 exifTransform: loadedImage.exifTransform
             };
         }
-        const transformedSize = this.getTransformedSize(originalSize, loadedImage.exifTransform, cropperState);
+        const transformedSize = this.getTransformedSize(originalSize, loadedImage.exifTransform, options);
         const canvas = document.createElement('canvas');
         canvas.width = transformedSize.width;
         canvas.height = transformedSize.height;
@@ -863,7 +869,7 @@ class LoadImageService {
         ctx?.setTransform(loadedImage.exifTransform.flip ? -1 : 1, 0, 0, 1, canvas.width / 2, canvas.height / 2);
         ctx?.rotate(Math.PI * (canvasRotation / 2));
         ctx?.drawImage(loadedImage.original.image, -originalSize.width / 2, -originalSize.height / 2);
-        const blob = await new Promise(resolve => canvas.toBlob(resolve, cropperState.options.format));
+        const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/' + (options.format ?? 'png')));
         if (!blob) {
             throw new Error('Failed to get Blob for transformed image.');
         }
@@ -894,20 +900,20 @@ class LoadImageService {
             image.src = objectUrl;
         }));
     }
-    getTransformedSize(originalSize, exifTransform, cropperState) {
-        const canvasRotation = cropperState.options.canvasRotation + exifTransform.rotate;
-        if (cropperState.options.containWithinAspectRatio) {
+    getTransformedSize(originalSize, exifTransform, options) {
+        const canvasRotation = (options.canvasRotation ?? 0) + exifTransform.rotate;
+        if (options.containWithinAspectRatio) {
             if (canvasRotation % 2) {
-                const minWidthToContain = originalSize.width * cropperState.options.aspectRatio;
-                const minHeightToContain = originalSize.height / cropperState.options.aspectRatio;
+                const minWidthToContain = originalSize.width * (options.aspectRatio ?? 1);
+                const minHeightToContain = originalSize.height / (options.aspectRatio ?? 1);
                 return {
                     width: Math.max(originalSize.height, minWidthToContain),
                     height: Math.max(originalSize.width, minHeightToContain)
                 };
             }
             else {
-                const minWidthToContain = originalSize.height * cropperState.options.aspectRatio;
-                const minHeightToContain = originalSize.width / cropperState.options.aspectRatio;
+                const minWidthToContain = originalSize.height * (options.aspectRatio ?? 1);
+                const minHeightToContain = originalSize.width / (options.aspectRatio ?? 1);
                 return {
                     width: Math.max(originalSize.width, minWidthToContain),
                     height: Math.max(originalSize.height, minHeightToContain)
@@ -1015,7 +1021,7 @@ class ImageCropperComponent {
         }
         if ((this.containWithinAspectRatio && changes['aspectRatio']) || changes['containWithinAspectRatio'] || changes['canvasRotation']) {
             this.loadImageService
-                .transformLoadedImage(this.state.loadedImage, this.state)
+                .transformLoadedImage(this.state.loadedImage, this.state.options)
                 .then((res) => this.setLoadedImage(res))
                 .catch((err) => this.loadImageError(err));
             return;
@@ -1067,19 +1073,19 @@ class ImageCropperComponent {
     }
     loadImageFile(file) {
         this.loadImageService
-            .loadImageFile(file, this.state)
+            .loadImageFile(file, this.state.options)
             .then((res) => this.setLoadedImage(res))
             .catch((err) => this.loadImageError(err));
     }
     loadBase64Image(imageBase64) {
         this.loadImageService
-            .loadBase64Image(imageBase64, this.state)
+            .loadBase64Image(imageBase64, this.state.options)
             .then((res) => this.setLoadedImage(res))
             .catch((err) => this.loadImageError(err));
     }
     loadImageFromURL(url) {
         this.loadImageService
-            .loadImageFromURL(url, this.state)
+            .loadImageFromURL(url, this.state.options)
             .then((res) => this.setLoadedImage(res))
             .catch((err) => this.loadImageError(err));
     }
@@ -1325,7 +1331,7 @@ class ImageCropperComponent {
     }
     cropToBlob() {
         return new Promise(async (resolve, reject) => {
-            const result = await this.cropService.crop(this.state, 'blob');
+            const result = await this.cropService.crop(this.state.toCropInput(), 'blob');
             if (result) {
                 this.imageCropped.emit(result);
                 resolve(result);
@@ -1336,7 +1342,7 @@ class ImageCropperComponent {
         });
     }
     cropToBase64() {
-        const result = this.cropService.crop(this.state, 'base64');
+        const result = this.cropService.crop(this.state.toCropInput(), 'base64');
         if (result) {
             this.imageCropped.emit(result);
             return result;