https://github.com/puffinsoft/jscanify
Open-source Javascript mobile document scanner.
https://github.com/puffinsoft/jscanify
document-scanner javascript js nodejs
Last synced: 6 months ago
JSON representation
Open-source Javascript mobile document scanner.
- Host: GitHub
- URL: https://github.com/puffinsoft/jscanify
- Owner: puffinsoft
- License: mit
- Created: 2023-04-13T16:11:12.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-07T18:15:15.000Z (about 1 year ago)
- Last Synced: 2024-07-07T19:35:32.793Z (about 1 year ago)
- Topics: document-scanner, javascript, js, nodejs
- Language: JavaScript
- Homepage: https://puffinsoft.github.io/jscanify/
- Size: 5.31 MB
- Stars: 925
- Watchers: 9
- Forks: 49
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://github.com/puffinsoft/jscanify/releases/tag/v1.3.0) to see the difference! 🎉
- 🆕 glare suppression
- 🆕 multi-colored paper support
➡️ view documentation
## 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
```
> **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
```
```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
```
```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
➡️ view documentation