react-native-rectangle-doc-scanner 3.98.0 → 3.100.0

package/dist/FullDocScanner.js

@@ -41,7 +41,7 @@ const react_1 = __importStar(require("react"));
 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 +220,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,61 +343,52 @@ 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 회전 상태 먼저 업데이트 (즉각 반응)
-        setRotationDegrees(prev => {
-            const newRotation = (prev + degrees + 360) % 360;
-            return newRotation;
-        });
         console.log('[FullDocScanner] Starting image rotation...', {
             path: croppedImageData.path,
             hasBase64: !!croppedImageData.base64,
+            base64Length: croppedImageData.base64?.length,
         });
-        // file:// prefix 제거
-        const cleanPath = croppedImageData.path.replace(/^file:\/\//, '');
-        // ImageRotate를 사용해서 실제로 이미지 회전 (callback 기반)
-        react_native_image_rotate_1.default.rotateImage(cleanPath, 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 rotated image to base64, length:', base64Data?.length);
-                    // 회전된 이미지로 교체 (base64 포함)
-                    setCroppedImageData({
-                        path: rotatedImageUri,
-                        base64: base64Data,
-                    });
-                    // 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,
-                });
-                setRotationDegrees(0);
-            }
-        }, (error) => {
-            console.error('[FullDocScanner] Image rotation error:', error);
-            // 에러 발생 시 UI rotation 원복
-            setRotationDegrees(prev => {
-                const revertRotation = (prev - degrees + 360) % 360;
-                return revertRotation;
+        try {
+            // 원본 파일을 ImageCropPicker로 열어서 회전 적용
+            // 사용자가 수동으로 회전 버튼을 클릭하고 완료를 눌러야 함
+            const rotatedImage = await react_native_image_crop_picker_1.default.openCropper({
+                path: croppedImageData.path,
+                mediaType: 'photo',
+                cropping: true,
+                freeStyleCropEnabled: true,
+                includeBase64: true,
+                compressImageQuality: 0.9,
+                cropperToolbarTitle: degrees === 90 ? '우측 90° 회전 → 회전 버튼 클릭 → 완료' : '좌측 90° 회전 → 회전 버튼 클릭 → 완료',
+                cropperChooseText: '완료',
+                cropperCancelText: '취소',
+                cropperRotateButtonsHidden: false,
+                enableRotationGesture: true,
             });
-        });
+            console.log('[FullDocScanner] Rotated image saved:', {
+                path: rotatedImage.path,
+                hasBase64: !!rotatedImage.data,
+                base64Length: rotatedImage.data?.length,
+            });
+            // 회전된 이미지로 교체
+            setCroppedImageData({
+                path: rotatedImage.path,
+                base64: rotatedImage.data ?? undefined,
+            });
+            // rotation degrees는 0으로 리셋
+            setRotationDegrees(0);
+        }
+        catch (error) {
+            console.error('[FullDocScanner] Image rotation error:', error);
+            // 사용자가 취소했으면 아무것도 안함
+            const errorMessage = error && typeof error === 'object' && 'message' in error ? error.message : '';
+            if (!errorMessage.includes('cancel') && !errorMessage.includes('User cancelled')) {
+                // 에러 메시지 표시
+                react_native_1.Alert.alert('회전 실패', '이미지 회전 중 오류가 발생했습니다.');
+            }
+        }
     }, [croppedImageData]);
     const handleConfirm = (0, react_1.useCallback)(() => {
         if (!croppedImageData)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.98.0",
+  "version": "3.100.0",
   "description": "Native-backed document scanner for React Native with customizable overlays.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -33,19 +33,18 @@
   "peerDependencies": {
     "react": "*",
     "react-native": "*",
+    "react-native-fs": "*",
     "react-native-image-crop-picker": "*",
     "react-native-image-picker": "*",
-    "react-native-image-rotate": "*",
     "react-native-svg": "*"
   },
   "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"
-  }
+  "dependencies": {}
 }

package/src/FullDocScanner.tsx

@@ -11,7 +11,7 @@ import {
 } from 'react-native';
 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 +299,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,73 +455,56 @@ 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 회전 상태 먼저 업데이트 (즉각 반응)
-    setRotationDegrees(prev => {
-      const newRotation = (prev + degrees + 360) % 360;
-      return newRotation;
-    });
-
     console.log('[FullDocScanner] Starting image rotation...', {
       path: croppedImageData.path,
       hasBase64: !!croppedImageData.base64,
+      base64Length: croppedImageData.base64?.length,
     });
 
-    // file:// prefix 제거
-    const cleanPath = croppedImageData.path.replace(/^file:\/\//, '');
+    try {
+      // 원본 파일을 ImageCropPicker로 열어서 회전 적용
+      // 사용자가 수동으로 회전 버튼을 클릭하고 완료를 눌러야 함
+      const rotatedImage = await ImageCropPicker.openCropper({
+        path: croppedImageData.path,
+        mediaType: 'photo',
+        cropping: true,
+        freeStyleCropEnabled: true,
+        includeBase64: true,
+        compressImageQuality: 0.9,
+        cropperToolbarTitle: degrees === 90 ? '우측 90° 회전 → 회전 버튼 클릭 → 완료' : '좌측 90° 회전 → 회전 버튼 클릭 → 완료',
+        cropperChooseText: '완료',
+        cropperCancelText: '취소',
+        cropperRotateButtonsHidden: false,
+        enableRotationGesture: true,
+      });
+
+      console.log('[FullDocScanner] Rotated image saved:', {
+        path: rotatedImage.path,
+        hasBase64: !!rotatedImage.data,
+        base64Length: rotatedImage.data?.length,
+      });
 
-    // ImageRotate를 사용해서 실제로 이미지 회전 (callback 기반)
-    ImageRotate.rotateImage(
-      cleanPath,
-      degrees,
-      async (rotatedImageUri: string) => {
-        console.log('[FullDocScanner] Image rotated successfully:', rotatedImageUri);
+      // 회전된 이미지로 교체
+      setCroppedImageData({
+        path: rotatedImage.path,
+        base64: rotatedImage.data ?? undefined,
+      });
 
-        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 as string;
-            // "data:image/jpeg;base64," 부분 제거
-            const base64Data = base64String.split(',')[1];
-
-            console.log('[FullDocScanner] Converted rotated image to base64, length:', base64Data?.length);
-
-            // 회전된 이미지로 교체 (base64 포함)
-            setCroppedImageData({
-              path: rotatedImageUri,
-              base64: base64Data,
-            });
-
-            // 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,
-          });
-          setRotationDegrees(0);
-        }
-      },
-      (error: Error) => {
-        console.error('[FullDocScanner] Image rotation error:', error);
-        // 에러 발생 시 UI rotation 원복
-        setRotationDegrees(prev => {
-          const revertRotation = (prev - degrees + 360) % 360;
-          return revertRotation;
-        });
+      // rotation degrees는 0으로 리셋
+      setRotationDegrees(0);
+    } catch (error) {
+      console.error('[FullDocScanner] Image rotation error:', error);
+
+      // 사용자가 취소했으면 아무것도 안함
+      const errorMessage = error && typeof error === 'object' && 'message' in error ? (error as Error).message : '';
+      if (!errorMessage.includes('cancel') && !errorMessage.includes('User cancelled')) {
+        // 에러 메시지 표시
+        Alert.alert('회전 실패', '이미지 회전 중 오류가 발생했습니다.');
       }
-    );
+    }
   }, [croppedImageData]);
 
   const handleConfirm = useCallback(() => {

package/src/types/react-native-image-rotate.d.ts

@@ -1,10 +0,0 @@
-declare module 'react-native-image-rotate' {
-  export default class ImageRotate {
-    static rotateImage(
-      imagePath: string,
-      degrees: number,
-      successCallback: (rotatedImagePath: string) => void,
-      errorCallback: (error: Error) => void,
-    ): void;
-  }
-}