react-native-expo-cropper 1.2.41 → 1.2.43

package/dist/ImageCropper.js

@@ -445,13 +445,14 @@ var ImageCropper = function ImageCropper(_ref) {
     var imageRectY = wrapper.y + imageRect.y;
 
     // ✅ PRIORITY RULE #3: IF image comes from camera → Use EXACT green frame coordinates
-    // Image is displayed in "cover" mode (full wrapper), so green frame coords = white frame coords
+    // Image is displayed in "cover" mode (full wrapper), so green frame coords = white frame coords.
+    // Store points in WRAPPER-RELATIVE coordinates (greenFrame.x, greenFrame.y) so they match
+    // touch events (locationX/locationY are relative to the wrapper). This keeps display→image
+    // conversion correct in Confirm.
     if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
       var greenFrame = cameraFrameData.current.greenFrame;
-
-      // ✅ Image fills wrapper (cover mode), so use green frame position directly in wrapper space
-      var _boxX = wrapper.x + greenFrame.x;
-      var _boxY = wrapper.y + greenFrame.y;
+      var _boxX = greenFrame.x;
+      var _boxY = greenFrame.y;
       var _boxWidth = greenFrame.width;
       var _boxHeight = greenFrame.height;
 
@@ -464,7 +465,7 @@ var ImageCropper = function ImageCropper(_ref) {
         return;
       }
 
-      // ✅ Create points using EXACT greenFrame coordinates (mapped to ImageCropper wrapper)
+      // ✅ Points in wrapper-relative coords (same as touch events)
       var _newPoints = [{
         x: _boxX,
         y: _boxY
@@ -507,7 +508,7 @@ var ImageCropper = function ImageCropper(_ref) {
           width: _boxWidth.toFixed(2),
           height: _boxHeight.toFixed(2)
         },
-        note: "Image in cover mode - white frame = same position/size as green frame, same content"
+        note: "Points in wrapper-relative coords - same as touch events and crop_image_size"
       });
       setPoints(_newPoints);
       hasInitializedCropBox.current = true; // ✅ CRITICAL: Mark as initialized
@@ -1243,6 +1244,15 @@ var ImageCropper = function ImageCropper(_ref) {
             });
           case 4:
             rotated = _context.v;
+            // ✅ Send rotated image to backend: use rotated URI and dimensions so crop bbox matches
+            sourceImageUri.current = rotated.uri;
+            originalImageDimensions.current = {
+              width: rotated.width,
+              height: rotated.height
+            };
+            cameraFrameData.current = null; // rotated image is no longer "camera preview" frame
+            imageSource.current = 'gallery'; // so layout callbacks run initializeCropBox() and show the white box
+
             setPoints([]);
             hasInitializedCropBox.current = false;
             setImage(rotated.uri);
@@ -1470,7 +1480,7 @@ var ImageCropper = function ImageCropper(_ref) {
   }, "Reset")), /*#__PURE__*/_react["default"].createElement(_reactNative.TouchableOpacity, {
     style: _ImageCropperStyles["default"].button,
     onPress: /*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var actualImageWidth, actualImageHeight, layout, contentRect, displayedWidth, displayedHeight, isCoverMode, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, name, _t2;
+      var _cameraFrameData$curr4, actualImageWidth, actualImageHeight, isCoverMode, captured, layout, contentRect, displayedWidth, displayedHeight, scale, coverOffsetX, coverOffsetY, scaledWidth, scaledHeight, originalUri, cropMeta, imagePoints, minX, minY, maxX, maxY, cropX, cropY, cropEndX, cropEndY, cropWidth, cropHeight, bbox, polygon, name, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
@@ -1478,7 +1488,25 @@ var ImageCropper = function ImageCropper(_ref) {
             _context2.p = 1;
             console.log("=== Starting pixel-perfect metadata export (no bitmap crop on mobile) ===");
             actualImageWidth = originalImageDimensions.current.width;
-            actualImageHeight = originalImageDimensions.current.height;
+            actualImageHeight = originalImageDimensions.current.height; // ✅ CRITICAL: Camera JPEGs often have EXIF 6 (90° CW). The Image component displays
+            // the EXIF-corrected view (3120×4160 portrait) but takePictureAsync returns raw (4160×3120).
+            // Use swapped dimensions for coordinate conversion so bbox matches what the user sees.
+            isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
+            captured = (_cameraFrameData$curr4 = cameraFrameData.current) === null || _cameraFrameData$curr4 === void 0 ? void 0 : _cameraFrameData$curr4.capturedImageSize;
+            if (isCoverMode && captured && captured.width > captured.height) {
+              actualImageWidth = captured.height;
+              actualImageHeight = captured.width;
+              console.log("✅ Using EXIF-swapped dimensions for bbox (raw was landscape, display is portrait):", {
+                raw: {
+                  w: captured.width,
+                  h: captured.height
+                },
+                display: {
+                  w: actualImageWidth,
+                  h: actualImageHeight
+                }
+              });
+            }
             if (!(actualImageWidth === 0 || actualImageHeight === 0)) {
               _context2.n = 2;
               break;
@@ -1514,7 +1542,6 @@ var ImageCropper = function ImageCropper(_ref) {
           case 3:
             throw new Error("Displayed image dimensions not available.");
           case 4:
-            isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
             coverOffsetX = 0, coverOffsetY = 0;
             if (isCoverMode) {
               scale = Math.max(displayedWidth / actualImageWidth, displayedHeight / actualImageHeight);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.2.41",
+  "version": "1.2.43",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",

package/src/ImageCropper.js

@@ -334,13 +334,15 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
     const imageRectY = wrapper.y + imageRect.y;
     
     // ✅ PRIORITY RULE #3: IF image comes from camera → Use EXACT green frame coordinates
-    // Image is displayed in "cover" mode (full wrapper), so green frame coords = white frame coords
+    // Image is displayed in "cover" mode (full wrapper), so green frame coords = white frame coords.
+    // Store points in WRAPPER-RELATIVE coordinates (greenFrame.x, greenFrame.y) so they match
+    // touch events (locationX/locationY are relative to the wrapper). This keeps display→image
+    // conversion correct in Confirm.
     if (cameraFrameData.current && cameraFrameData.current.greenFrame && originalImageDimensions.current.width > 0) {
       const greenFrame = cameraFrameData.current.greenFrame;
       
-      // ✅ Image fills wrapper (cover mode), so use green frame position directly in wrapper space
-      const boxX = wrapper.x + greenFrame.x;
-      const boxY = wrapper.y + greenFrame.y;
+      const boxX = greenFrame.x;
+      const boxY = greenFrame.y;
       const boxWidth = greenFrame.width;
       const boxHeight = greenFrame.height;
 
@@ -353,7 +355,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
         return;
       }
       
-      // ✅ Create points using EXACT greenFrame coordinates (mapped to ImageCropper wrapper)
+      // ✅ Points in wrapper-relative coords (same as touch events)
       const newPoints = [
         { x: boxX, y: boxY },                           // Top-left
         { x: boxX + boxWidth, y: boxY },                // Top-right
@@ -371,7 +373,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage, addheight, rot
       console.log("✅ Initializing crop box for camera image (COVER MODE - exact green frame):", {
         greenFrame: { x: greenFrame.x, y: greenFrame.y, width: greenFrame.width, height: greenFrame.height },
         whiteFrame: { x: boxX.toFixed(2), y: boxY.toFixed(2), width: boxWidth.toFixed(2), height: boxHeight.toFixed(2) },
-        note: "Image in cover mode - white frame = same position/size as green frame, same content",
+        note: "Points in wrapper-relative coords - same as touch events and crop_image_size",
       });
 
       setPoints(newPoints);
@@ -1048,6 +1050,15 @@ const rotatePreviewImage = async (degrees) => {
         }
       );
 
+      // ✅ Send rotated image to backend: use rotated URI and dimensions so crop bbox matches
+      sourceImageUri.current = rotated.uri;
+      originalImageDimensions.current = {
+        width: rotated.width,
+        height: rotated.height,
+      };
+      cameraFrameData.current = null; // rotated image is no longer "camera preview" frame
+      imageSource.current = 'gallery'; // so layout callbacks run initializeCropBox() and show the white box
+
       setPoints([]);
       hasInitializedCropBox.current = false;
       setImage(rotated.uri);
@@ -1255,8 +1266,22 @@ const rotatePreviewImage = async (degrees) => {
                         try {
                           console.log("=== Starting pixel-perfect metadata export (no bitmap crop on mobile) ===");
                           
-                          const actualImageWidth = originalImageDimensions.current.width;
-                          const actualImageHeight = originalImageDimensions.current.height;
+                          let actualImageWidth = originalImageDimensions.current.width;
+                          let actualImageHeight = originalImageDimensions.current.height;
+                          
+                          // ✅ CRITICAL: Camera JPEGs often have EXIF 6 (90° CW). The Image component displays
+                          // the EXIF-corrected view (3120×4160 portrait) but takePictureAsync returns raw (4160×3120).
+                          // Use swapped dimensions for coordinate conversion so bbox matches what the user sees.
+                          const isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
+                          const captured = cameraFrameData.current?.capturedImageSize;
+                          if (isCoverMode && captured && captured.width > captured.height) {
+                            actualImageWidth = captured.height;
+                            actualImageHeight = captured.width;
+                            console.log("✅ Using EXIF-swapped dimensions for bbox (raw was landscape, display is portrait):", {
+                              raw: { w: captured.width, h: captured.height },
+                              display: { w: actualImageWidth, h: actualImageHeight },
+                            });
+                          }
                           
                           if (actualImageWidth === 0 || actualImageHeight === 0) {
                             throw new Error("Original image dimensions not available. Please wait for image to load.");
@@ -1287,7 +1312,6 @@ const rotatePreviewImage = async (degrees) => {
                             }
                           }
                           
-                          const isCoverMode = !!(cameraFrameData.current && cameraFrameData.current.greenFrame);
                           let scale, coverOffsetX = 0, coverOffsetY = 0;
                           if (isCoverMode) {
                             scale = Math.max(displayedWidth / actualImageWidth, displayedHeight / actualImageHeight);