From 0fbe7696fa23cd0621d4053b430cec01d72f6801 Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Mon, 25 Nov 2024 22:54:11 -0500
Subject: bug fixes to image cropping

---
 src/client/views/nodes/imageEditor/ImageEditor.tsx | 20 ++++++--------------
 1 file changed, 6 insertions(+), 14 deletions(-)

(limited to 'src/client/views/nodes/imageEditor/ImageEditor.tsx')

diff --git a/src/client/views/nodes/imageEditor/ImageEditor.tsx b/src/client/views/nodes/imageEditor/ImageEditor.tsx
index 5c7e09645..5c4c83eef 100644
--- a/src/client/views/nodes/imageEditor/ImageEditor.tsx
+++ b/src/client/views/nodes/imageEditor/ImageEditor.tsx
@@ -451,21 +451,13 @@ const ImageEditor = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addDoc
         const croppedCanvas = document.createElement('canvas');
         const croppedCtx = croppedCanvas.getContext('2d');
         if (!croppedCtx) return image;
-        croppedCanvas.width = maxX - minX;
-        croppedCanvas.height = maxY - minY;
+        const cropWidth = Math.abs(maxX - minX);
+        const cropHeight = Math.abs(maxY - minY);
+        croppedCanvas.width = cropWidth;
+        croppedCanvas.height = cropHeight;
         croppedCtx.globalCompositeOperation = 'source-over';
-        croppedCtx.clearRect(0, 0, croppedCanvas.width, croppedCanvas.height);
-        croppedCtx.drawImage(
-            image,
-            minX,
-            minY,
-            maxX - minX,
-            maxY - minY, // Source image crop area
-            0,
-            0,
-            maxX - minX,
-            maxY - minY // Destination area on the canvas
-        );
+        croppedCtx.clearRect(0, 0, cropWidth, cropHeight);
+        croppedCtx.drawImage(image, minX, minY, cropWidth, cropHeight, 0, 0, cropWidth, cropHeight);
         const croppedURL = croppedCanvas.toDataURL();
         const croppedImage = new Image();
         croppedImage.src = croppedURL;
-- 
cgit v1.2.3-70-g09d2

