react-native-rectangle-doc-scanner 3.100.0 → 3.102.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_fs_1 = __importDefault(require("react-native-fs"));
+const react_native_fast_opencv_1 = require("react-native-fast-opencv");
 const DocScanner_1 = require("./DocScanner");
 const stripFileUri = (value) => value.replace(/^file:\/\//, '');
 const CROPPER_TIMEOUT_MS = 8000;
@@ -343,61 +344,82 @@ const FullDocScanner = ({ onResult, onClose, detectionConfig, overlayColor = '#3
     const handleFlashToggle = (0, react_1.useCallback)(() => {
         setFlashEnabled(prev => !prev);
     }, []);
-    const handleRotateImage = (0, react_1.useCallback)(async (degrees) => {
+    const handleRotateImage = (0, react_1.useCallback)((degrees) => {
+        // UI만 회전 (실제 파일 회전은 confirm 시 처리)
+        setRotationDegrees(prev => {
+            const newRotation = prev + degrees;
+            // -360 ~ 360 범위로 정규화
+            if (newRotation <= -360)
+                return newRotation + 360;
+            if (newRotation >= 360)
+                return newRotation - 360;
+            return newRotation;
+        });
+    }, []);
+    const handleConfirm = (0, react_1.useCallback)(async () => {
         if (!croppedImageData)
             return;
-        console.log('[FullDocScanner] Starting image rotation...', {
-            path: croppedImageData.path,
-            hasBase64: !!croppedImageData.base64,
-            base64Length: croppedImageData.base64?.length,
-        });
-        try {
-            // 원본 파일을 ImageCropPicker로 열어서 회전 적용
-            // 사용자가 수동으로 회전 버튼을 클릭하고 완료를 눌러야 함
-            const rotatedImage = await react_native_image_crop_picker_1.default.openCropper({
+        // 회전이 없으면 기존 데이터 그대로 전달
+        if (rotationDegrees === 0) {
+            onResult({
                 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,
+                base64: croppedImageData.base64,
             });
-            console.log('[FullDocScanner] Rotated image saved:', {
-                path: rotatedImage.path,
-                hasBase64: !!rotatedImage.data,
-                base64Length: rotatedImage.data?.length,
-            });
-            // 회전된 이미지로 교체
-            setCroppedImageData({
-                path: rotatedImage.path,
-                base64: rotatedImage.data ?? undefined,
+            return;
+        }
+        // 회전이 있으면 실제 파일 회전 처리
+        try {
+            setProcessing(true);
+            // 회전 각도 정규화 (0, 90, 180, 270)
+            const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
+            // OpenCV 회전 코드 매핑
+            let rotateCode;
+            if (rotationNormalized === 90) {
+                rotateCode = react_native_fast_opencv_1.RotateFlags.ROTATE_90_CLOCKWISE;
+            }
+            else if (rotationNormalized === 180) {
+                rotateCode = react_native_fast_opencv_1.RotateFlags.ROTATE_180;
+            }
+            else if (rotationNormalized === 270 || rotationNormalized === -90) {
+                rotateCode = react_native_fast_opencv_1.RotateFlags.ROTATE_90_COUNTERCLOCKWISE;
+            }
+            else {
+                // 회전 없음
+                onResult({
+                    path: croppedImageData.path,
+                    base64: croppedImageData.base64,
+                });
+                setProcessing(false);
+                return;
+            }
+            // 이미지 파일을 Mat 객체로 로드
+            const srcMat = await react_native_fast_opencv_1.OpenCV.invoke('imread', croppedImageData.path);
+            // 빈 Mat 객체 생성 (회전된 이미지 저장용)
+            const dstMat = new react_native_fast_opencv_1.OpenCV.Mat();
+            // OpenCV로 이미지 회전
+            react_native_fast_opencv_1.OpenCV.invoke('rotate', srcMat, dstMat, rotateCode);
+            // 회전된 이미지를 임시 파일로 저장
+            const rotatedPath = `${react_native_fs_1.default.CachesDirectoryPath}/rotated_${Date.now()}.jpg`;
+            await react_native_fast_opencv_1.OpenCV.invoke('imwrite', rotatedPath, dstMat);
+            // Mat 객체 메모리 해제
+            srcMat.delete();
+            dstMat.delete();
+            // 회전된 이미지를 base64로 변환
+            const base64Data = await react_native_fs_1.default.readFile(rotatedPath, 'base64');
+            setProcessing(false);
+            // 회전된 이미지로 결과 전달
+            onResult({
+                path: rotatedPath,
+                base64: base64Data,
             });
-            // rotation degrees는 0으로 리셋
-            setRotationDegrees(0);
         }
         catch (error) {
-            console.error('[FullDocScanner] Image rotation error:', error);
-            // 사용자가 취소했으면 아무것도 안함
+            console.error('[FullDocScanner] Image rotation error on confirm:', error);
+            setProcessing(false);
             const errorMessage = error && typeof error === 'object' && 'message' in error ? error.message : '';
-            if (!errorMessage.includes('cancel') && !errorMessage.includes('User cancelled')) {
-                // 에러 메시지 표시
-                react_native_1.Alert.alert('회전 실패', '이미지 회전 중 오류가 발생했습니다.');
-            }
+            react_native_1.Alert.alert('회전 실패', '이미지 회전 중 오류가 발생했습니다: ' + errorMessage);
         }
-    }, [croppedImageData]);
-    const handleConfirm = (0, react_1.useCallback)(() => {
-        if (!croppedImageData)
-            return;
-        onResult({
-            path: croppedImageData.path,
-            base64: croppedImageData.base64,
-        });
-    }, [croppedImageData, onResult]);
+    }, [croppedImageData, rotationDegrees, onResult]);
     const handleRetake = (0, react_1.useCallback)(() => {
         console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');
         setCroppedImageData(null);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "3.100.0",
+  "version": "3.102.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-fast-opencv": "*",
     "react-native-fs": "*",
     "react-native-image-crop-picker": "*",
     "react-native-image-picker": "*",

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 RNFS from 'react-native-fs';
+import { OpenCV, RotateFlags } from 'react-native-fast-opencv';
 import { DocScanner } from './DocScanner';
 import type { CapturedDocument } from './types';
 import type {
@@ -455,66 +456,89 @@ export const FullDocScanner: React.FC<FullDocScannerProps> = ({
     setFlashEnabled(prev => !prev);
   }, []);
 
-  const handleRotateImage = useCallback(async (degrees: -90 | 90) => {
-    if (!croppedImageData) return;
-
-    console.log('[FullDocScanner] Starting image rotation...', {
-      path: croppedImageData.path,
-      hasBase64: !!croppedImageData.base64,
-      base64Length: croppedImageData.base64?.length,
+  const handleRotateImage = useCallback((degrees: -90 | 90) => {
+    // UI만 회전 (실제 파일 회전은 confirm 시 처리)
+    setRotationDegrees(prev => {
+      const newRotation = prev + degrees;
+      // -360 ~ 360 범위로 정규화
+      if (newRotation <= -360) return newRotation + 360;
+      if (newRotation >= 360) return newRotation - 360;
+      return newRotation;
     });
+  }, []);
 
-    try {
-      // 원본 파일을 ImageCropPicker로 열어서 회전 적용
-      // 사용자가 수동으로 회전 버튼을 클릭하고 완료를 눌러야 함
-      const rotatedImage = await ImageCropPicker.openCropper({
+  const handleConfirm = useCallback(async () => {
+    if (!croppedImageData) return;
+
+    // 회전이 없으면 기존 데이터 그대로 전달
+    if (rotationDegrees === 0) {
+      onResult({
         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,
+        base64: croppedImageData.base64,
       });
+      return;
+    }
 
-      console.log('[FullDocScanner] Rotated image saved:', {
-        path: rotatedImage.path,
-        hasBase64: !!rotatedImage.data,
-        base64Length: rotatedImage.data?.length,
-      });
+    // 회전이 있으면 실제 파일 회전 처리
+    try {
+      setProcessing(true);
+
+      // 회전 각도 정규화 (0, 90, 180, 270)
+      const rotationNormalized = ((rotationDegrees % 360) + 360) % 360;
+
+      // OpenCV 회전 코드 매핑
+      let rotateCode: RotateFlags;
+      if (rotationNormalized === 90) {
+        rotateCode = RotateFlags.ROTATE_90_CLOCKWISE;
+      } else if (rotationNormalized === 180) {
+        rotateCode = RotateFlags.ROTATE_180;
+      } else if (rotationNormalized === 270 || rotationNormalized === -90) {
+        rotateCode = RotateFlags.ROTATE_90_COUNTERCLOCKWISE;
+      } else {
+        // 회전 없음
+        onResult({
+          path: croppedImageData.path,
+          base64: croppedImageData.base64,
+        });
+        setProcessing(false);
+        return;
+      }
 
-      // 회전된 이미지로 교체
-      setCroppedImageData({
-        path: rotatedImage.path,
-        base64: rotatedImage.data ?? undefined,
-      });
+      // 이미지 파일을 Mat 객체로 로드
+      const srcMat = await OpenCV.invoke('imread', croppedImageData.path);
+
+      // 빈 Mat 객체 생성 (회전된 이미지 저장용)
+      const dstMat = new OpenCV.Mat();
+
+      // OpenCV로 이미지 회전
+      OpenCV.invoke('rotate', srcMat, dstMat, rotateCode);
+
+      // 회전된 이미지를 임시 파일로 저장
+      const rotatedPath = `${RNFS.CachesDirectoryPath}/rotated_${Date.now()}.jpg`;
+      await OpenCV.invoke('imwrite', rotatedPath, dstMat);
+
+      // Mat 객체 메모리 해제
+      srcMat.delete();
+      dstMat.delete();
+
+      // 회전된 이미지를 base64로 변환
+      const base64Data = await RNFS.readFile(rotatedPath, 'base64');
 
-      // rotation degrees는 0으로 리셋
-      setRotationDegrees(0);
+      setProcessing(false);
+
+      // 회전된 이미지로 결과 전달
+      onResult({
+        path: rotatedPath,
+        base64: base64Data,
+      });
     } catch (error) {
-      console.error('[FullDocScanner] Image rotation error:', error);
+      console.error('[FullDocScanner] Image rotation error on confirm:', error);
+      setProcessing(false);
 
-      // 사용자가 취소했으면 아무것도 안함
       const errorMessage = error && typeof error === 'object' && 'message' in error ? (error as Error).message : '';
-      if (!errorMessage.includes('cancel') && !errorMessage.includes('User cancelled')) {
-        // 에러 메시지 표시
-        Alert.alert('회전 실패', '이미지 회전 중 오류가 발생했습니다.');
-      }
+      Alert.alert('회전 실패', '이미지 회전 중 오류가 발생했습니다: ' + errorMessage);
     }
-  }, [croppedImageData]);
-
-  const handleConfirm = useCallback(() => {
-    if (!croppedImageData) return;
-
-    onResult({
-      path: croppedImageData.path,
-      base64: croppedImageData.base64,
-    });
-  }, [croppedImageData, onResult]);
+  }, [croppedImageData, rotationDegrees, onResult]);
 
   const handleRetake = useCallback(() => {
     console.log('[FullDocScanner] Retake - clearing cropped image and resetting scanner');

package/src/types/react-native-fast-opencv.d.ts

@@ -0,0 +1,20 @@
+declare module 'react-native-fast-opencv' {
+  export enum RotateFlags {
+    ROTATE_90_CLOCKWISE = 0,
+    ROTATE_180 = 1,
+    ROTATE_90_COUNTERCLOCKWISE = 2
+  }
+
+  export class Mat {
+    delete(): void;
+  }
+
+  export interface OpenCVModel {
+    Mat: typeof Mat;
+    invoke(name: 'imread', path: string): Promise<Mat>;
+    invoke(name: 'imwrite', path: string, mat: Mat): Promise<void>;
+    invoke(name: 'rotate', src: Mat, dst: Mat, code: RotateFlags): void;
+  }
+
+  export const OpenCV: OpenCVModel;
+}