react-native-rectangle-doc-scanner 3.97.0 → 3.99.0

package/dist/FullDocScanner.js

@@ -42,6 +42,7 @@ const react_native_1 = require("react-native");
 const react_native_image_picker_1 = require("react-native-image-picker");
 const react_native_image_crop_picker_1 = __importDefault(require("react-native-image-crop-picker"));
 const react_native_image_rotate_1 = __importDefault(require("react-native-image-rotate"));
+const react_native_fs_1 = __importDefault(require("react-native-fs"));
 const DocScanner_1 = require("./DocScanner");
 const stripFileUri = (value) => value.replace(/^file:\/\//, '');
 const CROPPER_TIMEOUT_MS = 8000;
@@ -220,9 +221,22 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
         }
         if (normalizedDoc.croppedPath) {
             console.log('[FullDocScanner] Grid detected: using pre-cropped image', normalizedDoc.croppedPath);
-            setCroppedImageData({
-                path: normalizedDoc.croppedPath,
-            });
+            // RNFS를 사용해서 base64 생성
+            try {
+                const base64Data = await react_native_fs_1.default.readFile(normalizedDoc.croppedPath, 'base64');
+                console.log('[FullDocScanner] Generated base64 for pre-cropped image, length:', base64Data.length);
+                setCroppedImageData({
+                    path: normalizedDoc.croppedPath,
+                    base64: base64Data,
+                });
+            }
+            catch (error) {
+                console.error('[FullDocScanner] Failed to generate base64:', error);
+                // base64 생성 실패 시 경로만 저장
+                setCroppedImageData({
+                    path: normalizedDoc.croppedPath,
+                });
+            }
             return;
         }
         console.log('[FullDocScanner] Fallback to manual crop (no croppedPath available)');
@@ -330,7 +344,7 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const handleFlashToggle = (0, react_1.useCallback)(() => {
         setFlashEnabled(prev => !prev);
     }, []);
-    const handleRotateImage = (0, react_1.useCallback)((degrees) => {
+    const handleRotateImage = (0, react_1.useCallback)(async (degrees) => {
         if (!croppedImageData)
             return;
         // UI 회전 상태 먼저 업데이트 (즉각 반응)
@@ -338,48 +352,58 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
             const newRotation = (prev + degrees + 360) % 360;
             return newRotation;
         });
-        console.log('[FullDocScanner] Starting image rotation...');
-        // ImageRotate를 사용해서 실제로 이미지 회전 (callback 기반)
-        react_native_image_rotate_1.default.rotateImage(croppedImageData.path, degrees, async (rotatedImageUri) => {
-            console.log('[FullDocScanner] Image rotated successfully:', rotatedImageUri);
-            try {
-                // rct-image-store:// URI를 base64로 변환
-                const response = await fetch(rotatedImageUri);
-                const blob = await response.blob();
-                // Blob to base64
-                const reader = new FileReader();
-                reader.onloadend = () => {
-                    const base64String = reader.result;
-                    // "data:image/jpeg;base64," 부분 제거
-                    const base64Data = base64String.split(',')[1];
-                    console.log('[FullDocScanner] Converted to base64, length:', base64Data?.length);
-                    // 회전된 이미지로 교체 (base64 포함)
-                    setCroppedImageData({
+        console.log('[FullDocScanner] Starting image rotation...', {
+            path: croppedImageData.path,
+            hasBase64: !!croppedImageData.base64,
+        });
+        try {
+            // file:// prefix 제거
+            const cleanPath = croppedImageData.path.replace(/^file:\/\//, '');
+            // ImageRotate를 사용해서 이미지 회전
+            react_native_image_rotate_1.default.rotateImage(cleanPath, degrees, async (rotatedImageUri) => {
+                console.log('[FullDocScanner] Image rotated, URI:', rotatedImageUri);
+                try {
+                    // 회전된 이미지를 실제 파일로 저장하기 위해 ImageCropPicker 사용
+                    // cropping: true이지만 전체 이미지를 선택하면 됨
+                    const savedImage = await react_native_image_crop_picker_1.default.openCropper({
                         path: rotatedImageUri,
-                        base64: base64Data,
+                        mediaType: 'photo',
+                        cropping: true,
+                        freeStyleCropEnabled: true,
+                        includeBase64: true,
+                        compressImageQuality: 0.9,
+                        cropperToolbarTitle: '회전 완료 - 확인을 눌러주세요',
+                        cropperChooseText: '확인',
+                        cropperCancelText: '취소',
+                        cropperRotateButtonsHidden: true,
+                    });
+                    console.log('[FullDocScanner] Rotated image saved with base64');
+                    // 회전된 이미지로 교체
+                    setCroppedImageData({
+                        path: savedImage.path,
+                        base64: savedImage.data ?? undefined,
                     });
                     // rotation degrees는 0으로 리셋
                     setRotationDegrees(0);
-                };
-                reader.readAsDataURL(blob);
-            }
-            catch (convertError) {
-                console.error('[FullDocScanner] Failed to convert to base64:', convertError);
-                // base64 변환 실패 시 URI만 저장
-                setCroppedImageData({
-                    path: rotatedImageUri,
-                    base64: undefined,
+                }
+                catch (cropError) {
+                    console.error('[FullDocScanner] Failed to save rotated image:', cropError);
+                    // 사용자가 취소한 경우 rotation 원복
+                    setRotationDegrees(prev => (prev - degrees + 360) % 360);
+                }
+            }, (error) => {
+                console.error('[FullDocScanner] Image rotation error:', error);
+                // 에러 발생 시 UI rotation 원복
+                setRotationDegrees(prev => {
+                    const revertRotation = (prev - degrees + 360) % 360;
+                    return revertRotation;
                 });
-                setRotationDegrees(0);
-            }
-        }, (error) => {
-            console.error('[FullDocScanner] Image rotation error:', error);
-            // 에러 발생 시 UI rotation 원복
-            setRotationDegrees(prev => {
-                const revertRotation = (prev - degrees + 360) % 360;
-                return revertRotation;
             });
-        });
+        }
+        catch (error) {
+            console.error('[FullDocScanner] Rotation setup error:', error);
+            setRotationDegrees(prev => (prev - degrees + 360) % 360);
+        }
     }, [croppedImageData]);
     const handleConfirm = (0, react_1.useCallback)(() => {
         if (!croppedImageData)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.97.0",
+  "version": "3.99.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,6 +33,7 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-fs": "*",
     "react-native-image-crop-picker": "*",
     "react-native-image-picker": "*",
     "react-native-image-rotate": "*",
@@ -41,11 +42,12 @@
   "devDependencies": {
     "@types/react": "^18.2.41",
     "@types/react-native": "0.73.0",
+    "@types/react-native-fs": "^2.8.3",
     "react-native-image-crop-picker": "^0.41.2",
     "react-native-image-picker": "^7.1.2",
     "typescript": "^5.3.3"
   },
   "dependencies": {
-    "react-native-image-rotate": "^2.1.0"
+    "react-native-image-rotate": "*"
   }
 }

package/src/FullDocScanner.tsx

@@ -12,6 +12,7 @@ import {
 import { launchImageLibrary } from 'react-native-image-picker';
 import ImageCropPicker from 'react-native-image-crop-picker';
 import ImageRotate from 'react-native-image-rotate';
+import RNFS from 'react-native-fs';
 import { DocScanner } from './DocScanner';
 import type { CapturedDocument } from './types';
 import type {
@@ -299,9 +300,23 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
 
       if (normalizedDoc.croppedPath) {
         console.log('[FullDocScanner] Grid detected: using pre-cropped image', normalizedDoc.croppedPath);
-        setCroppedImageData({
-          path: normalizedDoc.croppedPath,
-        });
+
+        // RNFS를 사용해서 base64 생성
+        try {
+          const base64Data = await RNFS.readFile(normalizedDoc.croppedPath, 'base64');
+          console.log('[FullDocScanner] Generated base64 for pre-cropped image, length:', base64Data.length);
+
+          setCroppedImageData({
+            path: normalizedDoc.croppedPath,
+            base64: base64Data,
+          });
+        } catch (error) {
+          console.error('[FullDocScanner] Failed to generate base64:', error);
+          // base64 생성 실패 시 경로만 저장
+          setCroppedImageData({
+            path: normalizedDoc.croppedPath,
+          });
+        }
         return;
       }
 
@@ -441,7 +456,7 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     setFlashEnabled(prev => !prev);
   }, []);
 
-  const handleRotateImage = useCallback((degrees: -90 | 90) => {
+  const handleRotateImage = useCallback(async (degrees: -90 | 90) => {
     if (!croppedImageData) return;
 
     // UI 회전 상태 먼저 업데이트 (즉각 반응)
@@ -450,58 +465,67 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
       return newRotation;
     });
 
-    console.log('[FullDocScanner] Starting image rotation...');
-
-    // ImageRotate를 사용해서 실제로 이미지 회전 (callback 기반)
-    ImageRotate.rotateImage(
-      croppedImageData.path,
-      degrees,
-      async (rotatedImageUri: string) => {
-        console.log('[FullDocScanner] Image rotated successfully:', rotatedImageUri);
-
-        try {
-          // rct-image-store:// URI를 base64로 변환
-          const response = await fetch(rotatedImageUri);
-          const blob = await response.blob();
+    console.log('[FullDocScanner] Starting image rotation...', {
+      path: croppedImageData.path,
+      hasBase64: !!croppedImageData.base64,
+    });
 
-          // Blob to base64
-          const reader = new FileReader();
-          reader.onloadend = () => {
-            const base64String = reader.result as string;
-            // "data:image/jpeg;base64," 부분 제거
-            const base64Data = base64String.split(',')[1];
+    try {
+      // file:// prefix 제거
+      const cleanPath = croppedImageData.path.replace(/^file:\/\//, '');
+
+      // ImageRotate를 사용해서 이미지 회전
+      ImageRotate.rotateImage(
+        cleanPath,
+        degrees,
+        async (rotatedImageUri: string) => {
+          console.log('[FullDocScanner] Image rotated, URI:', rotatedImageUri);
+
+          try {
+            // 회전된 이미지를 실제 파일로 저장하기 위해 ImageCropPicker 사용
+            // cropping: true이지만 전체 이미지를 선택하면 됨
+            const savedImage = await ImageCropPicker.openCropper({
+              path: rotatedImageUri,
+              mediaType: 'photo',
+              cropping: true,
+              freeStyleCropEnabled: true,
+              includeBase64: true,
+              compressImageQuality: 0.9,
+              cropperToolbarTitle: '회전 완료 - 확인을 눌러주세요',
+              cropperChooseText: '확인',
+              cropperCancelText: '취소',
+              cropperRotateButtonsHidden: true,
+            });
 
-            console.log('[FullDocScanner] Converted to base64, length:', base64Data?.length);
+            console.log('[FullDocScanner] Rotated image saved with base64');
 
-            // 회전된 이미지로 교체 (base64 포함)
+            // 회전된 이미지로 교체
             setCroppedImageData({
-              path: rotatedImageUri,
-              base64: base64Data,
+              path: savedImage.path,
+              base64: savedImage.data ?? undefined,
             });
 
             // rotation degrees는 0으로 리셋
             setRotationDegrees(0);
-          };
-          reader.readAsDataURL(blob);
-        } catch (convertError) {
-          console.error('[FullDocScanner] Failed to convert to base64:', convertError);
-          // base64 변환 실패 시 URI만 저장
-          setCroppedImageData({
-            path: rotatedImageUri,
-            base64: undefined,
+          } catch (cropError) {
+            console.error('[FullDocScanner] Failed to save rotated image:', cropError);
+            // 사용자가 취소한 경우 rotation 원복
+            setRotationDegrees(prev => (prev - degrees + 360) % 360);
+          }
+        },
+        (error: Error) => {
+          console.error('[FullDocScanner] Image rotation error:', error);
+          // 에러 발생 시 UI rotation 원복
+          setRotationDegrees(prev => {
+            const revertRotation = (prev - degrees + 360) % 360;
+            return revertRotation;
           });
-          setRotationDegrees(0);
         }
-      },
-      (error: Error) => {
-        console.error('[FullDocScanner] Image rotation error:', error);
-        // 에러 발생 시 UI rotation 원복
-        setRotationDegrees(prev => {
-          const revertRotation = (prev - degrees + 360) % 360;
-          return revertRotation;
-        });
-      }
-    );
+      );
+    } catch (error) {
+      console.error('[FullDocScanner] Rotation setup error:', error);
+      setRotationDegrees(prev => (prev - degrees + 360) % 360);
+    }
   }, [croppedImageData]);
 
   const handleConfirm = useCallback(() => {