@syncfusion/ej2-image-editor 29.1.38 → 29.2.5

package/dist/global/index.d.ts

@@ -1,6 +1,6 @@
 /*!
 *  filename: index.d.ts
-*  version : 29.1.38
+*  version : 29.2.5
 *  Copyright Syncfusion Inc. 2001 - 2024. All rights reserved.
 *  Use of this code is subject to the terms of our license.
 *  A copy of the current license can be obtained at any time by e-mailing

package/package.json

@@ -1,8 +1,8 @@
 {
   "_from": "@syncfusion/ej2-image-editor@*",
-  "_id": "@syncfusion/ej2-image-editor@29.1.37",
+  "_id": "@syncfusion/ej2-image-editor@29.2.4",
   "_inBundle": false,
-  "_integrity": "sha512-+D/VOqTX1RBLbM3+gbbmInoSbaM1xcBoesAdg44ilDafvOFFExMRM5ih45Ei11xHfyoEKNGDFTFMu2YT4OC1rA==",
+  "_integrity": "sha512-KGWJaBOobKxYzaAAsQUgkhCCnOhrWbSA7oHtqQOuqyUsWEws3YPHwnAA4mXVjBVQKnYyBRs8TFHW2AWhV9381Q==",
   "_location": "/@syncfusion/ej2-image-editor",
   "_phantomChildren": {},
   "_requested": {
@@ -23,8 +23,8 @@
     "/@syncfusion/ej2-react-image-editor",
     "/@syncfusion/ej2-vue-image-editor"
   ],
-  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-29.1.37.tgz",
-  "_shasum": "cfd2ed4116a7fa6ff96b7e8c9ee34ae36d3f9b11",
+  "_resolved": "https://nexus.syncfusioninternal.com/repository/ej2-hotfix-new/@syncfusion/ej2-image-editor/-/ej2-image-editor-29.2.4.tgz",
+  "_shasum": "66450f7daa2da9e5ad610c2d891b093d4a2c913f",
   "_spec": "@syncfusion/ej2-image-editor@*",
   "_where": "/jenkins/workspace/elease-automation_release_29.1.1/packages/included",
   "author": {
@@ -32,13 +32,13 @@
   },
   "bundleDependencies": false,
   "dependencies": {
-    "@syncfusion/ej2-base": "~29.1.36",
-    "@syncfusion/ej2-buttons": "~29.1.34",
-    "@syncfusion/ej2-dropdowns": "~29.1.38",
-    "@syncfusion/ej2-inputs": "~29.1.38",
-    "@syncfusion/ej2-navigations": "~29.1.38",
-    "@syncfusion/ej2-popups": "~29.1.37",
-    "@syncfusion/ej2-splitbuttons": "~29.1.33"
+    "@syncfusion/ej2-base": "~29.2.4",
+    "@syncfusion/ej2-buttons": "~29.2.5",
+    "@syncfusion/ej2-dropdowns": "~29.2.5",
+    "@syncfusion/ej2-inputs": "~29.2.5",
+    "@syncfusion/ej2-navigations": "~29.2.5",
+    "@syncfusion/ej2-popups": "~29.2.4",
+    "@syncfusion/ej2-splitbuttons": "~29.2.4"
   },
   "deprecated": false,
   "description": "Essential JS 2 ImageEditor",
@@ -68,7 +68,7 @@
     "url": "https://github.com/syncfusion/ej2-javascript-ui-controls/tree/master/controls/imageeditor"
   },
   "typings": "index.d.ts",
-  "version": "29.1.38",
+  "version": "29.2.5",
   "sideEffects": false,
   "homepage": "https://www.syncfusion.com/javascript-ui-controls"
 }

package/src/image-editor/action/draw.js

@@ -2560,6 +2560,7 @@ var Draw = /** @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;

package/src/image-editor/action/transform.js

@@ -1632,6 +1632,7 @@ var Transform = /** @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;

package/src/image-editor/base/image-editor-model.d.ts

@@ -434,6 +434,31 @@ export interface ImageEditorModel extends ComponentModel{
      */
     quickAccessToolbarTemplate?: string | Function;
 
+    /**
+     * Determines whether high-quality images should be smoothed when rendered.
+     *
+     * @default false
+     *
+     * @remarks
+     *
+     * When enabled (`true`), the image will be smoothed, reducing pixelation at the cost of sharpness.
+     *
+     * When disabled (`false`), the image will be rendered with crisp, unaltered pixels.
+     *
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     *     imageSmoothingEnabled: true
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
+     */
+    imageSmoothingEnabled?: boolean;
+
     /**
      * Specifies whether to prevent user interaction with the image editor control.
      * A boolean that specifies whether to prevent the interaction in image editor control. The default value is false.

package/src/image-editor/base/image-editor.d.ts

@@ -607,6 +607,30 @@ export declare class ImageEditor extends Component<HTMLDivElement> implements IN
      * ```
      */
     quickAccessToolbarTemplate: string | Function;
+    /**
+     * Determines whether high-quality images should be smoothed when rendered.
+     *
+     * @default false
+     *
+     * @remarks
+     *
+     * When enabled (`true`), the image will be smoothed, reducing pixelation at the cost of sharpness.
+     *
+     * When disabled (`false`), the image will be rendered with crisp, unaltered pixels.
+     *
+     * ```html
+     * <div id='imageeditor'></div>
+     * ```
+     * ```typescript
+     * <script>
+     * var imageObj = new ImageEditor({
+     *     imageSmoothingEnabled: true
+     * });
+     * imageObj.appendTo("#imageeditor");
+     * </script>
+     * ```
+     */
+    imageSmoothingEnabled: boolean;
     /**
      * Specifies whether to prevent user interaction with the image editor control.
      * A boolean that specifies whether to prevent the interaction in image editor control. The default value is false.

package/src/image-editor/base/image-editor.js

@@ -541,6 +541,17 @@ var ImageEditor = /** @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;
             }
         }
     };
@@ -4686,6 +4697,9 @@ var ImageEditor = /** @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);

package/src/image-editor/renderer/toolbar.d.ts

@@ -70,6 +70,7 @@ export declare class ToolbarModule {
     private renderCropBtn;
     private renderTransformBtn;
     private saveDialogPopup;
+    private updateSavePreviewImage;
     private saveDialogClosed;
     private onBeforeopen;
     private qualityBtnClickHandler;

package/src/image-editor/renderer/toolbar.js

@@ -1727,6 +1727,47 @@ var ToolbarModule = /** @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) {
@@ -1827,6 +1868,7 @@ var ToolbarModule = /** @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');
@@ -1882,12 +1924,14 @@ var ToolbarModule = /** @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');
@@ -1908,6 +1952,7 @@ var ToolbarModule = /** @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) {
@@ -1924,7 +1969,11 @@ var ToolbarModule = /** @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);
@@ -1940,20 +1989,12 @@ var ToolbarModule = /** @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) {
@@ -1974,6 +2015,7 @@ var ToolbarModule = /** @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];
@@ -1999,6 +2041,7 @@ var ToolbarModule = /** @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;
@@ -4669,6 +4712,7 @@ var ToolbarModule = /** @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 } });

package/styles/bds-lite.css

@@ -624,8 +624,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bds.css

@@ -624,8 +624,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap-dark-lite.css

@@ -515,8 +515,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap-dark.css

@@ -515,8 +515,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap-lite.css

@@ -515,8 +515,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap.css

@@ -515,8 +515,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap4-lite.css

@@ -514,8 +514,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap4.css

@@ -514,8 +514,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap5-dark-lite.css

@@ -520,8 +520,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap5-dark.css

@@ -520,8 +520,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap5-lite.css

@@ -520,8 +520,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap5.3-lite.css

@@ -524,8 +524,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap5.3.css

@@ -524,8 +524,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/bootstrap5.css

@@ -520,8 +520,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fabric-dark-lite.css

@@ -515,8 +515,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fabric-dark.css

@@ -515,8 +515,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fabric-lite.css

@@ -515,8 +515,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fabric.css

@@ -515,8 +515,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fluent-dark-lite.css

@@ -520,8 +520,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fluent-dark.css

@@ -520,8 +520,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fluent-lite.css

@@ -520,8 +520,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fluent.css

@@ -520,8 +520,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fluent2-lite.css

@@ -538,8 +538,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/fluent2.css

@@ -538,8 +538,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/highcontrast-light-lite.css

@@ -514,8 +514,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/highcontrast-light.css

@@ -514,8 +514,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/highcontrast-lite.css

@@ -518,8 +518,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {

package/styles/highcontrast.css

@@ -518,8 +518,8 @@
 }
 
 .e-ie-img-dlg-canvas {
-  width: 100%;
-  height: 100%;
+  width: auto;
+  height: auto;
 }
 
 .e-ie-img-size {