https://github.com/puffinsoft/jscanify

Open-source Javascript mobile document scanner.
https://github.com/puffinsoft/jscanify

document-scanner javascript js nodejs

Last synced: about 1 month 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 1 year ago)
• Default Branch: master
• Last Pushed: 2024-07-07T18:15:15.000Z (5 months ago)
• Last Synced: 2024-07-07T19:35:32.793Z (5 months 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

        


    





    

    

    

    


    

    





  





Open-source pure Javascript implemented mobile document scanner. 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

| Image Highlighting                           | Scanned Result                             |

| -------------------------------------------- | ------------------------------------------ |

|  |  |

|  |  |

## 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