How to make a mobile document scanner with just Javascript

ColonelParrot — Sat, 20 May 2023 19:06:52 +0000

We now live in an age where you no longer need to buy a $400 printer to scan documents. Tools like Adobe Scan and CamScanner allow you to do it straight from your phone!

Web developers are constantly pushing the limits of what can be accomplished on the web. Now, you can create a mobile document scanner with Javascript!

Let's make one ourselves.

Introduction

We will be using jscanify to do this.

The goal is to convert this image:

To this:

Setting up the environment

We'll be doing this in a web environment. If you want to do this server side or with React, jscanify supports it too (you'll need to check the documentation though).



<html>
  <body>
    <script src="https://docs.opencv.org/4.7.0/opencv.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
  </body>
</html>

Getting the image and scanning

Now, let's load an image and scan it:



<html>
  <body>
    <script src="https://docs.opencv.org/4.7.0/opencv.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/ColonelParrot/jscanify@master/src/jscanify.min.js"></script>
    <img src="https://colonelparrot.github.io/jscanify/images/test/test.png" crossorigin="anonymous" id="image" />
    <script>
      cv.onRuntimeInitialized = function() {
        function scan() {
          const scanner = new jscanify()
          const scanned = scanner.extractPaper(image, 386, 500)
          document.body.appendChild(scanned)
        }
        image.onload = scan

        if (image.complete) {
          scan()
        }
      }
    </script>
  </body>
</html>

We execute the code when OpenCV has loaded by waiting for the onRuntimeInitialized event. Once loaded, we initialize jscanify to create the scanner, and with one line, extract the paper with the extractPaper method. The parameters in the method are the width and height respectively.

So that's it! It's that easy :)

How to make Google's "Report issue" feedback form

ColonelParrot — Wed, 04 Jan 2023 18:54:48 +0000

Do you want to make your own feedback form with screenshot taking & screenshot editing functionality?

Google's feedback form:

Let's make one just like Google's

Luckily for you, there's a library built already for this purpose. Introducing, FeedbackPlus.

ColonelParrot / feedbackplus

orked from puffinsoft/feedbackplus for backwards CDN compatibility.

FeedbackPlus is an open source Javascript library that allows you to add screenshot taking & screenshot editing functionality to your feedback forms

Available for use by cdn or via npm

The project is inspired by Google's report an issue widget, which allows you to take & edit screenshots. Under the hood, it uses the browser display API and fallbacks to html2canvas if available (see here)

Preview (demo)

Taking a Screenshot	Editing screenshot

(click images to enlarge)

Quickstart

For more detailed instructions, see the documentation

You can find bare-minimum demo code for screenshotting & screenshot editing in the demo/simple folder

Import

npm:

$ npm i feedbackplus
import FeedbackPlus from 'feedbackplus'

cdn via jsDelivr (or with cdnjs):

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/ColonelParrot/feedbackplus@master/src/feedbackplus.min.css" /&gt
<script src="https://cdn.jsdelivr.net/gh/ColonelParrot/feedbackplus@master/src/feedbackplus.min.js" defer></script>
<!-- html2canvas import is optionally, but provides better browser

…

View on GitHub

With FeedbackPlus, you can capture screenshots without having to worry about browser support. The library uses the browser's display API to ensure the screenshot is accurate, and fallbacks to html2canvas for better browser support.

Screenshotting

// import FeedbackPlus from 'feedbackplus/src/feedbackplus'
// ^^^ if you're using node ^^^
const feedbackPlus = new FeedbackPlus();

feedbackPlus.capture().then(result => ...)

You can then very quickly just draw the result to a canvas:

const canvas = document.getElementById("canvas")
feedbackPlus.capture().then(({ bitmap, width, height }) => {
  canvas.width = width;
  canvas.height = height;
  canvas.getContext("2d").drawImage(bitmap, 0, 0);
});

Screenshot Example

<canvas id="canvas"></canvas>
<button id="btn">Take screenshot</button>

const canvas = document.getElementById("canvas")
btn.addEventListener('click', () => {
  feedbackPlus.capture().then(({ bitmap, width, height }) => {
    canvas.width = width;
    canvas.height = height;
    canvas.getContext("2d").drawImage(bitmap, 0, 0);
  })
})

Editing Screenshot

Once you have obtained the image bitmap from a screenshot, you can store it in a variable and pass it to showEditDialog to edit it.

feedbackPlus.showEditDialog(bitmap, function (canvas) {
    // user completed edit
    FeedbackPlus.canvasToBitmap(canvas).then(({ bitmap }) => {
      canvas.getContext("2d").drawImage(bitmap, 0, 0);
      feedbackPlus.closeEditDialog();
    });
  }, function () {
    // user cancelled edit
    feedbackPlus.closeEditDialog();
  }
);

It's that easy! Try it out yourself with the demo.

DEV Community: ColonelParrot