Sync from GitHub: c4c615ffc9be9af88c27315300a80d370d17d13d

frontend/src/components/ResultCard.jsx

@@ -10,6 +10,7 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
   const [resolution, setResolution] = useState(100);
   const [adjustedDataUrl, setAdjustedDataUrl] = useState(null);
   const [previewDimensions, setPreviewDimensions] = useState({ width: 0, height: 0 });
+  const [currentImageData, setCurrentImageData] = useState(imageData);
 
   // Function to crop image regions
   const cropRegion = (img, coords, scaleX, scaleY) => {
@@ -34,8 +35,9 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
     return cropCanvas.toDataURL();
   };
 
+  // Main effect to draw image with bounding boxes using currentImageData
   useEffect(() => {
-    if (!imageData || !canvasRef.current) return;
+    if (!currentImageData || !canvasRef.current) return;
 
     const canvas = canvasRef.current;
     const ctx = canvas.getContext('2d');
@@ -68,15 +70,19 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
       const scaleX = width / img.width;
       const scaleY = height / img.height;
 
-      // Create cropped images for signature and stamp
-      if (result.signature_coords && result.signature_coords.length > 0) {
-        const sigCrop = cropRegion(img, result.signature_coords, 1, 1);
-        setSignatureCrop(sigCrop);
-      }
-      if (result.stamp_coords && result.stamp_coords.length > 0) {
-        const stCrop = cropRegion(img, result.stamp_coords, 1, 1);
-        setStampCrop(stCrop);
-      }
+      // Create cropped images for signature and stamp from ORIGINAL imageData
+      const originalImg = new Image();
+      originalImg.onload = () => {
+        if (result.signature_coords && result.signature_coords.length > 0) {
+          const sigCrop = cropRegion(originalImg, result.signature_coords, 1, 1);
+          setSignatureCrop(sigCrop);
+        }
+        if (result.stamp_coords && result.stamp_coords.length > 0) {
+          const stCrop = cropRegion(originalImg, result.stamp_coords, 1, 1);
+          setStampCrop(stCrop);
+        }
+      };
+      originalImg.src = imageData;
 
       // Draw bounding boxes for signature
       if (result.signature_coords && result.signature_coords.length > 0) {
@@ -123,10 +129,10 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
       }
     };
 
-    img.src = imageData;
-  }, [imageData, result]);
+    img.src = currentImageData;
+  }, [currentImageData, imageData, result]);
 
-  // Handle resolution adjustment for preview
+  // Handle resolution adjustment for preview and update currentImageData
   useEffect(() => {
     if (!imageData || !previewCanvasRef.current) return;
 
@@ -148,6 +154,9 @@ const ResultCard = ({ result, imageData, onReprocess, isProcessing }) => {
       // Generate adjusted data URL
       const adjustedUrl = canvas.toDataURL('image/jpeg', 0.95);
       setAdjustedDataUrl(adjustedUrl);
+      
+      // Update the current image data to reflect resolution change
+      setCurrentImageData(adjustedUrl);
     };
 
     img.src = imageData;