rn-opencv-doc-perspective-correction 1.0.4 → 1.0.6

package/dist/index.d.ts

@@ -3,20 +3,8 @@ export type Point = {
     y: number;
 };
 export declare class DocumentScanner {
-    /**
-     * Tính khoảng cách Euclidean giữa 2 điểm
-     */
     private static getDistance;
-    /**
-     * Sắp xếp 4 điểm thành chuỗi TL, TR, BR, BL
-     */
     private static sortCorners;
-    /**
-     * Bước 1: Page Corner Detection (Auto-detect góc tài liệu)
-     */
-    static detectPageCorners(imageBase64: string): Point[] | undefined;
-    /**
-     * Bước 2: Perspective Correction
-     */
-    static applyPerspectiveCorrection(imageBase64: string, corners: Point[]): string | undefined;
+    static detectPageCorners(imageBase64: string, onLog?: (msg: string) => void): Point[] | undefined;
+    static applyPerspectiveCorrection(imageBase64: string, corners: Point[], onLog?: (msg: string) => void): string | undefined;
 }

package/dist/index.js

@@ -4,15 +4,9 @@ exports.DocumentScanner = void 0;
 // @ts-nocheck
 const react_native_fast_opencv_1 = require("react-native-fast-opencv");
 class DocumentScanner {
-    /**
-     * Tính khoảng cách Euclidean giữa 2 điểm
-     */
     static getDistance(p1, p2) {
         return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
     }
-    /**
-     * Sắp xếp 4 điểm thành chuỗi TL, TR, BR, BL
-     */
     static sortCorners(corners) {
         if (corners.length !== 4)
             return corners;
@@ -23,10 +17,7 @@ class DocumentScanner {
             return angleA - angleB;
         });
     }
-    /**
-     * Bước 1: Page Corner Detection (Auto-detect góc tài liệu)
-     */
-    static detectPageCorners(imageBase64) {
+    static detectPageCorners(imageBase64, onLog) {
         let src = null;
         let gray = null;
         let blurred = null;
@@ -37,31 +28,58 @@ class DocumentScanner {
             src = react_native_fast_opencv_1.OpenCV.base64ToMat(imageBase64);
             gray = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Mat, 0, 0, react_native_fast_opencv_1.DataTypes.CV_8U);
             blurred = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Mat, 0, 0, react_native_fast_opencv_1.DataTypes.CV_8U);
-            edges = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Mat, 0, 0, react_native_fast_opencv_1.DataTypes.CV_8U);
+            edges = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Mat, 0, 0, react_native_fast_opencv_1.DataTypes.CV_8U); // This will hold the threshold output
             react_native_fast_opencv_1.OpenCV.invoke('cvtColor', src, gray, react_native_fast_opencv_1.ColorConversionCodes.COLOR_BGR2GRAY);
             const ksize = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 5, 5);
             react_native_fast_opencv_1.OpenCV.invoke('GaussianBlur', gray, blurred, ksize, 0);
-            react_native_fast_opencv_1.OpenCV.invoke('Canny', blurred, edges, 75, 200, 3, false);
+            // Python uses: cv2.threshold(blurred, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+            // THRESH_BINARY = 0
+            // THRESH_OTSU = 8
+            // THRESH_BINARY + THRESH_OTSU = 8
+            react_native_fast_opencv_1.OpenCV.invoke('threshold', blurred, edges, 0, 255, 8);
             contoursObj = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.MatVector);
             hierarchyObj = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Mat, 0, 0, react_native_fast_opencv_1.DataTypes.CV_8U);
-            react_native_fast_opencv_1.OpenCV.invoke('findContours', edges, contoursObj, hierarchyObj, 1, 2);
-            const contoursSize = react_native_fast_opencv_1.OpenCV.invoke('size', contoursObj) || 0;
-            let maxArea = 0;
-            let largestPoly = undefined;
+            // Using RETR_EXTERNAL similar to the Python script for outer contours
+            react_native_fast_opencv_1.OpenCV.invoke('findContoursWithHierarchy', edges, contoursObj, hierarchyObj, 0 /* RETR_EXTERNAL */, 2 /* CHAIN_APPROX_SIMPLE */);
+            const contoursJS = react_native_fast_opencv_1.OpenCV.toJSValue(contoursObj);
+            const contoursArray = (contoursJS === null || contoursJS === void 0 ? void 0 : contoursJS.array) || [];
+            const contoursSize = contoursArray.length;
+            if (contoursSize === 0) {
+                if (onLog)
+                    onLog(`[OpenCV] Không tìm thấy contours.`);
+                return undefined;
+            }
+            // First pass: extract all areas to sort them and minimize JSI calls
+            let contourMetrics = [];
             for (let i = 0; i < contoursSize; i++) {
-                const contour = react_native_fast_opencv_1.OpenCV.invoke('get', contoursObj, i);
-                const area = react_native_fast_opencv_1.OpenCV.invoke('contourArea', contour);
-                if (area > maxArea) {
-                    const peri = react_native_fast_opencv_1.OpenCV.invoke('arcLength', contour, true);
-                    const approx = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVector);
-                    react_native_fast_opencv_1.OpenCV.invoke('approxPolyDP', contour, approx, 0.02 * peri, true);
-                    const approxJS = react_native_fast_opencv_1.OpenCV.toJSValue(approx);
-                    if (approxJS && approxJS.array && approxJS.array.length === 4) {
-                        maxArea = area;
-                        largestPoly = approxJS.array;
-                    }
+                const contour = react_native_fast_opencv_1.OpenCV.copyObjectFromVector(contoursObj, i);
+                const areaObj = react_native_fast_opencv_1.OpenCV.invoke('contourArea', contour);
+                const area = areaObj ? areaObj.value : 0;
+                if (area > 5000) { // filter very small artifacts
+                    contourMetrics.push({ index: i, area, contour });
                 }
             }
+            // Sort contours by area in descending order
+            contourMetrics.sort((a, b) => b.area - a.area);
+            let largestPoly = undefined;
+            // Second pass: only check approxPolyDP for the largest ones
+            for (let i = 0; i < contourMetrics.length; i++) {
+                const metric = contourMetrics[i];
+                const contour = metric.contour;
+                const periObj = react_native_fast_opencv_1.OpenCV.invoke('arcLength', contour, true);
+                const peri = periObj ? periObj.value : 0;
+                const approx = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVector);
+                react_native_fast_opencv_1.OpenCV.invoke('approxPolyDP', contour, approx, 0.02 * peri, true);
+                const approxJS = react_native_fast_opencv_1.OpenCV.toJSValue(approx);
+                if (approxJS && approxJS.array && approxJS.array.length === 4) {
+                    largestPoly = approxJS.array;
+                    break; // Stop at the first 4-point polygon like python script
+                }
+            }
+            const logMsg = `[OpenCV] Contours: ${contoursSize}. Metrics pass: ${contourMetrics.length}. Poly detect: ${largestPoly ? 'Thành công' : 'Thất bại'}.`;
+            console.log(logMsg);
+            if (onLog)
+                onLog(logMsg);
             if (largestPoly && largestPoly.length === 4) {
                 return this.sortCorners(largestPoly);
             }
@@ -69,16 +87,15 @@ class DocumentScanner {
         }
         catch (e) {
             console.error('Lỗi khi dò tìm góc tài liệu (OpenCV):', e);
-            return undefined;
+            if (onLog)
+                onLog(`[OpenCV Corner Detection Error]: ${e.message}`);
+            throw new Error(`[OpenCV Corner Detection Error]: ${e.message}`);
         }
         finally {
             react_native_fast_opencv_1.OpenCV.clearBuffers();
         }
     }
-    /**
-     * Bước 2: Perspective Correction
-     */
-    static applyPerspectiveCorrection(imageBase64, corners) {
+    static applyPerspectiveCorrection(imageBase64, corners, onLog) {
         let src = null;
         let dst = null;
         try {
@@ -108,13 +125,21 @@ class DocumentScanner {
                 react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Point2f, maxWidth - 1, maxHeight - 1),
                 react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Point2f, 0, maxHeight - 1)
             ]);
-            const perspectiveMatrix = react_native_fast_opencv_1.OpenCV.invoke('getPerspectiveTransform', srcPoints, dstPoints);
+            const perspectiveMatrix = react_native_fast_opencv_1.OpenCV.invoke('getPerspectiveTransform', srcPoints, dstPoints, 0);
             const size = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, maxWidth, maxHeight);
-            react_native_fast_opencv_1.OpenCV.invoke('warpPerspective', src, dst, perspectiveMatrix, size);
-            return react_native_fast_opencv_1.OpenCV.invoke('toBase64', dst);
+            const borderValue = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Scalar, 0);
+            react_native_fast_opencv_1.OpenCV.invoke('warpPerspective', src, dst, perspectiveMatrix, size, 1 /* INTER_LINEAR */, 0 /* BORDER_CONSTANT */, borderValue);
+            const dstValue = react_native_fast_opencv_1.OpenCV.toJSValue(dst);
+            // Fix "writeFile got an object" by guaranteeing string type
+            if (dstValue && dstValue.base64) {
+                return typeof dstValue.base64 === 'string' ? dstValue.base64 : String(dstValue.base64);
+            }
+            return undefined;
         }
         catch (e) {
             console.error('Lỗi khi bóp phối cảnh tài liệu (OpenCV):', e);
+            if (onLog)
+                onLog(`[OpenCV Perspective Correction Error]: ${e.message || e}`);
             return undefined;
         }
         finally {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rn-opencv-doc-perspective-correction",
-    "version": "1.0.4",
+    "version": "1.0.6",
     "description": "A React Native library for document corner detection and perspective correction using react-native-fast-opencv",
     "main": "dist/index.js",
     "types": "dist/index.d.ts",

package/src/index.ts

@@ -4,16 +4,10 @@ import { OpenCV, OpenCVMat, ObjectType, DataTypes, ColorConversionCodes } from '
 export type Point = { x: number; y: number };
 
 export class DocumentScanner {
-    /**
-     * Tính khoảng cách Euclidean giữa 2 điểm
-     */
     private static getDistance(p1: Point, p2: Point) {
         return Math.sqrt(Math.pow(p1.x - p2.x, 2) + Math.pow(p1.y - p2.y, 2));
     }
 
-    /**
-     * Sắp xếp 4 điểm thành chuỗi TL, TR, BR, BL
-     */
     private static sortCorners(corners: Point[]): Point[] {
         if (corners.length !== 4) return corners;
 
@@ -29,10 +23,7 @@ export class DocumentScanner {
         });
     }
 
-    /**
-     * Bước 1: Page Corner Detection (Auto-detect góc tài liệu)
-     */
-    public static detectPageCorners(imageBase64: string): Point[] | undefined {
+    public static detectPageCorners(imageBase64: string, onLog?: (msg: string) => void): Point[] | undefined {
         let src: OpenCVMat | null = null;
         let gray: OpenCVMat | null = null;
         let blurred: OpenCVMat | null = null;
@@ -44,57 +35,85 @@ export class DocumentScanner {
             src = OpenCV.base64ToMat(imageBase64);
             gray = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
             blurred = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
-            edges = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
+            edges = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U); // This will hold the threshold output
 
             OpenCV.invoke('cvtColor', src, gray, ColorConversionCodes.COLOR_BGR2GRAY);
 
             const ksize = OpenCV.createObject(ObjectType.Size, 5, 5);
             OpenCV.invoke('GaussianBlur', gray, blurred, ksize, 0);
 
-            OpenCV.invoke('Canny', blurred, edges, 75, 200, 3, false);
+            // Python uses: cv2.threshold(blurred, 0, 255, cv2.THRESH_BINARY + cv2.THRESH_OTSU)
+            // THRESH_BINARY = 0
+            // THRESH_OTSU = 8
+            // THRESH_BINARY + THRESH_OTSU = 8
+            OpenCV.invoke('threshold', blurred, edges, 0, 255, 8);
 
             contoursObj = OpenCV.createObject(ObjectType.MatVector);
             hierarchyObj = OpenCV.createObject(ObjectType.Mat, 0, 0, DataTypes.CV_8U);
 
-            OpenCV.invoke('findContours', edges, contoursObj, hierarchyObj, 1, 2);
+            // Using RETR_EXTERNAL similar to the Python script for outer contours
+            OpenCV.invoke('findContoursWithHierarchy', edges, contoursObj, hierarchyObj, 0 /* RETR_EXTERNAL */, 2 /* CHAIN_APPROX_SIMPLE */);
 
-            const contoursSize = OpenCV.invoke('size', contoursObj) || 0;
-            let maxArea = 0;
-            let largestPoly: Point[] | undefined = undefined;
+            const contoursJS = OpenCV.toJSValue(contoursObj);
+            const contoursArray = contoursJS?.array || [];
+            const contoursSize = contoursArray.length;
+
+            if (contoursSize === 0) {
+                if (onLog) onLog(`[OpenCV] Không tìm thấy contours.`);
+                return undefined;
+            }
 
+            // First pass: extract all areas to sort them and minimize JSI calls
+            let contourMetrics = [];
             for (let i = 0; i < contoursSize; i++) {
-                const contour = OpenCV.invoke('get', contoursObj, i);
-                const area = OpenCV.invoke('contourArea', contour);
-
-                if (area > maxArea) {
-                    const peri = OpenCV.invoke('arcLength', contour, true);
-                    const approx = OpenCV.createObject(ObjectType.PointVector);
-                    OpenCV.invoke('approxPolyDP', contour, approx, 0.02 * peri, true);
-
-                    const approxJS = OpenCV.toJSValue(approx);
-                    if (approxJS && approxJS.array && approxJS.array.length === 4) {
-                        maxArea = area;
-                        largestPoly = approxJS.array as Point[];
-                    }
+                const contour = OpenCV.copyObjectFromVector(contoursObj, i);
+                const areaObj = OpenCV.invoke('contourArea', contour);
+                const area = areaObj ? areaObj.value : 0;
+                if (area > 5000) { // filter very small artifacts
+                    contourMetrics.push({ index: i, area, contour });
                 }
             }
 
+            // Sort contours by area in descending order
+            contourMetrics.sort((a, b) => b.area - a.area);
+
+            let largestPoly: Point[] | undefined = undefined;
+
+            // Second pass: only check approxPolyDP for the largest ones
+            for (let i = 0; i < contourMetrics.length; i++) {
+                const metric = contourMetrics[i];
+                const contour = metric.contour;
+
+                const periObj = OpenCV.invoke('arcLength', contour, true);
+                const peri = periObj ? periObj.value : 0;
+                const approx = OpenCV.createObject(ObjectType.PointVector);
+                OpenCV.invoke('approxPolyDP', contour, approx, 0.02 * peri, true);
+
+                const approxJS = OpenCV.toJSValue(approx);
+                if (approxJS && approxJS.array && approxJS.array.length === 4) {
+                    largestPoly = approxJS.array as Point[];
+                    break; // Stop at the first 4-point polygon like python script
+                }
+            }
+
+            const logMsg = `[OpenCV] Contours: ${contoursSize}. Metrics pass: ${contourMetrics.length}. Poly detect: ${largestPoly ? 'Thành công' : 'Thất bại'}.`;
+            console.log(logMsg);
+            if (onLog) onLog(logMsg);
+
             if (largestPoly && largestPoly.length === 4) {
                 return this.sortCorners(largestPoly);
             }
             return undefined;
-        } catch (e) {
+        } catch (e: any) {
             console.error('Lỗi khi dò tìm góc tài liệu (OpenCV):', e);
-            return undefined;
+            if (onLog) onLog(`[OpenCV Corner Detection Error]: ${e.message}`);
+            throw new Error(`[OpenCV Corner Detection Error]: ${e.message}`);
         } finally {
             OpenCV.clearBuffers();
         }
     }
 
-    /**
-     * Bước 2: Perspective Correction
-     */
-    public static applyPerspectiveCorrection(imageBase64: string, corners: Point[]): string | undefined {
+    public static applyPerspectiveCorrection(imageBase64: string, corners: Point[], onLog?: (msg: string) => void): string | undefined {
         let src: OpenCVMat | null = null;
         let dst: OpenCVMat | null = null;
 
@@ -134,17 +153,27 @@ export class DocumentScanner {
                 ]
             );
 
-            const perspectiveMatrix = OpenCV.invoke('getPerspectiveTransform', srcPoints, dstPoints);
+            const perspectiveMatrix = OpenCV.invoke('getPerspectiveTransform', srcPoints, dstPoints, 0);
 
             const size = OpenCV.createObject(ObjectType.Size, maxWidth, maxHeight);
-            OpenCV.invoke('warpPerspective', src, dst, perspectiveMatrix, size);
+            const borderValue = OpenCV.createObject(ObjectType.Scalar, 0);
+
+            OpenCV.invoke('warpPerspective', src, dst, perspectiveMatrix, size, 1 /* INTER_LINEAR */, 0 /* BORDER_CONSTANT */, borderValue);
 
-            return OpenCV.invoke('toBase64', dst);
+            const dstValue = OpenCV.toJSValue(dst);
+
+            // Fix "writeFile got an object" by guaranteeing string type
+            if (dstValue && dstValue.base64) {
+                return typeof dstValue.base64 === 'string' ? dstValue.base64 : String(dstValue.base64);
+            }
+            return undefined;
         } catch (e) {
             console.error('Lỗi khi bóp phối cảnh tài liệu (OpenCV):', e);
+            if (onLog) onLog(`[OpenCV Perspective Correction Error]: ${(e as Error).message || e}`);
             return undefined;
         } finally {
             OpenCV.clearBuffers();
         }
     }
 }
+