qrcode-anchor-js

A pure javascript library that detect QR codes in an image-like source, and use the QR code as anchor to locate a path in the image.

Introduction

• Detect multiple QR Codes at once.
• Detect small ratio QR Codes.
• Take QR Code as anchor to locate a 2D path relatively.
• Browser and Node.js are supported.

Run the demo

• Before running it, try to use our Demo Web to experience how to anchor by QR Code.

• Run the demo in Node.js

cd demo/nodejs
npm install
node index.js

Usage (Browser)

<script src="https://cdn.jsdelivr.net/npm/qrcode-anchor@latest/dist/index.umd.js"></script>
<script>
  QRCodeAnchor.scanCanvas(canvas, {
    boxScaleIteration: 3, // scale down the scan window size to detect smaller QR Code.
    boxOverlapRatio: 0.25, // scan window overlapped size.
    codeCount: 6, // how many QR codes want to scan.
  }).forEach(anchor => {
    // draw the qrcode anchor on canvas (browser or node.js).
      anchor.drawQRCode();

      // location the target rectangle and draw the content in it.
      // [0, 0] implies the top-left corner of QR Code,
      // [1, 1] implies the bottom-right corner of QR Code, etc...,
      // modify the coordinates to locate your target.
      anchor.anchorRect([-0.4,-0.45], [1.5,-0.15]).draw();
})
</script>

Usage (Node.js)

npm install --save qrcode-anchor

import { scanCanvas } from 'qrcode-anchor';

scanCanvas(canvas, {
  boxScaleIteration: 3, // scale down the scan window size to detect smaller QR Code.
  boxOverlapRatio: 0.25, // scan window overlapped size.
  codeCount: 6, // how many QR codes want to scan.
}).forEach(anchor => {
  // draw the qrcode anchor on canvas (browser or node.js).
    anchor.drawQRCode();

    // location the target rectangle and draw the content in it.
    // [0, 0] implies the top-left corner of QR Code,
    // [1, 1] implies the bottom-right corner of QR Code, etc...,
    // modify the coordinates to locate your target.
    anchor.anchorRect([-0.4,-0.45], [1.5,-0.15]).draw();
})