react-native-expo-cropper 1.2.37 → 1.2.39

package/dist/CustomCamera.js

@@ -97,6 +97,9 @@ function CustomCamera(_ref) {
   // ✅ CRITICAL FIX: Calculate green frame coordinates relative to camera preview
   // The green frame should be calculated on the wrapper (as it's visually drawn there)
   // But we store it with wrapper dimensions so ImageCropper can map it correctly
+  // 
+  // NOTE: Camera capture aspect ratio (typically 4:3) may differ from wrapper aspect ratio (9:16)
+  // This is handled in ImageCropper by using "cover" mode to match preview content
   var calculateGreenFrameCoordinates = function calculateGreenFrameCoordinates() {
     var wrapperWidth = cameraWrapperLayout.width;
     var wrapperHeight = cameraWrapperLayout.height;
@@ -105,10 +108,9 @@ function CustomCamera(_ref) {
       return null;
     }
 
-    // ✅ Green frame dimensions: 80% width, 80% height (centered)
-    // The green frame should cover 80% of the image area, centered
-    var frameWidth = wrapperWidth * 0.80; // 80% width
-    var frameHeight = wrapperHeight * 0.80; // 80% height
+    // ✅ Calculate green frame as percentage of WRAPPER
+    var frameWidth = wrapperWidth * 0.85; // 85% of wrapper width
+    var frameHeight = wrapperHeight * 0.70; // 70% of wrapper height
     var frameX = (wrapperWidth - frameWidth) / 2; // Centered horizontally
     var frameY = (wrapperHeight - frameHeight) / 2; // Centered vertically
 
@@ -122,8 +124,9 @@ function CustomCamera(_ref) {
       // ✅ Store percentages for easier mapping later
       percentX: frameX / wrapperWidth * 100,
       percentY: frameY / wrapperHeight * 100,
-      percentWidth: 80,
-      percentHeight: 80
+      percentWidth: 85,
+      // 85% of wrapper width
+      percentHeight: 70 // 70% of wrapper height
     };
     console.log("✅ Green frame coordinates calculated:", frameCoords);
     return frameCoords;
@@ -139,12 +142,12 @@ function CustomCamera(_ref) {
   }, [cameraWrapperLayout]);
   var takePicture = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var photo, greenFrameCoords, fixedUri, _t;
+      var captureOptions, photo, capturedAspectRatio, greenFrameCoords, _t;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
             if (!cameraRef.current) {
-              _context2.n = 5;
+              _context2.n = 7;
               break;
             }
             _context2.p = 1;
@@ -157,54 +160,87 @@ function CustomCamera(_ref) {
             _context2.n = 2;
             return waitForRender(2);
           case 2:
-            _context2.n = 3;
-            return cameraRef.current.takePictureAsync({
+            // ✅ OPTIMIZED: Capture with maximum quality and native camera ratio
+            // Platform-specific optimizations for best quality
+            captureOptions = _objectSpread(_objectSpread({
+              // Maximum quality (0-1, 1 = best quality, no compression)
               quality: 1,
-              // Qualité maximale (0-1, 1 = meilleure qualité)
+              // Disable shutter sound for better UX
               shutterSound: false,
-              // skipProcessing: true = Désactiver le traitement automatique pour préserver la qualité pixel-perfect
-              // IMPORTANT : Cela préserve la résolution originale et évite toute interpolation
+              // ✅ CRITICAL: skipProcessing preserves original resolution and avoids interpolation
+              // This ensures pixel-perfect quality and prevents premature resizing
               skipProcessing: true,
-              // exif: true = Inclure les métadonnées EXIF (orientation, etc.)
-              // L'orientation sera gérée dans ImageCropper si nécessaire via la fonction de rotation
+              // Include EXIF metadata (orientation, camera settings, etc.)
               exif: true
+            }, _reactNative.Platform.OS === 'ios' && {
+              // iOS: Use native capture format (typically 4:3 or 16:9 depending on device)
+              // No additional processing to preserve quality
+            }), _reactNative.Platform.OS === 'android' && {
+              // Android: Ensure maximum resolution capture
+              // skipProcessing already handles this, but we can add Android-specific options if needed
+            });
+            console.log("📸 Capturing photo with maximum quality settings:", {
+              platform: _reactNative.Platform.OS,
+              options: captureOptions,
+              wrapperSize: {
+                width: cameraWrapperLayout.width,
+                height: cameraWrapperLayout.height
+              }
             });
+            _context2.n = 3;
+            return cameraRef.current.takePictureAsync(captureOptions);
           case 3:
             photo = _context2.v;
-            console.log("Photo captured with maximum quality:", {
+            if (!(!photo.width || !photo.height || photo.width === 0 || photo.height === 0)) {
+              _context2.n = 4;
+              break;
+            }
+            throw new Error("Invalid photo dimensions received from camera");
+          case 4:
+            capturedAspectRatio = photo.width / photo.height;
+            console.log("✅ Photo captured with maximum quality:", {
               uri: photo.uri,
               width: photo.width,
               height: photo.height,
-              exif: photo.exif ? "present" : "missing"
+              aspectRatio: capturedAspectRatio.toFixed(3),
+              expectedRatio: "~1.33 (4:3) or ~1.78 (16:9)",
+              exif: photo.exif ? "present" : "missing",
+              fileSize: photo.uri ? "available" : "unknown"
             });
 
             // ✅ CRITICAL FIX: Use the same green frame coordinates that are used for rendering
             // Fallback to recalculation if, for some reason, state is not yet set
-            greenFrameCoords = greenFrame || calculateGreenFrameCoordinates(); // ✅ REFACTORISATION : Utiliser directement l'URI de la photo
-            // L'orientation sera gérée dans ImageCropper si l'utilisateur utilise la fonction de rotation
-            // skipProcessing: true préserve la qualité mais peut laisser l'orientation EXIF non appliquée
-            // C'est acceptable car l'utilisateur peut corriger via la rotation dans ImageCropper
-            fixedUri = photo.uri; // Envoyer l'URI et les coordonnées du green frame à ImageCropper
-            onPhotoCaptured(fixedUri, {
+            greenFrameCoords = greenFrame || calculateGreenFrameCoordinates();
+            if (greenFrameCoords) {
+              _context2.n = 5;
+              break;
+            }
+            throw new Error("Green frame coordinates not available");
+          case 5:
+            // ✅ Send photo URI and frame data to ImageCropper
+            // The photo maintains its native resolution and aspect ratio
+            // ImageCropper will handle display and cropping while preserving quality
+            onPhotoCaptured(photo.uri, {
               greenFrame: greenFrameCoords,
               capturedImageSize: {
                 width: photo.width,
-                height: photo.height
+                height: photo.height,
+                aspectRatio: capturedAspectRatio
               }
             });
             setLoadingBeforeCapture(false);
-            _context2.n = 5;
+            _context2.n = 7;
             break;
-          case 4:
-            _context2.p = 4;
+          case 6:
+            _context2.p = 6;
             _t = _context2.v;
-            console.error("Error capturing photo:", _t);
+            console.error("❌ Error capturing photo:", _t);
             setLoadingBeforeCapture(false);
-            _reactNative.Alert.alert("Erreur", "Impossible de capturer la photo. Veuillez réessayer.");
-          case 5:
+            _reactNative.Alert.alert("Erreur", "Impossible de capturer la photo: ".concat(_t.message || "Erreur inconnue", ". Veuillez r\xE9essayer."));
+          case 7:
             return _context2.a(2);
         }
-      }, _callee2, null, [[1, 4]]);
+      }, _callee2, null, [[1, 6]]);
     }));
     return function takePicture() {
       return _ref3.apply(this, arguments);
@@ -230,8 +266,12 @@ function CustomCamera(_ref) {
     facing: "back",
     ref: cameraRef,
     onCameraReady: function onCameraReady() {
-      return setIsReady(true);
+      setIsReady(true);
+      console.log("✅ Camera ready - Maximum quality capture enabled");
     }
+    // ✅ Ensure camera uses native aspect ratio (typically 4:3 for most devices)
+    // The wrapper constrains the view, but capture uses full sensor resolution
+    // This ensures preview matches what will be captured
   }), loadingBeforeCapture && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_reactNative.View, {
     style: styles.loadingOverlay
   }, /*#__PURE__*/_react["default"].createElement(_reactNative.Image, {