ngx-image-cropper 7.1.2 → 7.2.0

package/fesm2015/ngx-image-cropper.mjs

@@ -618,29 +618,33 @@ class LoadImageService {
         this.autoRotateSupported = supportsAutomaticRotation();
     }
     loadImageFile(file, cropperSettings) {
-        return file.arrayBuffer()
-            .then(arrayBuffer => this.checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, file.type, cropperSettings));
+        return __awaiter(this, void 0, void 0, function* () {
+            const arrayBuffer = yield file.arrayBuffer();
+            return yield 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));
+        return __awaiter(this, void 0, void 0, function* () {
+            const res = yield fetch(url);
+            const buffer = yield res.arrayBuffer();
+            return yield 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);
@@ -649,24 +653,61 @@ 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));
+    loadImageFromArrayBuffer(arrayBuffer, cropperSettings, imageType) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const res = yield new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {
+                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 ? yield this.getSvgImageSize(blob) : undefined;
+                    originalImage.onload = () => resolve({
+                        originalImage,
+                        originalImageSize,
+                        originalObjectUrl: objectUrl,
+                        originalArrayBuffer: arrayBuffer
+                    });
+                    originalImage.onerror = reject;
+                    originalImage.src = objectUrl;
+                }
+                catch (e) {
+                    reject(e);
+                }
+            }));
+            return yield this.transformImageFromArrayBuffer(res, cropperSettings, res.originalImageSize != null);
+        });
     }
-    transformImageFromArrayBuffer(res, cropperSettings) {
+    getSvgImageSize(blob) {
+        return __awaiter(this, void 0, void 0, function* () {
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(yield 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.');
+        });
+    }
+    transformImageFromArrayBuffer(res, cropperSettings, forceTransform = false) {
+        var _a;
         return __awaiter(this, void 0, void 0, function* () {
             const autoRotate = yield this.autoRotateSupported;
-            const exifTransform = yield 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'));
             }
@@ -674,24 +715,21 @@ class LoadImageService {
                 original: {
                     objectUrl: res.originalObjectUrl,
                     image: res.originalImage,
-                    size: {
+                    size: (_a = res.originalImageSize) !== null && _a !== void 0 ? _a : {
                         width: res.originalImage.naturalWidth,
                         height: res.originalImage.naturalHeight
                     }
                 },
                 exifTransform
             };
-            return this.transformLoadedImage(loadedImage, cropperSettings);
+            return this.transformLoadedImage(loadedImage, cropperSettings, forceTransform);
         });
     }
-    transformLoadedImage(loadedImage, cropperSettings) {
+    transformLoadedImage(loadedImage, cropperSettings, forceTransform = false) {
         return __awaiter(this, void 0, void 0, function* () {
             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,