jscanify 1.1.0 → 1.2.0

package/README.md

@@ -3,6 +3,10 @@
 </p>
 
 <p align="center">
+    <a href="https://www.jsdelivr.com/package/gh/ColonelParrot/jscanify"><img src="https://data.jsdelivr.com/v1/package/gh/ColonelParrot/jscanify/badge"></a>
+    <a href="https://cdnjs.com/libraries/jscanify"><img src="https://img.shields.io/cdnjs/v/jscanify"></a>
+    <a href="https://npmjs.com/package/jscanify"><img src="https://badgen.net/npm/dw/jscanify"></a>
+    <br />
     <a href="https://github.com/ColonelParrot/jscanify/blob/master/LICENSE"><img src="https://img.shields.io/github/license/ColonelParrot/jscanify.svg"></a>
     <a href="https://GitHub.com/ColonelParrot/jscanify/releases/"><img src="https://img.shields.io/github/release/ColonelParrot/jscanify.svg"></a>
     <a href="https://npmjs.com/package/jscanify"><img src="https://badgen.net/npm/v/jscanify"></a>
@@ -22,8 +26,8 @@ Available on <a href="https://www.npmjs.com/package/jscanify">npm</a> or via <a
 - paper detection & highlighting
 - paper scanning with distortion correction
 
-| Image Highlighting                                | Scanned Result                                  |
-| ------------------------------------------------- | ----------------------------------------------- |
+| Image Highlighting                           | Scanned Result                             |
+| -------------------------------------------- | ------------------------------------------ |
 | <img src="docs/images/highlight-paper1.png"> | <img src="docs/images/scanned-paper1.png"> |
 | <img src="docs/images/highlight-paper2.png"> | <img src="docs/images/scanned-paper2.png"> |
 
@@ -46,6 +50,8 @@ cdn:
 <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
 ```
 
+> **Note**: jscanify on NodeJS is slightly different. See [wiki: use on NodeJS](https://github.com/ColonelParrot/jscanify/wiki#use-on-nodejs).
+
 ### Highlight Paper in Image
 
 ```html
@@ -67,9 +73,8 @@ const scanner = new jscanify();
 const paperWidth = 500;
 const paperHeight = 1000;
 image.onload = function () {
-  scanner.extractPaper(image, paperWidth, paperHeight, (resultCanvas) => {
-    document.body.appendChild(resultCanvas);
-  });
+  const resultCanvas = scanner.extractPaper(image, paperWidth, paperHeight);
+  document.body.appendChild(resultCanvas);
 };
 ```
 
@@ -78,9 +83,10 @@ image.onload = function () {
 The following code continuously reads from the user's camera and highlights the paper:
 
 ```html
-<video id="video"></video>
-<canvas id="canvas"></canvas>  <!-- original video -->
-<canvas id="result"></canvas>  <!-- highlighted video -->
+<video id="video"></video> <canvas id="canvas"></canvas>
+<!-- original video -->
+<canvas id="result"></canvas>
+<!-- highlighted video -->
 ```
 
 ```js
@@ -102,6 +108,8 @@ navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
 ```
 
 To export the paper to a PDF, see [here](https://stackoverflow.com/questions/23681325/convert-canvas-to-pdf)
+
 ### Notes
+
 - for optimal paper detection, the paper should be placed on a flat surface with a solid background color
-- we recommend wrapping your code using `jscanify` in a window `load` event listener to ensure OpenCV is loaded
+- we recommend wrapping your code using `jscanify` in a window `load` event listener to ensure OpenCV is loaded

package/docs/index.html

@@ -103,7 +103,7 @@ image.onload = function () {
     It's that easy! Come check out the <a href="https://github.com/ColonelParrot/jscanify/wiki"
       target="_blank">documentation</a>!
   </div>
-  <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@latest/src/jscanify.min.js"></script>
+  <script src="../src/jscanify.js"></script>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <script src="script.js"></script>
 

package/docs/script.js

@@ -32,12 +32,11 @@ $('#demo-images .image-container').click(function () {
         newImg.src = imageSrc
 
         newImg.onload = function(){
-            scanner.extractPaper(newImg, 386, 500, (resultCanvas) => {
-                $('#demo-result').append(resultCanvas);
+            const resultCanvas = scanner.extractPaper(newImg, 386, 500);
+            $('#demo-result').append(resultCanvas);
                 
-                const highlightedCanvas = scanner.highlightPaper(newImg)
-                $('#demo-result').append(highlightedCanvas);
-            });
+            const highlightedCanvas = scanner.highlightPaper(newImg)
+            $('#demo-result').append(highlightedCanvas);
         }
     })
 })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jscanify",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Open-source Javascript mobile document scanner.",
   "main": "src/jscanify-node.js",
   "directories": {

package/src/jscanify-node.js

@@ -1,4 +1,4 @@
-/*! jscanify v1.1.0 | (c) ColonelParrot and other contributors | MIT License */
+/*! jscanify v1.2.0 | (c) ColonelParrot and other contributors | MIT License */
 
 const { Canvas, createCanvas, Image, ImageData } = require("canvas");
 const { JSDOM } = require("jsdom");
@@ -143,7 +143,7 @@ class jscanify {
    * @param {*} onComplete callback with `HTMLCanvasElement` passed - the unwarped paper
    * @param {*} cornerPoints optional custom corner points, in case automatic corner points are incorrect
    */
-  extractPaper(image, resultWidth, resultHeight, onComplete, cornerPoints) {
+  extractPaper(image, resultWidth, resultHeight, cornerPoints) {
     const canvas = createCanvas();
     const img = cv.imread(image);
     const maxContour = this.findPaperContour(img);
@@ -187,15 +187,10 @@ class jscanify {
     );
 
     cv.imshow(canvas, warpedDst);
-    const canvasContext = canvas.getContext("2d");
-    canvasContext.save();
-    canvasContext.scale(1, -1);
-    canvasContext.drawImage(canvas, 0, -resultHeight);
-    canvasContext.restore();
 
     img.delete();
     warpedDst.delete();
-    onComplete(canvas);
+    return canvas;
   }
 
   /**
@@ -222,25 +217,25 @@ class jscanify {
     for (let i = 0; i < contour.data32S.length; i += 2) {
       const point = { x: contour.data32S[i], y: contour.data32S[i + 1] };
       const dist = distance(point, center);
-      if (point.x < center.x && point.y > center.y) {
+      if (point.x < center.x && point.y < center.y) {
         // top left
         if (dist > topLeftCornerDist) {
           topLeftCorner = point;
           topLeftCornerDist = dist;
         }
-      } else if (point.x > center.x && point.y > center.y) {
+      } else if (point.x > center.x && point.y < center.y) {
         // top right
         if (dist > topRightCornerDist) {
           topRightCorner = point;
           topRightCornerDist = dist;
         }
-      } else if (point.x < center.x && point.y < center.y) {
+      } else if (point.x < center.x && point.y > center.y) {
         // bottom left
         if (dist > bottomLeftCornerDist) {
           bottomLeftCorner = point;
           bottomLeftCornerDist = dist;
         }
-      } else if (point.x > center.x && point.y < center.y) {
+      } else if (point.x > center.x && point.y > center.y) {
         // bottom right
         if (dist > bottomRightCornerDist) {
           bottomRightCorner = point;

package/src/jscanify.js

@@ -1,11 +1,11 @@
-/*! jscanify v1.1.0 | (c) ColonelParrot and other contributors | MIT License */
+/*! jscanify v1.2.0 | (c) ColonelParrot and other contributors | MIT License */
 
 (function (global, factory) {
   typeof exports === "object" && typeof module !== "undefined"
     ? (module.exports = factory())
     : typeof define === "function" && define.amd
-      ? define(factory)
-      : (global.jscanify = factory());
+    ? define(factory)
+    : (global.jscanify = factory());
 })(this, function () {
   "use strict";
 
@@ -20,7 +20,7 @@
   }
 
   class jscanify {
-    constructor() { }
+    constructor() {}
 
     /**
      * Finds the contour of the paper within the image
@@ -134,7 +134,7 @@
      * @param {*} onComplete callback with `HTMLCanvasElement` passed - the unwarped paper
      * @param {*} cornerPoints optional custom corner points, in case automatic corner points are incorrect
      */
-    extractPaper(image, resultWidth, resultHeight, onComplete, cornerPoints) {
+    extractPaper(image, resultWidth, resultHeight, cornerPoints) {
       const canvas = document.createElement("canvas");
 
       const img = cv.imread(image);
@@ -185,33 +185,17 @@
 
       cv.imshow(canvas, warpedDst);
 
-      const newImg = document.createElement("img");
-      newImg.src = canvas.toDataURL();
-      newImg.onload = function () {
-        // flip unwarped image
-
-        let ctx = canvas.getContext("2d");
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        canvas.width = resultWidth;
-        canvas.height = resultHeight;
-        ctx.setTransform(1, 0, 0, -1, 0, canvas.height);
-
-        ctx.drawImage(newImg, 0, 0);
-
-        ctx.setTransform(1, 0, 0, 1, 0, 0);
-
-        img.delete();
-        warpedDst.delete();
-        onComplete(canvas);
-      };
+      img.delete()
+      warpedDst.delete()
+      return canvas;
     }
-    
+
     /**
      * Calculates the corner points of a contour.
      * @param {*} contour contour from {@link findPaperContour}
      * @returns object with properties `topLeftCorner`, `topRightCorner`, `bottomLeftCorner`, `bottomRightCorner`, each with `x` and `y` property
      */
-     getCornerPoints(contour) {
+    getCornerPoints(contour) {
       let rect = cv.minAreaRect(contour);
       const center = rect.center;
 
@@ -230,25 +214,25 @@
       for (let i = 0; i < contour.data32S.length; i += 2) {
         const point = { x: contour.data32S[i], y: contour.data32S[i + 1] };
         const dist = distance(point, center);
-        if (point.x < center.x && point.y > center.y) {
+        if (point.x < center.x && point.y < center.y) {
           // top left
           if (dist > topLeftCornerDist) {
             topLeftCorner = point;
             topLeftCornerDist = dist;
           }
-        } else if (point.x > center.x && point.y > center.y) {
+        } else if (point.x > center.x && point.y < center.y) {
           // top right
           if (dist > topRightCornerDist) {
             topRightCorner = point;
             topRightCornerDist = dist;
           }
-        } else if (point.x < center.x && point.y < center.y) {
+        } else if (point.x < center.x && point.y > center.y) {
           // bottom left
           if (dist > bottomLeftCornerDist) {
             bottomLeftCorner = point;
             bottomLeftCornerDist = dist;
           }
-        } else if (point.x > center.x && point.y < center.y) {
+        } else if (point.x > center.x && point.y > center.y) {
           // bottom right
           if (dist > bottomRightCornerDist) {
             bottomRightCorner = point;
@@ -264,8 +248,7 @@
         bottomRightCorner,
       };
     }
-
   }
 
   return jscanify;
-});
+});

package/test/tests.js

@@ -1,8 +1,12 @@
+/*
+  run tests with: npm test
+*/
+
 console.log("RUNNING JSCANIFY TESTS");
 console.log("Warning: This may take a bit");
 
-const { Canvas, createCanvas, Image, ImageData, loadImage } = require("canvas");
-const { writeFileSync, unlinkSync, existsSync } = require("fs");
+const { loadImage, createCanvas } = require("canvas");
+const { mkdirSync, writeFileSync, unlinkSync, existsSync } = require("fs");
 const assert = require("assert");
 
 const jscanify = require("../src/jscanify-node");
@@ -11,8 +15,11 @@ const path = require("path");
 const outputPaths = {
   highlight: __dirname + "/output/highlighted.jpg",
   extracted: __dirname + "/output/extracted.jpg",
+  cornerPoints: __dirname + "/output/corner_points.jpg",
 };
 
+const baseFolder = __dirname.replaceAll("\\", "/") + "/output/";
+
 const TEST_IMAGE_PATH = path.join(
   __dirname,
   "..",
@@ -30,6 +37,10 @@ function setup() {
       unlinkSync(path);
     }
   });
+
+  if (!existsSync(baseFolder)) {
+    mkdirSync(baseFolder);
+  }
 }
 
 function test() {
@@ -39,7 +50,8 @@ function test() {
   console.log("loading OpenCV.js...");
   scanner.loadOpenCV(function (cv) {
     console.log("Finished loading OpenCV.js");
-    describe("feature tests", function (done) {
+    console.log("Writing test images to: " + baseFolder);
+    describe("feature tests", function () {
       it("should highlight paper", function (done) {
         const highlighted = scanner.highlightPaper(testImage);
         writeFileSync(
@@ -48,19 +60,53 @@ function test() {
         );
 
         assert.ok(existsSync(outputPaths.highlight));
-        done()
+        done();
       });
 
       it("should extract paper", function (done) {
-        scanner.extractPaper(testImage, 386, 500, function (extracted) {
-          writeFileSync(
-            outputPaths.extracted,
-            extracted.toBuffer("image/jpeg")
-          );
-
-          assert.ok(existsSync(outputPaths.extracted));
-          done();
+        const extracted = scanner.extractPaper(testImage, 386, 500);
+        writeFileSync(
+          outputPaths.extracted,
+          extracted.toBuffer("image/jpeg")
+        );
+
+        assert.ok(existsSync(outputPaths.extracted));
+        done();
+      });
+
+      it("should label corner points", function (done) {
+        const parsedImage = cv.imread(testImage);
+        const paperContour = scanner.findPaperContour(parsedImage);
+        const {
+          topLeftCorner,
+          topRightCorner,
+          bottomLeftCorner,
+          bottomRightCorner,
+        } = scanner.getCornerPoints(paperContour, testImage);
+
+        const canvas = createCanvas();
+
+        cv.imshow(canvas, parsedImage);
+        const ctx = canvas.getContext("2d");
+        const points = [
+          { p: topLeftCorner, text: "top left corner" },
+          { p: topRightCorner, text: "top right corner" },
+          { p: bottomLeftCorner, text: "bottom left corner" },
+          { p: bottomRightCorner, text: "bottom right corner" },
+        ];
+        ctx.fillStyle = "cyan";
+        ctx.font = "25px serif";
+        points.forEach(({ p: point, text }) => {
+          ctx.beginPath();
+          ctx.arc(point.x, point.y, 15, 0, 2 * Math.PI, false);
+          ctx.fillText(text, point.x + 30, point.y)
+          ctx.fill();
         });
+
+        writeFileSync(outputPaths.cornerPoints, canvas.toBuffer("image/jpeg"));
+
+        assert.ok(existsSync(outputPaths.cornerPoints));
+        done();
       });
     });
   });

package/install.md

@@ -1,5 +0,0 @@
-run
-
-```
-npm run install_arm64
-```