vue-cc-quaggajs
quaggajs 's wrapper for Vue.js
Installtion
npm
npm i vue-cc-quaggajs
<template> <quagga-scanner ref="scanner"></quagga-scanner></template> <script>import { QuaggaScanner } from 'vue-cc-quaggajs'; export default { //... components: { QuaggaScanner, }, // ...}</script>
Usage
init
: function()
{ Quagga; Quagga; Quagga;}
reInit
: function()
{ Quagga; this;}
getImage
: function()
{ const canvas = Quaggacanvasdomimage; return canvas;}
onDetected
: function(result)
Reference: Quagga.onDetected(callback)
default function:
{ console;}
onProcessed
: function(result)
Reference: Quagga.onProcessed(callback)
default function:
{ let drawingCtx = Quaggacanvasctxoverlay drawingCanvas = Quaggacanvasdomoverlay; if result if resultboxes drawingCtx; resultboxes; if resultbox QuaggaImageDebug; if resultcodeResult && resultcodeResultcode QuaggaImageDebug; }
readerType: Array
Set reading barcode type.
Reference: https://github.com/serratus/quaggaJS#decoder
default: [{ format: 'code_128_reader', config: {} }]
readerSize: Object {width: Number, height: Number}
Set reader size. it affects size.
default:
width: 640 height: 480
Basic Example
<template>
<div>
<quagga-scanner :onDetected="logIt" :readerSize="readerSize" :readerType="'ean_reader'"></quagga-scanner>
</div>
</template>
<script>
import { QuaggaScanner } from 'vue-cc-quaggajs'
export default {
name: 'VueBarcodeTest',
data () {
return {
readerSize: {
width: 640,
height: 480
}
}
},
components: {
QuaggaScanner
},
methods: {
logIt (data) {
console.log('detected', data)
}
}
}
</script>