jscanify: The Javascript Document Scanning Library

Introduction

jscanify is a robust Javascript library developed by puffinsoft, designed for efficient document scanning directly within web and Node.js environments. Leveraging the power of opencv.js, it provides advanced features for detecting, correcting, and extracting documents from images or live camera feeds. With 1649 stars and 74 forks on GitHub, it's a well-regarded tool in the developer community.

Key features include:

Paper detection and highlighting
Distortion correction for scanned documents
New in v1.3.0+: Glare suppression
New in v1.3.0+: Multi-colored paper support

Whether you're building a web application that needs to process user-uploaded documents or a backend service for image analysis, jscanify offers a comprehensive solution.

Installation

jscanify is easy to integrate into your project. You can install it via npm or include it directly via CDN.

npm:

npm i jscanify

Then, import it into your Javascript code:

import jscanify from 'jscanify'

CDN:

For browser-based applications, include the following script tags. Note that opencv.js should be loaded asynchronously.

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

Note: jscanify on NodeJS has slight differences. Refer to the official documentation for specific instructions.

Examples

jscanify provides straightforward APIs for common document scanning tasks.

Highlight Paper in Image

This example demonstrates how to highlight detected paper within an existing 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

To extract the detected paper as a separate, corrected image:

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

jscanify can also process live video streams from a user's camera, continuously highlighting paper in real-time.

<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);
  };
});

You can also use the jscanify debugging tool to test and observe results on various images.

Why Use jscanify?

jscanify stands out as a powerful and flexible solution for document scanning in Javascript. Its key advantages include:

Robust Detection: Reliably identifies and highlights paper in diverse conditions, even with multi-colored backgrounds.
Advanced Correction: Automatically corrects distortion, providing clean and usable scanned outputs.
Real-time Processing: Capable of processing live camera feeds for interactive scanning experiences.
Cross-Platform Support: Works seamlessly across web browsers and Node.js environments.
Active Development: Continuously improved with new features like glare suppression, ensuring cutting-edge performance.

It simplifies complex image processing tasks, allowing developers to integrate sophisticated document scanning functionalities with minimal effort.