我正在尝试在Angular 2中使用QuaggaJS。该项目使用路由,因此当点击添加页面时,QuaggaJS应该加载Javascript文件,如下所示:
<script src="vendor/jquery-1.9.0.min.js" type="text/javascript"></script>
<script src="../dist/quagga.js" type="text/javascript"></script>
<script src="live_w_locator.js" type="text/javascript"></script>
但是,这些不加载。提供了一个允许使用QuaggaJS API的quagga.d.ts文件,但我不确定如何使用它。
是否需要将Javascript文件导入到项目中,就像打字稿组件一样?
组件文件:
ngOnInit() {
console.log(this);
let state = {
inputStream: {
type : "LiveStream",
constraints: {
width: {min: 640},
height: {min: 480},
facingMode: "environment",
aspectRatio: {min: 1, max: 2}
}
},
locator: {
patchSize: "medium",
halfSample: true
},
numOfWorkers: 4,
decoder: {
readers : [{
format: "code_128_reader",
config: {}
}]
},
locate: true
};
Quagga.init(state, (err) => {
if (err) {
return console.log(err);
}
Quagga.start();
});
Quagga.onProcessed(this.onProcessed);
Quagga.onDetected(this.logCode);
}
onProcessed(result: any) {
var 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});
}
}
}
logCode(result) {
this.lastResult = result.codeResult.code;
console.log(this);
}