@acorex/components 21.0.3-next.15 → 21.0.3-next.17

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

@@ -535,12 +535,17 @@ class AXImageEditorViewComponent extends MXBaseComponent {
             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();
@@ -634,7 +639,7 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
         await this.view()?.crop();
         const blobs = this.service.imageBlob();
         if (blobs.length && this.value === oldValue) {
-            this.emitOnValueChangedEvent(oldValue, blobs);
+            this.commitValue(blobs, true);
         }
     }
     get __hostClass() {