react-native-expo-cropper 1.0.26 → 1.0.27

package/package.json

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

package/src/ImageCropper.js

@@ -79,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;
@@ -143,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;
@@ -288,35 +315,18 @@ const ImageCropper = ({ onConfirm, openCameraFirst, initialImage ,addheight}) =>
               <TouchableOpacity
                 style={styles.button}
                 onPress={async () => {
-                  setIsLoading(true);
-                  setShowResult(true);
-                  setOverlayReady(false);
-                  setCaptureRequested(true);
-
-                  if (Platform.OS === 'android') {
-                    try {
-                      await new Promise((resolve) => requestAnimationFrame(resolve));
-                      const capturedUri = await captureRef(viewRef.current, {
-                        format: 'png',
-                        quality: 1,
-                      });
-                      const enhancedUri = await enhanceImage(capturedUri, addheight);
-                      const name = `IMAGE XTK${Date.now()}.png`;
-
-                      if (onConfirm) {
-                        onConfirm(enhancedUri, name);
-                      }
-
-                      setShowResult(false);
-                      setIsLoading(false);
-                      setShowFullScreenCapture(false);
-                      setCaptureRequested(false);
-                      setOverlayReady(false);
-                    } catch (error) {
-                      console.error('Erreur lors de la capture :', error);
-                      alert('Erreur lors de la capture !');
-                      setIsLoading(false);
-                    }
+                  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);
                   }
                 }}
               >

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;
+  }
 };