ngx-image-cropper 7.1.1 → 7.2.0

package/fesm2020/ngx-image-cropper.mjs

@@ -2,7 +2,8 @@ import * as i0 from '@angular/core';
 import { Injectable, EventEmitter, isDevMode, Component, ChangeDetectionStrategy, Optional, Inject, ViewChild, Input, HostBinding, Output, HostListener, NgModule } from '@angular/core';
 import * as i4 from '@angular/platform-browser';
 import { HAMMER_LOADER } from '@angular/platform-browser';
-import { merge, fromEvent, takeUntil, first } from 'rxjs';
+import { takeUntil, first } from 'rxjs/operators';
+import { merge, fromEvent } from 'rxjs';
 import * as i5 from '@angular/common';
 import { CommonModule } from '@angular/common';
 
@@ -611,30 +612,30 @@ class LoadImageService {
     constructor() {
         this.autoRotateSupported = supportsAutomaticRotation();
     }
-    loadImageFile(file, cropperSettings) {
-        return file.arrayBuffer()
-            .then(arrayBuffer => this.checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, file.type, cropperSettings));
+    async loadImageFile(file, cropperSettings) {
+        const arrayBuffer = await file.arrayBuffer();
+        return await this.checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, file.type, cropperSettings);
     }
     checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, imageType, cropperSettings) {
         if (!this.isValidImageType(imageType)) {
             return Promise.reject(new Error('Invalid image type'));
         }
-        return this.loadImageFromArrayBuffer(arrayBuffer, cropperSettings);
+        return this.loadImageFromArrayBuffer(arrayBuffer, cropperSettings, imageType);
     }
     isValidImageType(type) {
-        return /image\/(png|jpg|jpeg|bmp|gif|tiff|webp|x-icon|vnd.microsoft.icon)/.test(type);
+        return /image\/(png|jpg|jpeg|bmp|gif|tiff|svg|webp|x-icon|vnd.microsoft.icon)/.test(type);
     }
-    loadImageFromURL(url, cropperSettings) {
-        return fetch(url)
-            .then(res => res.arrayBuffer())
-            .then(buffer => this.loadImageFromArrayBuffer(buffer, cropperSettings));
+    async loadImageFromURL(url, cropperSettings) {
+        const res = await fetch(url);
+        const buffer = await res.arrayBuffer();
+        return await this.loadImageFromArrayBuffer(buffer, cropperSettings);
     }
     loadBase64Image(imageBase64, cropperSettings) {
         const arrayBuffer = this.base64ToArrayBuffer(imageBase64);
         return this.loadImageFromArrayBuffer(arrayBuffer, cropperSettings);
     }
     base64ToArrayBuffer(imageBase64) {
-        imageBase64 = imageBase64.replace(/^data\:([^\;]+)\;base64,/gmi, '');
+        imageBase64 = imageBase64.replace(/^data:([^;]+);base64,/gmi, '');
         const binaryString = atob(imageBase64);
         const len = binaryString.length;
         const bytes = new Uint8Array(len);
@@ -643,23 +644,55 @@ class LoadImageService {
         }
         return bytes.buffer;
     }
-    loadImageFromArrayBuffer(arrayBuffer, cropperSettings) {
-        return new Promise((resolve, reject) => {
-            const blob = new Blob([arrayBuffer]);
-            const objectUrl = URL.createObjectURL(blob);
-            const originalImage = new Image();
-            originalImage.onload = () => resolve({
-                originalImage,
-                originalObjectUrl: objectUrl,
-                originalArrayBuffer: arrayBuffer
-            });
-            originalImage.onerror = reject;
-            originalImage.src = objectUrl;
-        }).then((res) => this.transformImageFromArrayBuffer(res, cropperSettings));
+    async loadImageFromArrayBuffer(arrayBuffer, cropperSettings, imageType) {
+        const res = await new Promise(async (resolve, reject) => {
+            try {
+                const blob = new Blob([arrayBuffer], imageType ? { type: imageType } : undefined);
+                const objectUrl = URL.createObjectURL(blob);
+                const originalImage = new Image();
+                const isSvg = imageType === 'image/svg+xml';
+                const originalImageSize = isSvg ? await this.getSvgImageSize(blob) : undefined;
+                originalImage.onload = () => resolve({
+                    originalImage,
+                    originalImageSize,
+                    originalObjectUrl: objectUrl,
+                    originalArrayBuffer: arrayBuffer
+                });
+                originalImage.onerror = reject;
+                originalImage.src = objectUrl;
+            }
+            catch (e) {
+                reject(e);
+            }
+        });
+        return await this.transformImageFromArrayBuffer(res, cropperSettings, res.originalImageSize != null);
+    }
+    async getSvgImageSize(blob) {
+        const parser = new DOMParser();
+        const doc = parser.parseFromString(await blob.text(), 'image/svg+xml');
+        const svgElement = doc.querySelector('svg');
+        if (!svgElement) {
+            throw Error('Failed to parse SVG image');
+        }
+        const widthAttr = svgElement.getAttribute('width');
+        const heightAttr = svgElement.getAttribute('height');
+        if (widthAttr && heightAttr) {
+            return null;
+        }
+        const viewBoxAttr = svgElement.getAttribute('viewBox')
+            || svgElement.getAttribute('viewbox');
+        if (viewBoxAttr) {
+            const viewBox = viewBoxAttr.split(' ');
+            return {
+                width: +viewBox[2],
+                height: +viewBox[3]
+            };
+        }
+        throw Error('Failed to load SVG image. SVG must have width + height or viewBox definition.');
     }
-    async transformImageFromArrayBuffer(res, cropperSettings) {
+    async transformImageFromArrayBuffer(res, cropperSettings, forceTransform = false) {
         const autoRotate = await this.autoRotateSupported;
-        const exifTransform = await getTransformationsFromExifData(autoRotate ? -1 : res.originalArrayBuffer);
+        const exifTransform = getTransformationsFromExifData(autoRotate ? -1 : res.originalArrayBuffer);
         if (!res.originalImage || !res.originalImage.complete) {
             return Promise.reject(new Error('No image loaded'));
         }
@@ -667,22 +700,19 @@ class LoadImageService {
             original: {
                 objectUrl: res.originalObjectUrl,
                 image: res.originalImage,
-                size: {
+                size: res.originalImageSize ?? {
                     width: res.originalImage.naturalWidth,
                     height: res.originalImage.naturalHeight
                 }
             },
             exifTransform
         };
-        return this.transformLoadedImage(loadedImage, cropperSettings);
+        return this.transformLoadedImage(loadedImage, cropperSettings, forceTransform);
     }
-    async transformLoadedImage(loadedImage, cropperSettings) {
+    async transformLoadedImage(loadedImage, cropperSettings, forceTransform = false) {
         const canvasRotation = cropperSettings.canvasRotation + loadedImage.exifTransform.rotate;
-        const originalSize = {
-            width: loadedImage.original.image.naturalWidth,
-            height: loadedImage.original.image.naturalHeight
-        };
-        if (canvasRotation === 0 && !loadedImage.exifTransform.flip && !cropperSettings.containWithinAspectRatio) {
+        const originalSize = loadedImage.original.size;
+        if (!forceTransform && canvasRotation === 0 && !loadedImage.exifTransform.flip && !cropperSettings.containWithinAspectRatio) {
             return {
                 original: {
                     objectUrl: loadedImage.original.objectUrl,