利用组件读取条形码
利用组件读取条形码
提问于 2020-08-13 14:01:32
我想通过CDN安装一个名为vue-cc-quaggajs的组件来读取条形码。
我试过以下几种方法：
new Vue({
el: "#app",
data: {
readerSize: {
width: 640,
height: 480
}
},
methods: {
logIt (data) {
console.log('detected', data)
}
},
components: {
//QuaggaScanner
},
})<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@carloscgo/vue-cc-quaggajs@2.0.0/dist/vue-quagga.js"></script>
<div id="app">
<quagga-scanner :onDetected="logIt" :readerSize="readerSize" :readerType="'ean_reader'"></quagga-scanner>
</div>
但我遇到了一些错误，比如：
无法读取“扫描根”中未定义的“宽度”属性
你能帮我一下吗？我不知道我是在引用正确的JS文件，还是可以使用其他组件来扫描条形码。
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-15 20:57:42
通过使用CDN构建组件，我成功地使用了quagga-scanner。它作为默认包工作。这里是实时演示。我使用这个图像，它为我提供了console.log的输出。
备注：使用一个好的相机来读取条形码。Stackoverflow片段将无法工作，因为您没有从代码段获得相机权限。
Vue.component('quagga-scanner', {
props: {
onDetected: {
type: Function,
},
onProcessed: {
type: Function,
},
readerType: {
type: String,
default: 'code_128_reader',
},
readerSize: {
width: {
type: Number,
default: 640,
},
height: {
type: Number,
default: 480,
}
}
},
data() {
return {
quaggaState: {
inputStream: {
type: 'LiveStream',
constraints: {
width: {
min: this.readerSize.width
},
height: {
min: this.readerSize.height
},
facingMode: 'environment',
aspectRatio: {
min: 1,
max: 2
}
}
},
locator: {
patchSize: 'medium',
halfSample: true
},
numOfWorkers: 4,
frequency: 10,
decoder: {
readers: [{
format: this.readerType,
config: {}
}]
},
locate: true
},
}
},
mounted() {
this.init();
},
methods: {
init() {
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);
},
reInit() {
Quagga.stop();
this.init();
},
getImage() {
const canvas = Quagga.canvas.dom.image;
return canvas.toDataURL();
},
_onProcessed(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
});
}
}
},
_onDetected(result) {
console.log('detected: ', result);
},
},
template: `
<div id="interactive" class="viewport scanner">
<video></video>
<canvas class="drawingBuffer"></canvas>
</div>
`
})
new Vue({
el: "#app",
data: {
readerSize: {
width: 640,
height: 480
}
},
methods: {
logIt(data) {
console.log('detected', data)
},
}
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* In order to place the tracking correctly */
canvas.drawing,
canvas.drawingBuffer {
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@carloscgo/vue-cc-quaggajs@2.0.0/dist/vue-quagga.js"></script>
<script src="https://cdn.rawgit.com/serratus/quaggaJS/0420d5e0/dist/quagga.min.js"></script>
<div id="app">
<quagga-scanner :on-detected="logIt" :reader-size="readerSize" :reader-type="'ean_reader'"></quagga-scanner>
</div>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63396887
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号