quaggajs 's wrapper for Vue.js
npm i vue-quaggajs
<template>
<div>
<v-quagga :onDetected="logIt" :readerSize="readerSize" :readerType="['ean_reader']"></v-quagga>
</div>
</template>
<script>
import Vue from 'vue'
import VueQuagga from 'vue-quaggajs';
// register component 'v-quagga'
Vue.use(VueQuagga);
export default {
name: 'VueBarcodeTest',
data () {
return {
readerSize: {
width: 640,
height: 480
},
detecteds: []
}
},
methods: {
logIt (data) {
console.log('detected', data)
}
}
}
</script>
Reference: Quagga.onDetected(callback)
default function:
function (result) {
console.log('detected: ', result);
}
Reference: Quagga.onProcessed(callback)
default function:
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});
}
}
},
Set reading barcode type.
Reference: https://github.com/serratus/quaggaJS#decoder
default: ['code_128_reader']
Set reader size. it affects
default:
{
width: 640,
height: 480,
}