Open-source Javascript mobile document scanner.
npm install jscanify
Powered with opencv.js
Supports the web, NodeJS, React, and others.
Available on npm or via cdn
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