react-native-expo-cropper 1.0.30 → 1.0.31

package/dist/CustomCamera.js

@@ -88,7 +88,9 @@ function CustomCamera(_ref) {
           case 0:
             _context2.p = 0;
             _context2.n = 1;
-            return ImageManipulator.manipulateAsync(uri, [], {
+            return ImageManipulator.manipulateAsync(uri, [],
+            // Empty array = apply EXIF orientation automatically
+            {
               compress: 1,
               format: ImageManipulator.SaveFormat.PNG
             });

package/dist/ImageProcessor.js

@@ -13,21 +13,26 @@ function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.
 function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
 var enhanceImage = exports.enhanceImage = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(uri, addheight) {
-    var imageInfo, ratio, maxHeight, newWidth, newHeight, result, _t;
+    var fixedOrientationImage, ratio, maxHeight, newWidth, newHeight, result, _t;
     return _regenerator().w(function (_context) {
       while (1) switch (_context.p = _context.n) {
         case 0:
           _context.p = 0;
           _context.n = 1;
-          return ImageManipulator.manipulateAsync(uri, []);
+          return ImageManipulator.manipulateAsync(uri, [], {
+            compress: 1,
+            format: ImageManipulator.SaveFormat.PNG
+          });
         case 1:
-          imageInfo = _context.v;
-          ratio = imageInfo.height / imageInfo.width;
+          fixedOrientationImage = _context.v;
+          // Get the correct dimensions after orientation fix
+          // The width and height properties reflect the actual image dimensions after orientation fix
+          ratio = fixedOrientationImage.height / fixedOrientationImage.width;
           maxHeight = addheight;
           newWidth = Math.round(maxHeight / ratio);
-          newHeight = Math.round(newWidth * ratio);
+          newHeight = Math.round(newWidth * ratio); // Resize using the orientation-fixed image
           _context.n = 2;
-          return ImageManipulator.manipulateAsync(uri, [{
+          return ImageManipulator.manipulateAsync(fixedOrientationImage.uri, [{
             resize: {
               width: newWidth,
               height: newHeight

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-expo-cropper",
-  "version": "1.0.30",
+  "version": "1.0.31",
   "description": "Recadrage polygonal d'images.",
   "main": "index.js",
   "author": "PCS AGRI",
@@ -43,7 +43,7 @@
   "homepage": "https://github.com/pcsagri/react-native-expo-cropper#readme",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "babel src --out-dir dist"
+    "build": "npx babel src --out-dir dist"
   },
   "devDependencies": {
     "@babel/cli": "^7.28.3",

package/src/CustomCamera.js

@@ -1,224 +1,232 @@
-import React, { useState, useRef, useEffect } from 'react';
-import {
-  StyleSheet,
-  Text,
-  View,
-  TouchableOpacity,
-  Alert,
-  SafeAreaView,
-  Dimensions,
-  Image,
-} from 'react-native';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { Camera, CameraView } from 'expo-camera';
-import * as ImageManipulator from 'expo-image-manipulator';
-const { width } = Dimensions.get('window');
-
-export default function CustomCamera({ onPhotoCaptured}) {
-  const [isReady, setIsReady] = useState(false);
-  const [loadingBeforeCapture, setLoadingBeforeCapture] = useState(false);
-  const [setHasPermission] = useState(null);
-  const cameraRef = useRef(null);
-  const insets = useSafeAreaInsets();
-
- 
-
-useEffect(() => {
-  (async () => {
-    const { status } = await Camera.requestCameraPermissionsAsync();
-    setHasPermission(status === 'granted');
-  })();
-}, []);
-
-
-
-  // Helper function to wait for multiple render cycles (works on iOS)
-  const waitForRender = (cycles = 5) => {
-    return new Promise((resolve) => {
-      let count = 0;
-      const tick = () => {
-        count++;
-        if (count >= cycles) {
-          resolve();
-        } else {
-          setImmediate(tick);
-        }
-      };
-      setImmediate(tick);
-    });
-  };
-
-  // Helper function to fix image orientation (removes EXIF orientation)
-  const fixImageOrientation = async (uri) => {
-    try {
-      // Use manipulateAsync with empty array to fix orientation based on EXIF data
-      const fixedImage = await ImageManipulator.manipulateAsync(uri, [], {
-        compress: 1,
-        format: ImageManipulator.SaveFormat.PNG
-      });
-      return fixedImage.uri;
-    } catch (error) {
-      console.error("Error fixing image orientation:", error);
-      return uri; // Return original if fixing fails
-    }
-  };
-
-  const takePicture = async () => {
-    if (cameraRef.current) {
-      try {
-        // Show loading after a delay (using setImmediate for iOS compatibility)
-        waitForRender(20).then(() => {
-          setLoadingBeforeCapture(true);
-        });
-  
-        // Wait a bit before taking picture (works on iOS)
-        await waitForRender(3);
-  
-        const photo = await cameraRef.current.takePictureAsync({
-        quality: 1,
-        shutterSound: false,
-      });
-
-        // Fix orientation to preserve vertical/horizontal position as taken
-        const fixedUri = await fixImageOrientation(photo.uri);
-  
-        onPhotoCaptured(fixedUri);
-  
-        setLoadingBeforeCapture(false);
-      } catch (error) {
-        setLoadingBeforeCapture(false);
-        Alert.alert("Erreur");
-      }
-    }
-  };
-  
-
-  return (
-    <SafeAreaView style={styles.outerContainer}>
-      <View style={styles.cameraWrapper}>
-        <CameraView
-          style={styles.camera}
-          facing="back"
-          ref={cameraRef}
-          onCameraReady={() => setIsReady(true)}
-        />
-
-        {/* Loading overlay */}
-        {loadingBeforeCapture && (
-          <>
-            <View style={styles.loadingOverlay}>
-              <Image
-                source={require('../src/assets/loadingCamera.gif')}
-                style={styles.loadingGif}
-                resizeMode="contain"
-              />
-            </View>
-            <View style={styles.touchBlocker} pointerEvents="auto" />
-          </>
-        )}
-
-        {/* Cadre de scan */}
-        <View style={styles.scanFrame} />
-      </View>
-
-      <View style={[styles.buttonContainer, { bottom: (insets?.bottom || 0) + 16, marginBottom: 0 }]}>
-        <TouchableOpacity
-          style={styles.button}
-          onPress={takePicture}
-          disabled={!isReady || loadingBeforeCapture}
-        />
-      </View>
-    </SafeAreaView>
-  );
-}
-
-const PRIMARY_GREEN = '#198754';
-const DEEP_BLACK = '#0B0B0B';
-const GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
-
-const styles = StyleSheet.create({
-  outerContainer: {
-    flex: 1,
-    backgroundColor: DEEP_BLACK,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  cameraWrapper: {
-    width: width,
-    aspectRatio: 9 / 16,
-    borderRadius: 30,
-    overflow: 'hidden',
-    alignItems: 'center',
-    justifyContent: 'center',
-    position: 'relative',
-  },
-  camera: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  scanFrame: {
-    position: 'absolute',
-    width: '95%',
-    height: '80%',
-    borderWidth: 4,
-    borderColor: PRIMARY_GREEN,
-    borderRadius: 5,
-    backgroundColor: 'rgba(0, 0, 0, 0.1)',
-  },
-  loadingOverlay: {
-    ...StyleSheet.absoluteFillObject,
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
-    zIndex: 20,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  loadingGif: {
-    width: 100,
-    height: 100,
-  },
-  touchBlocker: {
-    ...StyleSheet.absoluteFillObject,
-    zIndex: 21,
-    backgroundColor: 'transparent',
-  },
-  cancelIcon: {
-    position: 'absolute',
-    top: 20,
-    left: 20,
-    backgroundColor: PRIMARY_GREEN,
-    borderRadius: 5,
-    padding: 8,
-  },
-  buttonContainer: {
-    position: 'absolute',
-    bottom: 0,
-    marginBottom: 20,
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
-  button: {
-    width: 80,
-    height: 80,
-    borderRadius: 50,
-    backgroundColor: GLOW_WHITE,
-    borderWidth: 5,
-    borderColor: PRIMARY_GREEN,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  text: {
-    fontSize: 18,
-    color: GLOW_WHITE,
-  },
-  container: {
-    flex: 1,
-    backgroundColor: DEEP_BLACK,
-    justifyContent: 'center',
-    alignItems: 'center',
-    padding: 20,
-  },
-  iconText: {
-    fontSize: 18,
-    color: GLOW_WHITE,
-    fontWeight: '600',
-  },
-});
+import React, { useState, useRef, useEffect } from 'react';
+import {
+  StyleSheet,
+  Text,
+  View,
+  TouchableOpacity,
+  Alert,
+  SafeAreaView,
+  Dimensions,
+  Image,
+} from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Camera, CameraView } from 'expo-camera';
+import * as ImageManipulator from 'expo-image-manipulator';
+const { width } = Dimensions.get('window');
+
+export default function CustomCamera({ onPhotoCaptured}) {
+  const [isReady, setIsReady] = useState(false);
+  const [loadingBeforeCapture, setLoadingBeforeCapture] = useState(false);
+  const [setHasPermission] = useState(null);
+  const cameraRef = useRef(null);
+  const insets = useSafeAreaInsets();
+
+ 
+
+useEffect(() => {
+  (async () => {
+    const { status } = await Camera.requestCameraPermissionsAsync();
+    setHasPermission(status === 'granted');
+  })();
+}, []);
+
+
+
+  // Helper function to wait for multiple render cycles (works on iOS)
+  const waitForRender = (cycles = 5) => {
+    return new Promise((resolve) => {
+      let count = 0;
+      const tick = () => {
+        count++;
+        if (count >= cycles) {
+          resolve();
+        } else {
+          setImmediate(tick);
+        }
+      };
+      setImmediate(tick);
+    });
+  };
+
+  // Helper function to fix image orientation (removes EXIF orientation)
+  const fixImageOrientation = async (uri) => {
+    try {
+      // Use manipulateAsync with empty array to fix orientation based on EXIF data
+      // Empty array [] tells manipulateAsync to automatically apply EXIF orientation
+      // This ensures horizontal photos stay horizontal and vertical photos stay vertical
+      // The EXIF orientation tag is removed and the image is physically rotated if needed
+      const fixedImage = await ImageManipulator.manipulateAsync(
+        uri, 
+        [], // Empty array = apply EXIF orientation automatically
+        {
+          compress: 1,
+          format: ImageManipulator.SaveFormat.PNG
+        }
+      );
+      
+      return fixedImage.uri;
+    } catch (error) {
+      console.error("Error fixing image orientation:", error);
+      return uri; // Return original if fixing fails
+    }
+  };
+
+  const takePicture = async () => {
+    if (cameraRef.current) {
+      try {
+        // Show loading after a delay (using setImmediate for iOS compatibility)
+        waitForRender(20).then(() => {
+          setLoadingBeforeCapture(true);
+        });
+  
+        // Wait a bit before taking picture (works on iOS)
+        await waitForRender(3);
+  
+        const photo = await cameraRef.current.takePictureAsync({
+        quality: 1,
+        shutterSound: false,
+      });
+
+        // Fix orientation to preserve vertical/horizontal position as taken
+        const fixedUri = await fixImageOrientation(photo.uri);
+  
+        onPhotoCaptured(fixedUri);
+  
+        setLoadingBeforeCapture(false);
+      } catch (error) {
+        setLoadingBeforeCapture(false);
+        Alert.alert("Erreur");
+      }
+    }
+  };
+  
+
+  return (
+    <SafeAreaView style={styles.outerContainer}>
+      <View style={styles.cameraWrapper}>
+        <CameraView
+          style={styles.camera}
+          facing="back"
+          ref={cameraRef}
+          onCameraReady={() => setIsReady(true)}
+        />
+
+        {/* Loading overlay */}
+        {loadingBeforeCapture && (
+          <>
+            <View style={styles.loadingOverlay}>
+              <Image
+                source={require('../src/assets/loadingCamera.gif')}
+                style={styles.loadingGif}
+                resizeMode="contain"
+              />
+            </View>
+            <View style={styles.touchBlocker} pointerEvents="auto" />
+          </>
+        )}
+
+        {/* Cadre de scan */}
+        <View style={styles.scanFrame} />
+      </View>
+
+      <View style={[styles.buttonContainer, { bottom: (insets?.bottom || 0) + 16, marginBottom: 0 }]}>
+        <TouchableOpacity
+          style={styles.button}
+          onPress={takePicture}
+          disabled={!isReady || loadingBeforeCapture}
+        />
+      </View>
+    </SafeAreaView>
+  );
+}
+
+const PRIMARY_GREEN = '#198754';
+const DEEP_BLACK = '#0B0B0B';
+const GLOW_WHITE = 'rgba(255, 255, 255, 0.85)';
+
+const styles = StyleSheet.create({
+  outerContainer: {
+    flex: 1,
+    backgroundColor: DEEP_BLACK,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  cameraWrapper: {
+    width: width,
+    aspectRatio: 9 / 16,
+    borderRadius: 30,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  camera: {
+    ...StyleSheet.absoluteFillObject,
+  },
+  scanFrame: {
+    position: 'absolute',
+    width: '95%',
+    height: '80%',
+    borderWidth: 4,
+    borderColor: PRIMARY_GREEN,
+    borderRadius: 5,
+    backgroundColor: 'rgba(0, 0, 0, 0.1)',
+  },
+  loadingOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  loadingGif: {
+    width: 100,
+    height: 100,
+  },
+  touchBlocker: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 21,
+    backgroundColor: 'transparent',
+  },
+  cancelIcon: {
+    position: 'absolute',
+    top: 20,
+    left: 20,
+    backgroundColor: PRIMARY_GREEN,
+    borderRadius: 5,
+    padding: 8,
+  },
+  buttonContainer: {
+    position: 'absolute',
+    bottom: 0,
+    marginBottom: 20,
+    flexDirection: 'row',
+    justifyContent: 'center',
+  },
+  button: {
+    width: 80,
+    height: 80,
+    borderRadius: 50,
+    backgroundColor: GLOW_WHITE,
+    borderWidth: 5,
+    borderColor: PRIMARY_GREEN,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  text: {
+    fontSize: 18,
+    color: GLOW_WHITE,
+  },
+  container: {
+    flex: 1,
+    backgroundColor: DEEP_BLACK,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  iconText: {
+    fontSize: 18,
+    color: GLOW_WHITE,
+    fontWeight: '600',
+  },
+});

package/src/ImageProcessor.js

@@ -2,15 +2,25 @@ 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;
+    // First, fix orientation by applying EXIF orientation data
+    // Empty array [] tells manipulateAsync to automatically apply EXIF orientation
+    // This ensures the image is correctly oriented and EXIF tag is removed
+    const fixedOrientationImage = await ImageManipulator.manipulateAsync(uri, [], {
+      compress: 1,
+      format: ImageManipulator.SaveFormat.PNG
+    });
+    
+    // Get the correct dimensions after orientation fix
+    // The width and height properties reflect the actual image dimensions after orientation fix
+    const ratio = fixedOrientationImage.height / fixedOrientationImage.width;
 
     const maxHeight = addheight;
     const newWidth = Math.round(maxHeight / ratio);
     const newHeight = Math.round(newWidth * ratio);
 
+    // Resize using the orientation-fixed image
     const result = await ImageManipulator.manipulateAsync(
-      uri,
+      fixedOrientationImage.uri,
       [
         { resize: { width: newWidth, height: newHeight } },
       ],