@syncfusion/ej2-image-editor 29.1.38 → 29.2.5

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

@@ -3483,6 +3483,7 @@ var Draw = /** @__PURE__ @class */ (function () {
             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);
             var isCropped = false;
             var isSameDimension = false;
@@ -20190,6 +20191,7 @@ var Transform = /** @__PURE__ @class */ (function () {
             parent.lowerCanvas.height = parent.upperCanvas.height = parent.maskCanvas.height =
                 parseFloat(canvasWrapper.style.height);
             this.lowerContext.filter = tempFilter;
+            this.lowerContext.imageSmoothingQuality = parent.imageSmoothingEnabled ? 'high' : 'low';
             var obj = { width: 0, height: 0 };
             this.calcMaxDimension(parent.img.srcWidth, parent.img.srcHeight, obj);
             var maxDimension = obj;
@@ -22481,6 +22483,17 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
                     }
                     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;
             }
         }
     };
@@ -26626,6 +26639,9 @@ var ImageEditor = /** @__PURE__ @class */ (function (_super) {
     __decorate([
         Property()
     ], ImageEditor.prototype, "quickAccessToolbarTemplate", void 0);
+    __decorate([
+        Property(false)
+    ], ImageEditor.prototype, "imageSmoothingEnabled", void 0);
     __decorate([
         Property(false)
     ], ImageEditor.prototype, "isReadOnly", void 0);
@@ -28735,6 +28751,47 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             ]
         });
         dialog.appendTo('#' + id + '_saveDialog');
+        this.updateSavePreviewImage();
+    };
+    ToolbarModule.prototype.updateSavePreviewImage = function () {
+        var parent = this.parent;
+        var id = parent.element.id;
+        var elem = parent.element.querySelector('#' + id + '_saveDialog');
+        if (Browser.isDevice || !elem) {
+            return;
+        }
+        var dialogWidth = elem.offsetWidth;
+        var dialogMaxHeight = parseInt(elem.style.maxHeight, 10);
+        var headerHeight = elem.querySelector('.e-dlg-header-content').offsetHeight;
+        var footerHeight = elem.querySelector('.e-footer-content').offsetHeight;
+        var padding = parseInt(window.getComputedStyle(elem.querySelector('#' + id + '_saveDialog_dialog-content')).padding, 10);
+        var imageSizeContent = 20; // Image size text container div height
+        var canvasMaxWidth = dialogWidth * (35 / 100); // 35% of dialog's width
+        var canvasMaxHeight = dialogMaxHeight - headerHeight - footerHeight - imageSizeContent - (padding * 2);
+        var canvas = parent.element.querySelector('#' + id + '_imgPic');
+        var width = canvas.width;
+        var height = canvas.height;
+        var widthScale = canvasMaxWidth / width;
+        var heightScale = canvasMaxHeight / height;
+        var cssMaxWidth = Math.min(width, canvasMaxWidth);
+        var 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;
+        }
+        var imageObj = { canvas: null };
+        parent.notify('export', { prop: 'exportToCanvas', value: { object: imageObj } });
+        var ctx = canvas.getContext('2d');
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        canvas.width = cssMaxWidth;
+        canvas.height = cssMaxHeight;
+        var 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 */
     ToolbarModule.prototype.saveDialogClosed = function (id) {
@@ -28835,6 +28892,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                         _this.updateImageSize(isNullOrUndefined(_this.currentQuality) ? 1 : _this.currentQuality, obj['canvas'], _this.fileType);
                         document.getElementById(id + '_' + _this.imageQuality).checked = true;
                     }
+                    _this.updateSavePreviewImage();
                 }
             });
             drpDownBtn_1.appendTo('#' + id + '_saveDropdownbtn');
@@ -28890,12 +28948,14 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 created: function () {
                     _this.updateImageSize(_this.currentQuality, obj['canvas'], 'jpeg');
                     qualitySliderValueSpan.innerHTML = (Math.round(_this.currentQuality * 100)).toString();
+                    _this.updateSavePreviewImage();
                 },
                 changed: function (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');
@@ -28916,6 +28976,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             this.currentQuality = compressionValues[target.textContent];
             this.imageQuality = target.textContent.toLowerCase();
             this.updateImageSize(compressionValues[target.textContent], obj['canvas'], 'jpeg');
+            this.updateSavePreviewImage();
         }
     };
     ToolbarModule.prototype.updateImageSize = function (quality, tempCanvas, fileType) {
@@ -28932,7 +28993,11 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         else {
             imageNameLabel = document.getElementById(id + '_imageNameLabel');
         }
+        var 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);
@@ -28948,20 +29013,12 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 if (Browser.isDevice) {
                     canvas.style.display = 'none';
                 }
-                else {
-                    var compressedImage_1 = new Image();
-                    compressedImage_1.src = URL.createObjectURL(blob);
-                    // eslint-disable-next-line @typescript-eslint/tslint/config
-                    compressedImage_1.onload = function () {
-                        ctx.drawImage(compressedImage_1, 0, 0);
-                        URL.revokeObjectURL(compressedImage_1.src);
-                    };
-                }
                 this.fileSize = fileSize;
             }).bind(this), 'image/jpeg', quality);
         }
         else if (!isNullOrUndefined(fileType) && (fileType.toLowerCase() === 'png' || fileType.toLowerCase() === 'webp')) {
             var 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) {
@@ -28982,6 +29039,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
             }).bind(this), type, 1);
         }
         else if (!isNullOrUndefined(fileType) && fileType.toLowerCase() === 'svg') {
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
             ctx.drawImage(tempCanvas, 0, 0);
             var svgDataUrl = tempCanvas.toDataURL('image/svg+xml');
             var base64Data = svgDataUrl.split(',')[1];
@@ -29007,6 +29065,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
                 canvas.style.display = 'none';
             }
             else {
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
                 ctx.drawImage(tempCanvas, 0, 0);
                 if (this.initialSize > 1000) {
                     var megabytes = this.initialSize / 1048576;
@@ -31677,6 +31736,7 @@ var ToolbarModule = /** @__PURE__ @class */ (function () {
         if (filter) {
             var 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 } });