Fix cropper bug with crop region

trylogout · Aug 1, 2023 · 30a3188 · 30a3188
1 parent 1b9fac6
commit 30a3188
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 54 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mini-react-cropper",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A versatile image cropping component for React applications",
   "main": "index.ts",
   "types": "types/CropperComponent.d.ts",

diff --git a/src/CropperComponent.js b/src/CropperComponent.js
@@ -81,33 +81,39 @@ var MiniCropper = function (_a) {
     (0, react_1.useEffect)(function () {
         var imageElement = imageRef.current;
         if (imageElement) {
+            var quality_1 = calculateImageQuality(imageElement.width, imageElement.height);
             imageElement.onload = function () {
-                var renderImage = function (sourceImage, quality) {
-                    return new Promise(function (resolve) {
-                        var canvas = document.createElement('canvas');
-                        var ctx = canvas.getContext('2d', { willReadFrequently: true, desynchronized: true });
-                        if (ctx) {
-                            var scale = sourceImage.naturalWidth / (sourceImage.width * zoomLevel);
-                            var x = cropperData.x, y = cropperData.y, width = cropperData.width, height = cropperData.height;
-                            canvas.width = width * scale;
-                            canvas.height = height * scale;
-                            ctx.drawImage(imageElement, x * scale, y * scale, width * scale, height * scale, 0, 0, width * scale, height * scale);
-                        }
-                        var dataUrl = canvas.toDataURL('image/jpeg', quality);
-                        onCropAreaChange(dataUrl);
-                        setCroppedImage(dataUrl);
-                    });
-                };
-                var quality = calculateImageQuality(imageElement.width, imageElement.height);
-                if (quality === 1) {
-                    renderImage(imageElement, 1).then(function (r) { return setIsLoading(false); });
+                if (quality_1 === 1) {
+                    renderImage_1(imageElement, 1).then(function (r) { return setIsLoading(false); });
                 }
                 else {
-                    renderImage(imageElement, quality).then(function (r) { return setIsLoading(false); });
+                    renderImage_1(imageElement, quality_1).then(function (r) { return setIsLoading(false); });
                 }
             };
-            setTimeout(function () { return setIsLoading(false); }, 500);
+            var renderImage_1 = function (sourceImage, quality) {
+                return new Promise(function (resolve) {
+                    var canvas = document.createElement('canvas');
+                    var ctx = canvas.getContext('2d', { willReadFrequently: true, desynchronized: true });
+                    if (ctx) {
+                        var scale = sourceImage.naturalWidth / (sourceImage.width * zoomLevel);
+                        var x = cropperData.x, y = cropperData.y, width = cropperData.width, height = cropperData.height;
+                        canvas.width = width * scale;
+                        canvas.height = height * scale;
+                        ctx.drawImage(imageElement, x * scale, y * scale, width * scale, height * scale, 0, 0, width * scale, height * scale);
+                    }
+                    var dataUrl = canvas.toDataURL('image/jpeg', quality);
+                    onCropAreaChange(dataUrl);
+                    setCroppedImage(dataUrl);
+                });
+            };
+            if (quality_1 === 1) {
+                renderImage_1(imageElement, 1).then(function (r) { return setIsLoading(false); });
+            }
+            else {
+                renderImage_1(imageElement, quality_1).then(function (r) { return setIsLoading(false); });
+            }
         }
+        setTimeout(function () { return setIsLoading(false); }, 500);
     }, [cropperData, zoomLevel]);
     var handleDragStart = function (event) {
         if (processing)

diff --git a/src/CropperComponent.tsx b/src/CropperComponent.tsx
@@ -153,46 +153,53 @@ const MiniCropper: React.FC<MiniCropperProps> = ({
     const imageElement = imageRef.current;
 
     if (imageElement) {
-      imageElement.onload = function () {
-        const renderImage = (sourceImage: HTMLImageElement, quality: number): Promise<Blob> =>
-          new Promise((resolve) => {
-            const canvas = document.createElement('canvas');
-            const ctx = canvas.getContext('2d', { willReadFrequently: true, desynchronized: true });
-
-            if (ctx) {
-              const scale = sourceImage.naturalWidth / (sourceImage.width * zoomLevel);
-              const { x, y, width, height } = cropperData;
-              canvas.width = width * scale;
-              canvas.height = height * scale;
-
-              ctx.drawImage(
-                imageElement,
-                x * scale,
-                y * scale,
-                width * scale,
-                height * scale,
-                0,
-                0,
-                width * scale,
-                height * scale,
-              );
-            }
-
-            const dataUrl = canvas.toDataURL('image/jpeg', quality);
-            onCropAreaChange(dataUrl);
-            setCroppedImage(dataUrl);
-          });
-
-        const quality = calculateImageQuality(imageElement.width, imageElement.height);
+      const quality = calculateImageQuality(imageElement.width, imageElement.height);
 
+      imageElement.onload = function () {
         if (quality === 1) {
           renderImage(imageElement, 1).then((r) => setIsLoading(false));
         } else {
           renderImage(imageElement, quality).then((r) => setIsLoading(false));
         }
       };
-      setTimeout(() => setIsLoading(false), 500);
+
+      const renderImage = (sourceImage: HTMLImageElement, quality: number): Promise<Blob> =>
+        new Promise((resolve) => {
+          const canvas = document.createElement('canvas');
+          const ctx = canvas.getContext('2d', { willReadFrequently: true, desynchronized: true });
+
+          if (ctx) {
+            const scale = sourceImage.naturalWidth / (sourceImage.width * zoomLevel);
+            const { x, y, width, height } = cropperData;
+            canvas.width = width * scale;
+            canvas.height = height * scale;
+
+            ctx.drawImage(
+              imageElement,
+              x * scale,
+              y * scale,
+              width * scale,
+              height * scale,
+              0,
+              0,
+              width * scale,
+              height * scale,
+            );
+          }
+
+          const dataUrl = canvas.toDataURL('image/jpeg', quality);
+          onCropAreaChange(dataUrl);
+          setCroppedImage(dataUrl);
+        });
+
+      if (quality === 1) {
+        renderImage(imageElement, 1).then((r) => setIsLoading(false));
+      } else {
+        renderImage(imageElement, quality).then((r) => setIsLoading(false));
+      }
     }
+
+    setTimeout(() => setIsLoading(false), 500);
   }, [cropperData, zoomLevel]);
 
   const handleDragStart = (event: React.MouseEvent<HTMLDivElement>) => {