Compare commits

...

6 Commits

Author SHA1 Message Date
ColonelParrot
9749c97498
Update README.md 2025-02-01 21:12:20 -05:00
ColonelParrot
57bf40f3fb bump to v1.3.3 2025-02-01 21:10:04 -05:00
ColonelParrot
c8e6ab035d Add null check in extractPaper 2025-02-01 21:06:30 -05:00
ColonelParrot
e2af210cf2 port bugfix to node 2025-02-01 21:01:53 -05:00
Leon Scherer
f0428d79ca fix: sending invalid index to opencv 2025-02-01 20:23:48 -05:00
ColonelParrot
a447c90039 add wiki link 2025-01-29 13:01:03 -05:00
5 changed files with 30 additions and 137 deletions

128
README.md
View File

@ -1,127 +1 @@
<p align="center"> # this repository has been moved to [puffinsoft/jscanify](https://github.com/puffinsoft/jscanify)
<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" />
<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

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "jscanify", "name": "jscanify",
"version": "1.2.0", "version": "1.3.3",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "jscanify", "name": "jscanify",
"version": "1.2.0", "version": "1.3.3",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"canvas": "^2.11.2", "canvas": "^2.11.2",

View File

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

View File

@ -1,4 +1,4 @@
/*! jscanify v1.3.2 | (c) ColonelParrot and other contributors | MIT License */ /*! jscanify v1.3.3 | (c) ColonelParrot and other contributors | MIT License */
const { Canvas, createCanvas, Image, ImageData } = require("canvas"); const { Canvas, createCanvas, Image, ImageData } = require("canvas");
const { JSDOM } = require("jsdom"); const { JSDOM } = require("jsdom");
@ -80,7 +80,10 @@ class jscanify {
} }
} }
const maxContour = contours.get(maxContourIndex); const maxContour =
maxContourIndex >= 0 ?
contours.get(maxContourIndex) :
null;
imgGray.delete(); imgGray.delete();
imgBlur.delete(); imgBlur.delete();
@ -138,6 +141,9 @@ class jscanify {
/** /**
* Extracts and undistorts the image detected within the frame. * Extracts and undistorts the image detected within the frame.
*
* Returns `null` if no paper is detected.
*
* @param {*} image image to process * @param {*} image image to process
* @param {*} resultWidth desired result paper width * @param {*} resultWidth desired result paper width
* @param {*} resultHeight desired result paper height * @param {*} resultHeight desired result paper height
@ -148,6 +154,11 @@ class jscanify {
const canvas = createCanvas(); const canvas = createCanvas();
const img = cv.imread(image); const img = cv.imread(image);
const maxContour = this.findPaperContour(img); const maxContour = this.findPaperContour(img);
if(maxContour == null){
return null;
}
const { const {
topLeftCorner, topLeftCorner,
topRightCorner, topRightCorner,

View File

@ -1,4 +1,4 @@
/*! jscanify v1.3.2 | (c) ColonelParrot and other contributors | MIT License */ /*! jscanify v1.3.3 | (c) ColonelParrot and other contributors | MIT License */
(function (global, factory) { (function (global, factory) {
typeof exports === "object" && typeof module !== "undefined" typeof exports === "object" && typeof module !== "undefined"
@ -71,7 +71,10 @@
} }
} }
const maxContour = contours.get(maxContourIndex); const maxContour =
maxContourIndex >= 0 ?
contours.get(maxContourIndex) :
null;
imgGray.delete(); imgGray.delete();
imgBlur.delete(); imgBlur.delete();
@ -129,7 +132,10 @@
/** /**
* Extracts and undistorts the image detected within the frame. * Extracts and undistorts the image detected within the frame.
* @param {*} image image to process *
* Returns `null` if no paper is detected.
*
* @param {*} image image to process
* @param {*} resultWidth desired result paper width * @param {*} resultWidth desired result paper width
* @param {*} resultHeight desired result paper height * @param {*} resultHeight desired result paper height
* @param {*} cornerPoints optional custom corner points, in case automatic corner points are incorrect * @param {*} cornerPoints optional custom corner points, in case automatic corner points are incorrect
@ -137,11 +143,13 @@
*/ */
extractPaper(image, resultWidth, resultHeight, cornerPoints) { extractPaper(image, resultWidth, resultHeight, cornerPoints) {
const canvas = document.createElement("canvas"); const canvas = document.createElement("canvas");
const img = cv.imread(image); const img = cv.imread(image);
const maxContour = this.findPaperContour(img); const maxContour = this.findPaperContour(img);
if(maxContour == null){
return null;
}
const { const {
topLeftCorner, topLeftCorner,
topRightCorner, topRightCorner,