Getting started

Initialize the scanner:

const scanner = new jscanify();

Loading OpenCV

For the web:

OpenCV.js can take some time to load. Therefore, we recommend you wrap your jscanify code in a load event listener, like so:

window.addEventListener("load", function(){
    const scanner = new jscanify();
    // your jscanify code here...
})

For Node.js: See #use-on-nodejs

Examples

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);
  // returns a canvas, which we add to DOM
  document.body.appendChild(highlightedCanvas);
};

Tip

here we pass an img to jscanify to process. You can also pass a canvas or File.

Extract Paper

const scanner = new jscanify();
const paperWidth = 500;
const paperHeight = 1000;
image.onload = function () {
  const resultCanvas = scanner.extractPaper(image, paperWidth, paperHeight);
  // returns a canvas, which we add to DOM
  document.body.appendChild(resultCanvas);
};

Extract corner points

const scanner = new jscanify();
// IMPORTANT: parse with imread() before passing in. This step is not required for other methods.
image.onload = function () {
    const contour = scanner.findPaperContour(cv.imread(image));
    const cornerPoints = scanner.getCornerPoints(contour);
    console.log(cornerPoints)
}

Result:

{
    topLeftCorner: { x: ..., y: ... },
    topRightCorner: { x: ..., y: ... },
    bottomLeftCorner: { x: ..., y: ... },
    bottomRightCorner: { x: ..., y: ... },
}

Using custom corner points

const cornerPoints = {
    topLeftCorner: { x: ..., y: ... },
    topRightCorner: { x: ..., y: ... },
    bottomLeftCorner: { x: ..., y: ... },
    bottomRightCorner: { x: ..., y: ... },
}

const scanner = new jscanify();
const paperWidth = 500;
const paperHeight = 1000;
image.onload = function () {
  const resultCanvas = scanner.extractPaper(image, paperWidth, paperHeight, cornerPoints);
  // returns a canvas, which we add to DOM
  document.body.appendChild(resultCanvas);
};

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

    setInterval(() => {
      canvasCtx.drawImage(video, 0, 0);
      const resultCanvas = scanner.highlightPaper(canvas);
      resultCtx.drawImage(resultCanvas, 0, 0);
    }, 10);
  };
});

Use on Node.js

Important! You will come across multiple confusing errors if you forget this: OpenCV must be loaded before any method is called. jscanify handles this natively. You must call loadOpenCV:

const scanner = new jscanify()
scanner.loadOpenCV(function(cv){
    // scanner methods are safe to use now...
    scanner.extractPaper()
    scanner.highlightPaper() 
    // etc,.
})

Tip

loadOpenCV is an asynchronous, non-blocking method. It may take a few seconds to finish. This is normal.

NodeJS does not have elements like HTMLCanvasElement or HTMLImageElement. As such, we simulate this with the canvas package. Don't worry - it's just as easy!

To read an image from a path, you should use the loadImage method from the canvas library:

import { loadImage } from 'canvas';

loadImage(path_to_image).then((image) => {
   const extracted = scanner.extractPaper(image, width, height) //...
   const highlighted = scanner.highlightPaper(image) //...
})

More example uses can be seen in the test script. For instance, to write the result canvas to a file, see this line.

---

Next step: API