Home

Import

npm:

$ npm i jscanify
import jscanify from 'jscanify'

cdn:

<script src="https://docs.opencv.org/4.7.0/opencv.js" async></script>
<!-- warning: loading OpenCV can take some time. Load asynchronously -->
<script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>

Snippets

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);
  document.body.appendChild(highlightedCanvas);
};

Extract Paper

const scanner = new jscanify();
const paperWidth = 500;
const paperHeight = 1000;
image.onload = function () {
  scanner.extractPaper(image, paperWidth, paperHeight, (resultCanvas) => {
    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);
  };
});

Core Methods

• findPaperContour(img) - returns cv.Mat - finds the contour of the paper within the image
• highlightPaper(image, options) - returns HTMLCanvasElement - highlights the paper detected inside the image
• extractPaper(image, resultWidth, resultHeight, onComplete, cornerPoints) - returns HTMLCanvasElement - extracts and undistorts the image detected within the frame
• getCornerPoints(contour) - returns Object - calculates the corner points of a contour

Note: parameters with name img/image can be passed anything that OpenCV can process. This means HTMLImageElement, HTMLCanvasElement and Files (from file inputs)

findPaperContour(img)

Finds the contour of the paper within img.

Returns: cv.Mat containing the contour. This value should be passed to getCornerPoints to get the corner points of the contour

highlightPaper(image, options)

Highlights the piece of paper within image.

options accepts two properties:

• color: any valid value for strokeStyle. Default orange
• thickness: thickness of outline in pixels. Default 10

Returns: HTMLCanvasElement containing image with the outline draw on it.

extractPaper(image, resultWidth, resultHeight, onComplete, cornerPoints?)

Extracts the piece of paper in image.

Undistorts the detected paper and scales it to the properly width (resultWidth) and height (resultHeight), both in pixels.

onComplete is called when this operation is complete. An HTMLCanvasElement will be the only passed parameter. The canvas will contain the resulting piece of paper.

By default the piece of paper is automatically detected and extracted. However, if automatic detection results are unsatisfactory, custom cornerPoints can optionally be provided. cornerPoints must be in the format:

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

getCornerPoints(contour)

Gets the corner points of the contour extracted with findPaperContour.

Returns: object containing corner points compliant with extractPaper's cornerPoints spec (see above).