Update README.md

README.md

@@ -1,130 +1 @@
-<p align="center">
-    <img src="docs/images/logo-github.png" height="150">
-</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/puffinsoft/jscanify/blob/master/LICENSE"><img src="https://img.shields.io/github/license/puffinsoft/jscanify.svg"></a>
-    <a href="https://npmjs.com/package/jscanify"><img src="https://badgen.net/npm/v/jscanify"></a>
-</p>
-
-<p align="center">
-  <a href="https://nodei.co/npm/jscanify/"><img src="https://nodei.co/npm/jscanify.png"></a>
-</p>
-
-<p align="center">
-Powered with <a href="https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html">opencv.js</a><br/>
-Supports the web, NodeJS, <a href="https://github.com/ColonelParrot/react-scanify-demo">React</a>, and others.
-<br/>
-Available on <a href="https://www.npmjs.com/package/jscanify">npm</a> or via <a href="https://www.jsdelivr.com/package/gh/ColonelParrot/jscanify">cdn</a><br/>
-</p>
-
-**Features**:
-
-- paper detection & highlighting
-- paper scanning with distortion correction
-
-> [!IMPORTANT]  
-> 🎉 _jscanify v1.3.0_ has just been released! **Same API, better results.** See the [release](https://github.com/puffinsoft/jscanify/releases/tag/v1.3.0) to see the difference! 🎉
-
-
-- 🆕 glare suppression
-- 🆕 multi-colored paper support
-
-<hr />
-
-<img src="docs/images/github-explanation-long.png" />
-
-<h3 align="center" margin="0"><a href="https://github.com/puffinsoft/jscanify/wiki">➡️ view documentation</a></h3>
-
-<hr/>
-
-## Quickstart
-
-> **Developers Note**: you can now use the [jscanify debugging tool](https://colonelparrot.github.io/jscanify/tester.html) to observe the result (highlighting, extraction) on test images.
-
-### Import
-
-npm:
-
-```js
-$ npm i jscanify
-import jscanify from 'jscanify'
-```
-
-cdn:
-
-```html
-<script src="https://docs.opencv.org/4.7.0/opencv.js" async></script>
-<!-- warning: loading OpenCV can take some time. Load asynchronously -->
-<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
-<img src="/path/to/your/image.png" id="image" />
-```
-
-```js
-const scanner = new jscanify();
-image.onload = function () {
-  const highlightedCanvas = scanner.highlightPaper(image);
-  document.body.appendChild(highlightedCanvas);
-};
-```
-
-### Extract Paper
-
-```js
-const scanner = new jscanify();
-const paperWidth = 500;
-const paperHeight = 1000;
-image.onload = function () {
-  const resultCanvas = scanner.extractPaper(image, paperWidth, paperHeight);
-  document.body.appendChild(resultCanvas);
-};
-```
-
-### Highlighting Paper in User Camera
-
-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 -->
-```
-
-```js
-const scanner = new jscanify();
-const canvasCtx = canvas.getContext("2d");
-const resultCtx = result.getContext("2d");
-navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
-  video.srcObject = stream;
-  video.onloadedmetadata = () => {
-    video.play();
-
-    setInterval(() => {
-      canvasCtx.drawImage(video, 0, 0);
-      const resultCanvas = scanner.highlightPaper(canvas);
-      resultCtx.drawImage(resultCanvas, 0, 0);
-    }, 10);
-  };
-});
-```
-
-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
-
-<h3 align="center" margin="0"><a href="https://github.com/puffinsoft/jscanify/wiki">➡️ view documentation</a></h3>
+# this repository has been moved to [puffinsoft/jscanify](https://github.com/puffinsoft/jscanify)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "jscanify",
-  "version": "1.3.3",
+  "version": "1.4.0",
   "description": "Open-source Javascript mobile document scanner.",
   "main": "src/jscanify-node.js",
   "directories": {
@@ -25,8 +25,8 @@
   },
   "homepage": "https://colonelparrot.github.io/jscanify/",
   "dependencies": {
-    "canvas": "^2.11.2",
-    "jsdom": "^22.0.0",
-    "mocha": "^10.2.0"
+    "canvas": "^3.1.0",
+    "jsdom": "^26.0.0",
+    "mocha": "^11.1.0"
   }
 }

src/jscanify-node.js

@@ -1,4 +1,4 @@
-/*! jscanify v1.3.3 | (c) ColonelParrot and other contributors | MIT License */
+/*! jscanify v1.4.0 | (c) ColonelParrot and other contributors | MIT License */
 
 const { Canvas, createCanvas, Image, ImageData } = require("canvas");
 const { JSDOM } = require("jsdom");
@@ -153,9 +153,9 @@ class jscanify {
   extractPaper(image, resultWidth, resultHeight, cornerPoints) {
     const canvas = createCanvas();
     const img = cv.imread(image);
-    const maxContour = this.findPaperContour(img);
+    const maxContour = cornerPoints ? null : this.findPaperContour(img);
 
-    if(maxContour == null){
+    if(maxContour == null && cornerPoints === undefined){
       return null;
     }
 

src/jscanify.js

@@ -1,4 +1,4 @@
-/*! jscanify v1.3.3 | (c) ColonelParrot and other contributors | MIT License */
+/*! jscanify v1.4.0 | (c) ColonelParrot and other contributors | MIT License */
 
 (function (global, factory) {
   typeof exports === "object" && typeof module !== "undefined"
@@ -144,9 +144,9 @@
     extractPaper(image, resultWidth, resultHeight, cornerPoints) {
       const canvas = document.createElement("canvas");
       const img = cv.imread(image);
-      const maxContour = this.findPaperContour(img);
+      const maxContour = cornerPoints ? null : this.findPaperContour(img);
 
-      if(maxContour == null){
+      if(maxContour == null && cornerPoints === undefined){
         return null;
       }
 

test/tests.js

@@ -16,122 +16,125 @@ const path = require("path");
 const OUTPUT_FOLDER = __dirname.replaceAll("\\", "/") + "/output/";
 
 const TEST_IMAGE_DIRECTORY = path.join(
-  __dirname,
-  "..",
-  "docs",
-  "images",
-  "test"
+    __dirname,
+    "..",
+    "docs",
+    "images",
+    "test"
 );
 
 /**
  * delete previously generated output images
  */
 function setup() {
-  console.log("=== setting up tests ===");
-  console.log("Deleting previously generated images");
+    console.log("=== setting up tests ===");
+    console.log("Deleting previously generated images");
 
-  if (!existsSync(OUTPUT_FOLDER)) {
-    mkdirSync(OUTPUT_FOLDER);
-  }
+    if (!existsSync(OUTPUT_FOLDER)) {
+        mkdirSync(OUTPUT_FOLDER);
+    }
 
-  readdirSync(OUTPUT_FOLDER).forEach((file) => {
-    unlinkSync(path.join(OUTPUT_FOLDER, file));
-  })
+    readdirSync(OUTPUT_FOLDER).forEach((file) => {
+        unlinkSync(path.join(OUTPUT_FOLDER, file));
+    })
 }
 
-console.log("=== beginning  tests ===");
-console.log("loading OpenCV.js...");
+let scanner;
+let cv;
 
-const scanner = new jscanify();
-scanner.loadOpenCV(function (cv) {
+before(function (done) {
+    console.log("=== beginning  tests ===");
+    console.log("loading OpenCV.js...");
 
-  console.log("Finished loading OpenCV.js");
-  console.log("Writing test images to: " + OUTPUT_FOLDER);
+    scanner = new jscanify();
+    scanner.loadOpenCV(function (loadedCv) {
+        cv = loadedCv;
 
-  /**
-   * tests an individual image
-   */
-  function test(testImage, imageCount) {
+        console.log("Finished loading OpenCV.js");
+        console.log("Writing test images to: " + OUTPUT_FOLDER);
+        setup()
+        done();
+    });
+});
+
+/**
+ * tests an individual image
+ */
+function test(testImage, imageCount) {
     describe("image #" + imageCount, function () {
-      it("should highlight paper", function (done) {
-        const highlighted = scanner.highlightPaper(testImage);
-        const higlightedOutputPath = OUTPUT_FOLDER + "highlighted-" + imageCount + ".jpg";
-        writeFileSync(
-          higlightedOutputPath,
-          highlighted.toBuffer("image/jpeg")
-        );
+        it("should highlight paper", function () {
+            const highlighted = scanner.highlightPaper(testImage);
+            const higlightedOutputPath = OUTPUT_FOLDER + "highlighted-" + imageCount + ".jpg";
+            writeFileSync(
+                higlightedOutputPath,
+                highlighted.toBuffer("image/jpeg")
+            );
 
-        assert.ok(existsSync(higlightedOutputPath));
-        done();
-      });
-
-      it("should extract paper", function (done) {
-        const extracted = scanner.extractPaper(testImage, 386, 500);
-        const extractedOutputPath = OUTPUT_FOLDER + "extracted-" + imageCount + ".jpg";
-        
-        writeFileSync(
-          extractedOutputPath,
-          extracted.toBuffer("image/jpeg")
-        );
-
-        assert.ok(existsSync(extractedOutputPath));
-        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();
+            assert.ok(existsSync(higlightedOutputPath));
         });
 
-        const cornerPointsOutputPath = OUTPUT_FOLDER + "corner_points-" + imageCount + ".jpg";
-        writeFileSync(cornerPointsOutputPath, canvas.toBuffer("image/jpeg"));
+        it("should extract paper", function () {
+            const extracted = scanner.extractPaper(testImage, 386, 500);
+            const extractedOutputPath = OUTPUT_FOLDER + "extracted-" + imageCount + ".jpg";
 
-        assert.ok(existsSync(cornerPointsOutputPath));
-        done();
-      });
+            writeFileSync(
+                extractedOutputPath,
+                extracted.toBuffer("image/jpeg")
+            );
+
+            assert.ok(existsSync(extractedOutputPath));
+        });
+
+        it("should label corner points", function () {
+            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();
+            });
+
+            const cornerPointsOutputPath = OUTPUT_FOLDER + "corner_points-" + imageCount + ".jpg";
+            writeFileSync(cornerPointsOutputPath, canvas.toBuffer("image/jpeg"));
+
+            assert.ok(existsSync(cornerPointsOutputPath));
+        });
     });
-  }
+}
 
-  setup();
+let imageCount = 1;
 
-  let imageCount = 1;
-
-  /*
-   * go through all images in test image directory
-   */
-  readdirSync(TEST_IMAGE_DIRECTORY).forEach((file) => {
+/*
+ * go through all images in test image directory
+ */
+readdirSync(TEST_IMAGE_DIRECTORY).forEach((file) => {
     const TEST_IMAGE_PATH = path.join(TEST_IMAGE_DIRECTORY, file);
 
-    if(!file.endsWith("-sized.png")){ // these images are for the website, not testing
-      let tempCount = imageCount++;
+    if (!file.endsWith("-sized.png")) { // these images are for the website, not testing
+        let tempCount = imageCount++;
 
-      loadImage(TEST_IMAGE_PATH).then(function (image) {
-        test(image, tempCount);
-      });
+        loadImage(TEST_IMAGE_PATH).then(function (image) {
+            test(image, tempCount);
+        });
     }
-  })
-});
+})