@acorex/components 20.8.24 → 20.8.26

package/fesm2022/acorex-components-image-editor.mjs

@@ -529,23 +529,28 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         this.saveImageChange();
     }
     /** @ignore */
-    crop() {
+    async crop() {
         const cropper = this.cropperWindow();
         if (this.service.activeToolState() !== 'crop' || !cropper) {
             return;
         }
         const cropRect = cropper.getCropperArea();
-        const canvasRect = this.canvasElem().nativeElement.getClientRects()[0];
-        const dx = cropRect.x - canvasRect.x;
-        const dy = cropRect.y - canvasRect.y;
-        const imageData = this.ctx().getImageData(dx, dy, cropRect.width, cropRect.height);
-        this.canvasElem().nativeElement.width = cropRect.width;
-        this.canvasElem().nativeElement.height = cropRect.height;
+        const canvas = this.canvasElem().nativeElement;
+        const canvasRect = canvas.getBoundingClientRect();
+        const scaleX = canvas.width / canvasRect.width;
+        const scaleY = canvas.height / canvasRect.height;
+        const dx = (cropRect.x - canvasRect.x) * scaleX;
+        const dy = (cropRect.y - canvasRect.y) * scaleY;
+        const cropWidth = cropRect.width * scaleX;
+        const cropHeight = cropRect.height * scaleY;
+        const imageData = this.ctx().getImageData(Math.round(dx), Math.round(dy), Math.round(cropWidth), Math.round(cropHeight));
+        canvas.width = Math.round(cropWidth);
+        canvas.height = Math.round(cropHeight);
         this.ctx().putImageData(imageData, 0, 0);
         const cropImage = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
+        await this.saveImageChange();
         this.setInitialImage(cropImage, false);
         this.service.activeToolState.set(null);
-        this.saveImageChange();
     }
     /** @ignore */
     rotateImage() {
@@ -629,8 +634,13 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
     }
     #eff;
     /** Applies the current cropper selection. */
-    crop() {
-        this.view()?.crop();
+    async crop() {
+        const oldValue = this.value;
+        await this.view()?.crop();
+        const blobs = this.service.imageBlob();
+        if (blobs.length && this.value === oldValue) {
+            this.commitValue(blobs, true);
+        }
     }
     get __hostClass() {
         if (this.disabled)