@syncfusion/ej2-image-editor 20.4.38 → 20.4.40

package/dist/es6/ej2-image-editor.es2015.js

@@ -127,6 +127,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         this.tempBWFilter = false;
         this.isBrightnessAdjusted = false;
         this.isInitialLoading = false;
+        this.imageFileName = '';
     }
     preRender() {
         // pre render code snippets
@@ -3303,6 +3304,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         ctx.drawImage(this.inMemoryCanvas, 0, 0, 300, 150);
     }
     updateCanvas() {
+        const fileOpened = { fileName: this.imageFileName, fileType: this.imageFileType };
         this.lastX = this.baseImg.width / 2;
         this.lastY = this.baseImg.height / 2;
         let wrapperWidth;
@@ -3367,7 +3369,7 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         if (this.disabled) {
             this.element.setAttribute('class', 'e-disabled');
         }
-        this.trigger('fileOpened');
+        this.trigger('fileOpened', fileOpened);
     }
     imageOnLoad(src) {
         // eslint-disable-next-line @typescript-eslint/no-this-alias
@@ -3570,6 +3572,18 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
         }
     }
     fileSelect(inputElement, args) {
+        this.imageFileName = inputElement.value.split('\\')[inputElement.value.split('\\').length - 1];
+        this.imageFileName = this.imageFileName.split('.')[0];
+        const fileType = inputElement.value.split('.');
+        if (fileType[fileType.length - 1].toLowerCase() === 'jpg' || fileType[fileType.length - 1].toLowerCase() === 'jpeg') {
+            this.imageFileType = 'Jpeg';
+        }
+        else if (fileType[fileType.length - 1].toLowerCase() === 'png') {
+            this.imageFileType = 'Png';
+        }
+        else if (fileType[fileType.length - 1].toLowerCase() === 'svg') {
+            this.imageFileType = 'Svg';
+        }
         showSpinner(this.element);
         this.element.style.opacity = '0.5';
         /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
@@ -8332,7 +8346,6 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             let heightRatio;
             let imgData;
             let zoomedRotate = false;
-            const factor = this.factor;
             if (this.factor === 1) {
                 imgData = this.lowerContext.getImageData(0, 0, this.lowerCanvas.width, this.lowerCanvas.height);
                 widthRatio = this.lowerCanvas.width / parseInt(this.lowerCanvas.style.maxWidth, 10);
@@ -8634,9 +8647,23 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             this.imgDataColl = [];
             const type = typeof (data);
             if (type === 'string') {
+                let fileName = data.split('.');
+                if (fileName[fileName.length - 1].toLowerCase() === 'jpg' || fileName[fileName.length - 1].toLowerCase() === 'jpeg') {
+                    this.imageFileType = 'Jpeg';
+                }
+                else if (fileName[fileName.length - 1].toLowerCase() === 'png') {
+                    this.imageFileType = 'Png';
+                }
+                else if (fileName[fileName.length - 1].toLowerCase() === 'svg') {
+                    this.imageFileType = 'Svg';
+                }
+                fileName = fileName[fileName.length - 2].split('/');
+                this.imageFileName = fileName[fileName.length - 1];
                 this.imageOnLoad(data);
             }
             else {
+                this.imageFileName = 'ImageEditor';
+                this.imageFileType = 'Jpeg';
                 const tempFilter = this.lowerContext.filter;
                 this.lowerCanvas = document.querySelector('#' + this.element.id + '_lowerCanvas');
                 this.upperCanvas = document.querySelector('#' + this.element.id + '_upperCanvas');
@@ -8740,6 +8767,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             this.tempObjColl = undefined;
             this.adjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0, exposure: 0, sharpen: false, bw: false };
             this.tempAdjustmentLevel = { brightness: 0, contrast: 0, hue: 0, opacity: 100, saturation: 0, blur: 0, exposure: 0, sharpen: false, bw: false };
+            this.imageFileName = '';
+            this.imageFileType = undefined;
             this.canvasFilter = this.currentFilter = this.tempAdjustmentValue = '';
             this.lowerContext.filter = this.initialAdjustmentValue = this.adjustmentValue = 'brightness(' + 1 + ') ' + 'contrast(' + 100
                 + '%) ' + 'hue-rotate(' + 0 + 'deg) ' +
@@ -8860,22 +8889,23 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             }
             type = type ? type : 'Png';
             this.redrawActObj();
-            const beforeSave = { cancel: false, fileName: fileName ? fileName : 'ImageEditor', fileType: type };
-            const saved = { fileName: fileName ? fileName : 'ImageEditor', fileType: type };
+            fileName = fileName ? fileName : this.imageFileName;
+            const beforeSave = { cancel: false, fileName: fileName, fileType: type };
+            const saved = { fileName: fileName ? fileName : this.imageFileName, fileType: type };
             this.trigger('beforeSave', beforeSave, (observableSaveArgs) => {
                 if (!observableSaveArgs.cancel) {
                     this.currObjType.isSave = true;
                     fileName = observableSaveArgs.fileName ? observableSaveArgs.fileName : fileName;
                     if (type.toLowerCase() === 'svg') {
-                        fileName = fileName || 'ImageEditor';
+                        fileName = fileName || this.imageFileName;
                         this.toSVGImg(fileName);
                     }
                     else if (type.toLowerCase() === 'jpeg') {
-                        fileName = fileName || 'ImageEditor';
+                        fileName = fileName || this.imageFileName;
                         this.toBlobFn(fileName, type.toLowerCase());
                     }
                     else {
-                        fileName = fileName || 'ImageEditor';
+                        fileName = fileName || this.imageFileName;
                         this.toBlobFn(fileName, type.toLowerCase());
                     }
                     this.trigger('saved', saved);
@@ -9411,7 +9441,8 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends SignatureBase {
             this.initialAdjustmentValue = 'brightness(1) contrast(100%) hue-rotate(0deg) saturate(100%) opacity(1) blur(0px) sepia(0%) grayscale(0%) invert(0%)';
         }
         this.lowerContext.filter = this.initialAdjustmentValue;
-        this.setFilter(filterOption.toString());
+        const filterValue = filterOption.split(' ');
+        this.setFilter(filterValue.join('').toLowerCase());
     }
     /**
      * To apply the filters to an image