react-native-rectangle-doc-scanner 0.26.0 → 0.28.0

package/dist/DocScanner.js

@@ -133,7 +133,8 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
         try {
             // Report frame size for coordinate transformation
             updateFrameSize(frame.width, frame.height);
-            const ratio = 480 / frame.width;
+            // Use higher resolution for better accuracy - 720p instead of 480p
+            const ratio = 720 / frame.width;
             const width = Math.floor(frame.width * ratio);
             const height = Math.floor(frame.height * ratio);
             step = 'resize';
@@ -149,26 +150,36 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
             step = 'cvtColor';
             reportStage(step);
             react_native_fast_opencv_1.OpenCV.invoke('cvtColor', mat, mat, react_native_fast_opencv_1.ColorConversionCodes.COLOR_BGR2GRAY);
-            const morphologyKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 5, 5);
+            // Apply Gaussian blur to reduce noise
+            const gaussianKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 5, 5);
+            step = 'GaussianBlur';
+            reportStage(step);
+            react_native_fast_opencv_1.OpenCV.invoke('GaussianBlur', mat, mat, gaussianKernel, 0);
+            // Morphological operations to enhance edges
+            const morphologyKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 3, 3);
             step = 'getStructuringElement';
             reportStage(step);
             const element = react_native_fast_opencv_1.OpenCV.invoke('getStructuringElement', react_native_fast_opencv_1.MorphShapes.MORPH_RECT, morphologyKernel);
             step = 'morphologyEx';
             reportStage(step);
-            react_native_fast_opencv_1.OpenCV.invoke('morphologyEx', mat, mat, react_native_fast_opencv_1.MorphTypes.MORPH_OPEN, element);
-            const gaussianKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 5, 5);
-            step = 'GaussianBlur';
-            reportStage(step);
-            react_native_fast_opencv_1.OpenCV.invoke('GaussianBlur', mat, mat, gaussianKernel, 0);
+            react_native_fast_opencv_1.OpenCV.invoke('morphologyEx', mat, mat, react_native_fast_opencv_1.MorphTypes.MORPH_CLOSE, element);
+            // Canny edge detection with optimized thresholds
             step = 'Canny';
             reportStage(step);
-            react_native_fast_opencv_1.OpenCV.invoke('Canny', mat, mat, 75, 100);
+            react_native_fast_opencv_1.OpenCV.invoke('Canny', mat, mat, 50, 150);
+            // Dilate edges slightly to connect nearby contours
+            step = 'dilate';
+            reportStage(step);
+            const dilateKernel = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.Size, 2, 2);
+            const dilateElement = react_native_fast_opencv_1.OpenCV.invoke('getStructuringElement', react_native_fast_opencv_1.MorphShapes.MORPH_RECT, dilateKernel);
+            react_native_fast_opencv_1.OpenCV.invoke('dilate', mat, mat, dilateElement);
             step = 'createContours';
             reportStage(step);
             const contours = react_native_fast_opencv_1.OpenCV.createObject(react_native_fast_opencv_1.ObjectType.PointVectorOfVectors);
-            react_native_fast_opencv_1.OpenCV.invoke('findContours', mat, contours, react_native_fast_opencv_1.RetrievalModes.RETR_LIST, react_native_fast_opencv_1.ContourApproximationModes.CHAIN_APPROX_SIMPLE);
+            react_native_fast_opencv_1.OpenCV.invoke('findContours', mat, contours, react_native_fast_opencv_1.RetrievalModes.RETR_EXTERNAL, react_native_fast_opencv_1.ContourApproximationModes.CHAIN_APPROX_SIMPLE);
             let best = null;
             let maxArea = 0;
+            const frameArea = width * height;
             step = 'toJSValue';
             reportStage(step);
             const contourVector = react_native_fast_opencv_1.OpenCV.toJSValue(contours);
@@ -180,11 +191,13 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
                 step = `contour_${i}_area`;
                 reportStage(step);
                 const { value: area } = react_native_fast_opencv_1.OpenCV.invoke('contourArea', contour, false);
+                const areaRatio = area / frameArea;
                 if (__DEV__) {
-                    console.log('[DocScanner] area ratio', area / (width * height));
+                    console.log('[DocScanner] area ratio', areaRatio);
                 }
-                // Lower threshold to detect smaller documents
-                if (area < width * height * 0.0001) {
+                // Filter by area: document should be at least 5% and at most 95% of frame
+                // This prevents detecting tiny noise or the entire frame
+                if (areaRatio < 0.05 || areaRatio > 0.95) {
                     continue;
                 }
                 step = `contour_${i}_arcLength`;
@@ -192,10 +205,11 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
                 const { value: perimeter } = 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);
                 let approxArray = [];
-                let usedBoundingRect = false;
-                let epsilonBase = 0.006 * perimeter;
-                for (let attempt = 0; attempt < 10; attempt += 1) {
-                    const epsilon = epsilonBase * (1 + attempt);
+                // Start with smaller epsilon for more accurate corner detection
+                // Try epsilon values from 0.5% to 5% of perimeter
+                const epsilonValues = [0.005, 0.01, 0.015, 0.02, 0.025, 0.03, 0.035, 0.04, 0.045, 0.05];
+                for (let attempt = 0; attempt < epsilonValues.length; attempt += 1) {
+                    const epsilon = epsilonValues[attempt] * perimeter;
                     step = `contour_${i}_approxPolyDP_attempt_${attempt}`;
                     reportStage(step);
                     react_native_fast_opencv_1.OpenCV.invoke('approxPolyDP', contour, approx, epsilon, true);
@@ -210,41 +224,8 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
                         approxArray = candidate;
                         break;
                     }
-                    if (approxArray.length === 0 || Math.abs(candidate.length - 4) < Math.abs(approxArray.length - 4)) {
-                        approxArray = candidate;
-                    }
-                }
-                if (approxArray.length !== 4) {
-                    // fallback: boundingRect (axis-aligned) so we always have 4 points
-                    try {
-                        const rect = react_native_fast_opencv_1.OpenCV.invoke('boundingRect', contour);
-                        // Convert the rect object to JS value to get actual coordinates
-                        const rectJS = react_native_fast_opencv_1.OpenCV.toJSValue(rect);
-                        const rectValue = rectJS?.value ?? rectJS;
-                        const rectX = rectValue?.x ?? 0;
-                        const rectY = rectValue?.y ?? 0;
-                        const rectW = rectValue?.width ?? 0;
-                        const rectH = rectValue?.height ?? 0;
-                        // Validate that we have a valid rectangle
-                        if (rectW > 0 && rectH > 0) {
-                            approxArray = [
-                                { x: rectX, y: rectY },
-                                { x: rectX + rectW, y: rectY },
-                                { x: rectX + rectW, y: rectY + rectH },
-                                { x: rectX, y: rectY + rectH },
-                            ];
-                            usedBoundingRect = true;
-                            if (__DEV__) {
-                                console.log('[DocScanner] using boundingRect fallback:', approxArray);
-                            }
-                        }
-                    }
-                    catch (err) {
-                        if (__DEV__) {
-                            console.warn('[DocScanner] boundingRect fallback failed:', err);
-                        }
-                    }
                 }
+                // Only proceed if we found exactly 4 corners
                 if (approxArray.length !== 4) {
                     continue;
                 }
@@ -266,23 +247,21 @@ const DocScanner = ({ onCapture, overlayColor = '#e7a649', autoCapture = true, m
                     x: pt.x / ratio,
                     y: pt.y / ratio,
                 }));
-                // Skip convexity check for boundingRect (always forms a valid rectangle)
-                if (!usedBoundingRect) {
-                    try {
-                        if (!isConvexQuadrilateral(points)) {
-                            if (__DEV__) {
-                                console.log('[DocScanner] not convex, skipping:', points);
-                            }
-                            continue;
-                        }
-                    }
-                    catch (err) {
+                // Verify the quadrilateral is convex (valid document shape)
+                try {
+                    if (!isConvexQuadrilateral(points)) {
                         if (__DEV__) {
-                            console.warn('[DocScanner] convex check error:', err, 'points:', points);
+                            console.log('[DocScanner] not convex, skipping:', points);
                         }
                         continue;
                     }
                 }
+                catch (err) {
+                    if (__DEV__) {
+                        console.warn('[DocScanner] convex check error:', err, 'points:', points);
+                    }
+                    continue;
+                }
                 if (area > maxArea) {
                     best = points;
                     maxArea = area;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-rectangle-doc-scanner",
-  "version": "0.26.0",
+  "version": "0.28.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": {

package/src/DocScanner.tsx

@@ -147,7 +147,8 @@ export const DocScanner: React.FC<Props> = ({
       // Report frame size for coordinate transformation
       updateFrameSize(frame.width, frame.height);
 
-      const ratio = 480 / frame.width;
+      // Use higher resolution for better accuracy - 720p instead of 480p
+      const ratio = 720 / frame.width;
       const width = Math.floor(frame.width * ratio);
       const height = Math.floor(frame.height * ratio);
       step = 'resize';
@@ -166,29 +167,41 @@ export const DocScanner: React.FC<Props> = ({
       reportStage(step);
       OpenCV.invoke('cvtColor', mat, mat, ColorConversionCodes.COLOR_BGR2GRAY);
 
-      const morphologyKernel = OpenCV.createObject(ObjectType.Size, 5, 5);
+      // Apply Gaussian blur to reduce noise
+      const gaussianKernel = OpenCV.createObject(ObjectType.Size, 5, 5);
+      step = 'GaussianBlur';
+      reportStage(step);
+      OpenCV.invoke('GaussianBlur', mat, mat, gaussianKernel, 0);
+
+      // Morphological operations to enhance edges
+      const morphologyKernel = OpenCV.createObject(ObjectType.Size, 3, 3);
       step = 'getStructuringElement';
       reportStage(step);
       const element = OpenCV.invoke('getStructuringElement', MorphShapes.MORPH_RECT, morphologyKernel);
       step = 'morphologyEx';
       reportStage(step);
-      OpenCV.invoke('morphologyEx', mat, mat, MorphTypes.MORPH_OPEN, element);
+      OpenCV.invoke('morphologyEx', mat, mat, MorphTypes.MORPH_CLOSE, element);
 
-      const gaussianKernel = OpenCV.createObject(ObjectType.Size, 5, 5);
-      step = 'GaussianBlur';
-      reportStage(step);
-      OpenCV.invoke('GaussianBlur', mat, mat, gaussianKernel, 0);
+      // Canny edge detection with optimized thresholds
       step = 'Canny';
       reportStage(step);
-      OpenCV.invoke('Canny', mat, mat, 75, 100);
+      OpenCV.invoke('Canny', mat, mat, 50, 150);
+
+      // Dilate edges slightly to connect nearby contours
+      step = 'dilate';
+      reportStage(step);
+      const dilateKernel = OpenCV.createObject(ObjectType.Size, 2, 2);
+      const dilateElement = OpenCV.invoke('getStructuringElement', MorphShapes.MORPH_RECT, dilateKernel);
+      OpenCV.invoke('dilate', mat, mat, dilateElement);
 
       step = 'createContours';
       reportStage(step);
       const contours = OpenCV.createObject(ObjectType.PointVectorOfVectors);
-      OpenCV.invoke('findContours', mat, contours, RetrievalModes.RETR_LIST, ContourApproximationModes.CHAIN_APPROX_SIMPLE);
+      OpenCV.invoke('findContours', mat, contours, RetrievalModes.RETR_EXTERNAL, ContourApproximationModes.CHAIN_APPROX_SIMPLE);
 
       let best: Point[] | null = null;
       let maxArea = 0;
+      const frameArea = width * height;
 
       step = 'toJSValue';
       reportStage(step);
@@ -203,13 +216,15 @@ export const DocScanner: React.FC<Props> = ({
         step = `contour_${i}_area`;
         reportStage(step);
         const { value: area } = OpenCV.invoke('contourArea', contour, false);
+        const areaRatio = area / frameArea;
 
         if (__DEV__) {
-          console.log('[DocScanner] area ratio', area / (width * height));
+          console.log('[DocScanner] area ratio', areaRatio);
         }
 
-        // Lower threshold to detect smaller documents
-        if (area < width * height * 0.0001) {
+        // Filter by area: document should be at least 5% and at most 95% of frame
+        // This prevents detecting tiny noise or the entire frame
+        if (areaRatio < 0.05 || areaRatio > 0.95) {
           continue;
         }
 
@@ -219,11 +234,13 @@ export const DocScanner: React.FC<Props> = ({
         const approx = OpenCV.createObject(ObjectType.PointVector);
 
         let approxArray: Array<{ x: number; y: number }> = [];
-        let usedBoundingRect = false;
-        let epsilonBase = 0.006 * perimeter;
 
-        for (let attempt = 0; attempt < 10; attempt += 1) {
-          const epsilon = epsilonBase * (1 + attempt);
+        // Start with smaller epsilon for more accurate corner detection
+        // Try epsilon values from 0.5% to 5% of perimeter
+        const epsilonValues = [0.005, 0.01, 0.015, 0.02, 0.025, 0.03, 0.035, 0.04, 0.045, 0.05];
+
+        for (let attempt = 0; attempt < epsilonValues.length; attempt += 1) {
+          const epsilon = epsilonValues[attempt] * perimeter;
           step = `contour_${i}_approxPolyDP_attempt_${attempt}`;
           reportStage(step);
           OpenCV.invoke('approxPolyDP', contour, approx, epsilon, true);
@@ -241,46 +258,9 @@ export const DocScanner: React.FC<Props> = ({
             approxArray = candidate as Array<{ x: number; y: number }>;
             break;
           }
-
-          if (approxArray.length === 0 || Math.abs(candidate.length - 4) < Math.abs(approxArray.length - 4)) {
-            approxArray = candidate as Array<{ x: number; y: number }>;
-          }
-        }
-
-        if (approxArray.length !== 4) {
-          // fallback: boundingRect (axis-aligned) so we always have 4 points
-          try {
-            const rect = OpenCV.invoke('boundingRect', contour);
-            // Convert the rect object to JS value to get actual coordinates
-            const rectJS = OpenCV.toJSValue(rect);
-            const rectValue = rectJS?.value ?? rectJS;
-
-            const rectX = rectValue?.x ?? 0;
-            const rectY = rectValue?.y ?? 0;
-            const rectW = rectValue?.width ?? 0;
-            const rectH = rectValue?.height ?? 0;
-
-            // Validate that we have a valid rectangle
-            if (rectW > 0 && rectH > 0) {
-              approxArray = [
-                { x: rectX, y: rectY },
-                { x: rectX + rectW, y: rectY },
-                { x: rectX + rectW, y: rectY + rectH },
-                { x: rectX, y: rectY + rectH },
-              ];
-              usedBoundingRect = true;
-
-              if (__DEV__) {
-                console.log('[DocScanner] using boundingRect fallback:', approxArray);
-              }
-            }
-          } catch (err) {
-            if (__DEV__) {
-              console.warn('[DocScanner] boundingRect fallback failed:', err);
-            }
-          }
         }
 
+        // Only proceed if we found exactly 4 corners
         if (approxArray.length !== 4) {
           continue;
         }
@@ -307,21 +287,19 @@ export const DocScanner: React.FC<Props> = ({
           y: pt.y / ratio,
         }));
 
-        // Skip convexity check for boundingRect (always forms a valid rectangle)
-        if (!usedBoundingRect) {
-          try {
-            if (!isConvexQuadrilateral(points)) {
-              if (__DEV__) {
-                console.log('[DocScanner] not convex, skipping:', points);
-              }
-              continue;
-            }
-          } catch (err) {
+        // Verify the quadrilateral is convex (valid document shape)
+        try {
+          if (!isConvexQuadrilateral(points)) {
             if (__DEV__) {
-              console.warn('[DocScanner] convex check error:', err, 'points:', points);
+              console.log('[DocScanner] not convex, skipping:', points);
             }
             continue;
           }
+        } catch (err) {
+          if (__DEV__) {
+            console.warn('[DocScanner] convex check error:', err, 'points:', points);
+          }
+          continue;
         }
 
         if (area > maxArea) {