@syncfusion/ej2-image-editor 29.1.38 → 29.2.5

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

@@ -3453,6 +3453,7 @@ class Draw {
             if (!parent.isUndoRedo) {
                 parent.notify('filter', { prop: 'update-finetunes', onPropertyChange: false });
             }
+            proxy.lowerContext.imageSmoothingQuality = parent.imageSmoothingEnabled ? 'high' : 'low';
             proxy.lowerContext.drawImage(parent.baseImg, 0, 0, proxy.parent.lowerCanvas.width, proxy.parent.lowerCanvas.height);
             let isCropped = false;
             let isSameDimension = false;
@@ -20123,6 +20124,7 @@ class Transform {
             parent.lowerCanvas.height = parent.upperCanvas.height = parent.maskCanvas.height =
                 parseFloat(canvasWrapper.style.height);
             this.lowerContext.filter = tempFilter;
+            this.lowerContext.imageSmoothingQuality = parent.imageSmoothingEnabled ? 'high' : 'low';
             const obj = { width: 0, height: 0 };
             this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight, obj);
             const maxDimension = obj;
@@ -22370,6 +22372,17 @@ let ImageEditor = ImageEditor_1 = class ImageEditor extends Component {
                     }
                     this.updateDropInfoContent(this.element.querySelector('.e-ie-drop-info'));
                     break;
+                case 'imageSmoothingEnabled':
+                    if (newProperties.imageSmoothingEnabled) {
+                        this.imageSmoothingEnabled = true;
+                        this.lowerContext.imageSmoothingQuality = 'high';
+                    }
+                    else {
+                        this.imageSmoothingEnabled = false;
+                        this.lowerContext.imageSmoothingQuality = 'low';
+                    }
+                    this.notify('draw', { prop: 'render-image', value: { isMouseWheel: false } });
+                    break;
             }
         }
     }
@@ -26511,6 +26524,9 @@ __decorate([
 __decorate([
     Property()
 ], ImageEditor.prototype, "quickAccessToolbarTemplate", void 0);
+__decorate([
+    Property(false)
+], ImageEditor.prototype, "imageSmoothingEnabled", void 0);
 __decorate([
     Property(false)
 ], ImageEditor.prototype, "isReadOnly", void 0);
@@ -28610,6 +28626,47 @@ class ToolbarModule {
             ]
         });
         dialog.appendTo('#' + id + '_saveDialog');
+        this.updateSavePreviewImage();
+    }
+    updateSavePreviewImage() {
+        const parent = this.parent;
+        const id = parent.element.id;
+        const elem = parent.element.querySelector('#' + id + '_saveDialog');
+        if (Browser.isDevice || !elem) {
+            return;
+        }
+        const dialogWidth = elem.offsetWidth;
+        const dialogMaxHeight = parseInt(elem.style.maxHeight, 10);
+        const headerHeight = elem.querySelector('.e-dlg-header-content').offsetHeight;
+        const footerHeight = elem.querySelector('.e-footer-content').offsetHeight;
+        const padding = parseInt(window.getComputedStyle(elem.querySelector('#' + id + '_saveDialog_dialog-content')).padding, 10);
+        const imageSizeContent = 20; // Image size text container div height
+        const canvasMaxWidth = dialogWidth * (35 / 100); // 35% of dialog's width
+        const canvasMaxHeight = dialogMaxHeight - headerHeight - footerHeight - imageSizeContent - (padding * 2);
+        const canvas = parent.element.querySelector('#' + id + '_imgPic');
+        const width = canvas.width;
+        const height = canvas.height;
+        const widthScale = canvasMaxWidth / width;
+        const heightScale = canvasMaxHeight / height;
+        let cssMaxWidth = Math.min(width, canvasMaxWidth);
+        let cssMaxHeight = Math.min(height, canvasMaxHeight);
+        if (widthScale < 1 && widthScale < heightScale) {
+            cssMaxWidth = width * widthScale;
+            cssMaxHeight = height * widthScale;
+        }
+        else if (heightScale < 1 && heightScale < widthScale) {
+            cssMaxWidth = width * heightScale;
+            cssMaxHeight = height * heightScale;
+        }
+        const imageObj = { canvas: null };
+        parent.notify('export', { prop: 'exportToCanvas', value: { object: imageObj } });
+        const ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        canvas.width = cssMaxWidth;
+        canvas.height = cssMaxHeight;
+        const tempCanvas = imageObj['canvas'];
+        ctx.imageSmoothingQuality = 'medium';
+        ctx.drawImage(tempCanvas, 0, 0, tempCanvas.width, tempCanvas.height, 0, 0, cssMaxWidth, cssMaxHeight);
     }
     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
     saveDialogClosed(id) {
@@ -28709,6 +28766,7 @@ class ToolbarModule {
                         this.updateImageSize(isNullOrUndefined(this.currentQuality) ? 1 : this.currentQuality, obj['canvas'], this.fileType);
                         document.getElementById(id + '_' + this.imageQuality).checked = true;
                     }
+                    this.updateSavePreviewImage();
                 }
             });
             drpDownBtn.appendTo('#' + id + '_saveDropdownbtn');
@@ -28763,12 +28821,14 @@ class ToolbarModule {
                 created: () => {
                     this.updateImageSize(this.currentQuality, obj['canvas'], 'jpeg');
                     qualitySliderValueSpan.innerHTML = (Math.round(this.currentQuality * 100)).toString();
+                    this.updateSavePreviewImage();
                 },
                 changed: (args) => {
                     this.currentQuality = args.value;
                     qualitySliderValueSpan.innerHTML = (Math.round(this.currentQuality * 100)).toString();
                     parent.notify('export', { prop: 'setImageQuality', value: { value: args.value } });
                     this.updateImageSize(args.value, obj['canvas'], 'jpeg');
+                    this.updateSavePreviewImage();
                 }
             });
             sliderObj.appendTo('#' + id + '_qualitySlider');
@@ -28789,6 +28849,7 @@ class ToolbarModule {
             this.currentQuality = compressionValues[target.textContent];
             this.imageQuality = target.textContent.toLowerCase();
             this.updateImageSize(compressionValues[target.textContent], obj['canvas'], 'jpeg');
+            this.updateSavePreviewImage();
         }
     }
     updateImageSize(quality, tempCanvas, fileType) {
@@ -28805,7 +28866,11 @@ class ToolbarModule {
         else {
             imageNameLabel = document.getElementById(id + '_imageNameLabel');
         }
+        const imageSmoothingEnabled = parent.imageSmoothingEnabled;
+        ctx.canvas.getContext('2d').imageSmoothingQuality = imageSmoothingEnabled ? 'high' : 'low';
         if (fileType.toLowerCase() === 'jpeg') {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(tempCanvas, 0, 0);
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             tempCanvas.toBlob((function (blob) {
                 fileSize = Math.floor(blob.size / 1024);
@@ -28821,20 +28886,12 @@ class ToolbarModule {
                 if (Browser.isDevice) {
                     canvas.style.display = 'none';
                 }
-                else {
-                    const compressedImage = new Image();
-                    compressedImage.src = URL.createObjectURL(blob);
-                    // eslint-disable-next-line @typescript-eslint/tslint/config
-                    compressedImage.onload = function () {
-                        ctx.drawImage(compressedImage, 0, 0);
-                        URL.revokeObjectURL(compressedImage.src);
-                    };
-                }
                 this.fileSize = fileSize;
             }).bind(this), 'image/jpeg', quality);
         }
         else if (!isNullOrUndefined(fileType) && (fileType.toLowerCase() === 'png' || fileType.toLowerCase() === 'webp')) {
             const type = 'image/' + fileType.toLowerCase();
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.drawImage(tempCanvas, 0, 0);
             /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
             tempCanvas.toBlob((function (blob) {
@@ -28855,6 +28912,7 @@ class ToolbarModule {
             }).bind(this), type, 1);
         }
         else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'svg') {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.drawImage(tempCanvas, 0, 0);
             const svgDataUrl = tempCanvas.toDataURL('image/svg+xml');
             const base64Data = svgDataUrl.split(',')[1];
@@ -28880,6 +28938,7 @@ class ToolbarModule {
                 canvas.style.display = 'none';
             }
             else {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
                 ctx.drawImage(tempCanvas, 0, 0);
                 if (this.initialSize > 1000) {
                     const megabytes = this.initialSize / 1048576;
@@ -31525,6 +31584,7 @@ class ToolbarModule {
         if (filter) {
             let ctx = filter.getContext('2d');
             ctx = filter.getContext('2d');
+            ctx.imageSmoothingQuality = parent.imageSmoothingEnabled ? 'high' : 'low';
             filter.style.width = '100px';
             filter.style.height = '100px';
             parent.notify('filter', { prop: 'updateAdj', value: { type: type, value: null, isPreview: true, ctx: ctx } });