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


  • paper detection & highlighting
  • paper scanning with distortion correction
Image Highlighting Scanned Result




$ npm i jscanify
import jscanify from 'jscanify'


<script src="" async></script>
<!-- warning: loading OpenCV can take some time. Load asynchronously -->
<script src=""></script>

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

Highlight Paper in Image

<img src="/path/to/your/image.png" id="image" />

const scanner = new jscanify();
image.onload = function () {
  const highlightedCanvas = scanner.highlightPaper(image);

Extract Paper

const scanner = new jscanify();
const paperWidth = 500;
const paperHeight = 1000;
image.onload = function () {
  const resultCanvas = scanner.extractPaper(image, paperWidth, paperHeight);

Highlighting Paper in User Camera

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

<video id="video"></video> <canvas id="canvas"></canvas>
<!-- original video -->
<canvas id="result"></canvas>
<!-- highlighted video -->

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 = () => {;

    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


  • 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 Github