react-native-expo-cropper 1.0.25 → 1.0.27

package/package.json

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

package/src/ImageCropper.js

@@ -40,26 +40,9 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
 }, [openCameraFirst, initialImage]);
 
 
-  useEffect(() => {
-  if (!image) return;
-
-  Image.getSize(image, (imgWidth, imgHeight) => {
-    const screenRatio = SCREEN_WIDTH / SCREEN_HEIGHT;
-    const imageRatio = imgWidth / imgHeight;
-
-    if (imageRatio > screenRatio) {
-      imageMeasure.current = {
-        width: SCREEN_WIDTH,
-        height: SCREEN_WIDTH / imageRatio,
-      };
-    } else {
-      imageMeasure.current = {
-        width: SCREEN_HEIGHT * imageRatio,
-        height: SCREEN_HEIGHT,
-      };
-    }
-  });
-}, [image]);
+  // Measure based strictly on actual layout, not screen ratio
+  // to avoid mismatches that truncate the selectable bottom area
+  // (onImageLayout handles measurement updates)
 
   // Perform capture after UI commits (avoids iOS timer/RAF awaits)
   // iOS capture logic using useEffect with overlay readiness
@@ -96,6 +79,53 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
     return () => { cancelled = true; };
   }, [captureRequested, showResult, overlayReady, addheight, onConfirm]);
 
+  // Helpers to compute crop rectangle in original image pixels
+  const getImageSizeAsync = (uri) =>
+    new Promise((resolve, reject) => {
+      Image.getSize(uri, (w, h) => resolve({ width: w, height: h }), reject);
+    });
+
+  const computeCropRect = (pts, measure, origW, origH) => {
+    const containerW = measure.width;
+    const containerH = measure.height;
+    if (!containerW || !containerH || !origW || !origH || !pts || pts.length === 0) return null;
+
+    const ratio = origH / origW;
+    let dispW, dispH, offX, offY;
+    if (containerW * ratio <= containerH) {
+      // image constrained by width
+      dispW = containerW;
+      dispH = containerW * ratio;
+      offX = 0;
+      offY = (containerH - dispH) / 2;
+    } else {
+      // image constrained by height
+      dispH = containerH;
+      dispW = containerH / ratio;
+      offY = 0;
+      offX = (containerW - dispW) / 2;
+    }
+
+    const xs = pts.map(p => Math.max(0, Math.min(dispW, p.x - offX)));
+    const ys = pts.map(p => Math.max(0, Math.min(dispH, p.y - offY)));
+    const minX = Math.min(...xs);
+    const maxX = Math.max(...xs);
+    const minY = Math.min(...ys);
+    const maxY = Math.max(...ys);
+
+    const normMinX = minX / dispW;
+    const normMaxX = maxX / dispW;
+    const normMinY = minY / dispH;
+    const normMaxY = maxY / dispH;
+
+    const originX = Math.round(normMinX * origW);
+    const originY = Math.round(normMinY * origH);
+    const widthPx = Math.round((normMaxX - normMinX) * origW);
+    const heightPx = Math.round((normMaxY - normMinY) * origH);
+
+    return { x: originX, y: originY, width: widthPx, height: heightPx };
+  };
+
 
   const initializeCropBox = () => {
     const { width, height } = imageMeasure.current;
@@ -160,26 +190,6 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
     const boundedX = Math.max(0, Math.min(moveX, width));
     const boundedY = Math.max(0, Math.min(moveY, height));
   
-    const edgeThreshold = 10;
-    const isNearTopOrBottomEdge =
-      boundedY <= edgeThreshold || boundedY >= height - edgeThreshold;
-  
-    const isNearLeftOrRightEdge =
-      boundedX <= edgeThreshold || boundedX >= width - edgeThreshold;
-  
-    if (isNearTopOrBottomEdge || isNearLeftOrRightEdge) {
-      // Reset point to last known position
-      if (lastValidPosition.current && selectedPointIndex.current !== null) {
-        setPoints(prev =>
-          prev.map((p, i) =>
-            i === selectedPointIndex.current ? lastValidPosition.current : p
-          )
-        );
-      }
-      selectedPointIndex.current = null;
-      return;
-    }
-  
     // Valid move — update point and store as new last valid position
     const updatedPoint = { x: boundedX, y: boundedY };
     lastValidPosition.current = updatedPoint;
@@ -211,8 +221,8 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
         />
       ) : (
         <>
-          {!showResult && (
-            <View style={image ? styles.buttonContainer : styles.centerButtonsContainer}>
+          {!showResult && !image && (
+            <View pointerEvents="box-none" style={styles.centerButtonsContainer}>
  
               {image && (
                 <TouchableOpacity style={styles.button} onPress={handleReset}>
@@ -255,7 +265,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                       }
                     }
                   }}
-  >
+              >
     <Text style={styles.buttonText}>Confirm</Text>
   </TouchableOpacity>
 )}
@@ -276,6 +286,7 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
             >
               <Image source={{ uri: image }} style={styles.image} onLayout={onImageLayout} />
               <Svg
+                pointerEvents="none"
                 key={showResult ? 'mask' : 'edit'}
                 style={styles.overlay}
                 onLayout={() => {
@@ -294,6 +305,33 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
                   <Circle key={index} cx={point.x} cy={point.y} r={10} fill="white" />
                 ))}
               </Svg>
+           </View>
+          )}
+          {!showResult && image && (
+            <View style={styles.buttonContainer}>
+              <TouchableOpacity style={styles.button} onPress={handleReset}>
+                <Text style={styles.buttonText}>Reset</Text>
+              </TouchableOpacity>
+              <TouchableOpacity
+                style={styles.button}
+                onPress={async () => {
+                  try {
+                    setIsLoading(true);
+                    const { width: origW, height: origH } = await getImageSizeAsync(image);
+                    const rect = computeCropRect(points, imageMeasure.current, origW, origH);
+                    const enhancedUri = await enhanceImage(image, addheight, rect);
+                    const name = `IMAGE XTK${Date.now()}.png`;
+                    if (onConfirm) onConfirm(enhancedUri, name);
+                  } catch (error) {
+                    console.error('Erreur lors de la capture :', error);
+                    alert('Erreur lors de la capture !');
+                  } finally {
+                    setIsLoading(false);
+                  }
+                }}
+              >
+                <Text style={styles.buttonText}>Confirm</Text>
+              </TouchableOpacity>
             </View>
           )}
         </>

package/src/ImageCropperStyles.js

@@ -15,27 +15,22 @@ const styles = StyleSheet.create({
     backgroundColor: DEEP_BLACK,
   },
   buttonContainer: {
-    position: 'absolute',
-    bottom: 50,
-    left: 0,
-    right: 0,
     flexDirection: 'row',
-    flexWrap: 'wrap',
-    justifyContent: 'center',
+    justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 10,
-    zIndex: 10,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    width: '100%',
+    backgroundColor: DEEP_BLACK,
+    gap: 10,
   },
   button: {
     flex: 1,
-    width: "100%",
-    padding: 10,
+    paddingVertical: 12,
     alignItems: "center",
     justifyContent: "center",
     backgroundColor: "#549433",
-    borderRadius: 5,
-    marginBottom: 20,
-    marginRight:5,
+    borderRadius: 8,
   },
   buttonText: {
     color: 'white',
@@ -50,13 +45,13 @@ const styles = StyleSheet.create({
     textAlign: 'center',
   },
   imageContainer: {
-  width: IMAGE_WIDTH,
-  height: "80%",
-  justifyContent: 'center',
-  alignItems: 'center',
-  overflow: 'hidden',
-  backgroundColor: 'black',
-},
+    width: IMAGE_WIDTH,
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    overflow: 'hidden',
+    backgroundColor: 'black',
+  },
 
   image: {
   width: '100%',

package/src/ImageProcessor.js

@@ -1,28 +1,45 @@
-import * as ImageManipulator from 'expo-image-manipulator';
-
-export const enhanceImage = async (uri , addheight) => {
-  try {
-    const imageInfo = await ImageManipulator.manipulateAsync(uri, []);
-    const ratio = imageInfo.height / imageInfo.width;
-
-    const maxHeight = addheight;
-    const newWidth = Math.round(maxHeight / ratio);
-    const newHeight = Math.round(newWidth * ratio);
-
-    const result = await ImageManipulator.manipulateAsync(
-      uri,
-      [
-        { resize: { width: newWidth, height: newHeight } },
-      ],
-      {
-        compress: 1,
-        format: ImageManipulator.SaveFormat.PNG
-      }
-    );
-
-    return result.uri;
-  } catch (error) {
-    console.error("Erreur T404K:", error);
-    return uri;
-  }
+import * as ImageManipulator from 'expo-image-manipulator';
+
+// Crop the image to the provided rectangle (in original image pixels), then resize.
+// cropRect: { x, y, width, height } in original image coordinates
+export const enhanceImage = async (uri, addheight, cropRect) => {
+  try {
+    const actions = [];
+    if (cropRect && cropRect.width > 0 && cropRect.height > 0) {
+      actions.push({
+        crop: {
+          originX: Math.round(cropRect.x),
+          originY: Math.round(cropRect.y),
+          width: Math.round(cropRect.width),
+          height: Math.round(cropRect.height),
+        },
+      });
+    }
+
+    // First: crop (if requested)
+    const cropped = await ImageManipulator.manipulateAsync(uri, actions, {
+      compress: 1,
+      format: ImageManipulator.SaveFormat.PNG,
+    });
+
+    // Then: resize to requested height while preserving aspect ratio
+    const targetHeight = addheight || cropped.height;
+    const ratio = cropped.height / cropped.width;
+    const newWidth = Math.round(targetHeight / ratio);
+    const newHeight = Math.round(newWidth * ratio);
+
+    const result = await ImageManipulator.manipulateAsync(
+      cropped.uri,
+      [{ resize: { width: newWidth, height: newHeight } }],
+      {
+        compress: 1,
+        format: ImageManipulator.SaveFormat.PNG,
+      }
+    );
+
+    return result.uri;
+  } catch (error) {
+    console.error('Erreur T404K:', error);
+    return uri;
+  }
 };