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

![Anchor Path Example](public/example.jpeg)

## 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](https://igutechung.github.io/qrcode-anchor-js/demo/browser/) to experience how to anchor by QR Code.

* Run the demo in Node.js
```sh
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)

```sh
npm install --save qrcode-anchor
```

```js
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();
})
```