jscanify

Powered with opencv.js

Supports the web, NodeJS, React, and others.


Available on npm or via cdn

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 to see the difference! 🎉


- 🆕 glare suppression
- 🆕 multi-colored paper support

---

➡️ view documentation

---

Quickstart

> Developers Note: you can now use the jscanify debugging tool to observe the result (highlighting, extraction) on test images.

$3

npm:

``js
$ npm i jscanify
import jscanify from 'jscanify'
`

cdn:

`html



`

> Note: jscanify on NodeJS is slightly different. See wiki: use on NodeJS.

$3

`html

`

`js
const scanner = new jscanify();
image.onload = function () {
const highlightedCanvas = scanner.highlightPaper(image);
document.body.appendChild(highlightedCanvas);
};
`

$3

`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);
};
`

$3

The following code continuously reads from the user's camera and highlights the paper:

`html




`

`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

$3

- 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

➡️ view documentation