vue-cc-quaggajs

quaggajs 's wrapper for Vue.js

Installtion

npm

`` bash
npm i vue-cc-quaggajs
`

`vue



`


Usage

$3

`js
function () {
Quagga.init(this.quaggaState, function (err) {
if (err) {
return console.log(err);
}

Quagga.start();
});

Quagga.onDetected(this.onDetected ? this.onDetected : this._onDetected);
Quagga.onProcessed(this.onProcessed ? this.onProcessed : this._onProcessed);
}
`

$3

`js
function () {
Quagga.stop();

this.init();
}
`

$3

`js
function () {
const canvas = Quagga.canvas.dom.image;

return canvas.toDataURL();
}
`

$3

Reference: Quagga.onDetected(callback)

default function:

`js
function (result) {
console.log('detected: ', result);
}
`

$3

Reference: Quagga.onProcessed(callback)

default function:

`js
function (result) {
let drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;

if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, {x: 0, y: 1}, drawingCtx, {color: "green", lineWidth: 2});
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, {x: 0, y: 1}, drawingCtx, {color: "#00F", lineWidth: 2});
}

if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, {x: 'x', y: 'y'}, drawingCtx, {color: 'red', lineWidth: 3});
}
}
},
`

$3

Set reading barcode type.

Reference: https://github.com/serratus/quaggaJS#decoder

default: [{
format: 'code_128_reader',
config: {}
}]

$3

Set reader size. it affects

default:

`js
{
width: 640,
height: 480,
}
`

Basic Example

`



``