ZXing图书馆将解码二维码，但不解码条形码

Question

我使用ZXing库在HTML/JS环境中解码QR码和条形码。以下代码返回任何二维码的有效响应，但常规UPC-a(或任何其他(条形码会产生错误

代码基于
https://github.com/zxing-js/library/blob/master/docs/examples/multi-image/index.html

HTML以将图像加载到

<div class="imageContainer">
<img src="">
</div>

加载库和JS逻辑
"zxing/库"："0.18.6〃
https://github.com/zxing-js/library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript" src="./node_modules/@zxing/library/umd/index.min.js"></script>
<script type="text/javascript">
//initialize the reader
const codeReader = new ZXing.BrowserMultiFormatReader();
console.log('ZXing code reader initialized');
//set, load, and send image to decoder
var img = $('.imageContainer img')[0];
img.onload = function () {
console.info("Image loaded !");
$(document).ready(function(){
decodeBarcode(img);
});
};
img.onerror = function () {
console.error("Cannot load image");
//do something else...
};
img.src = "img/test.jpg";
//decode the image
function decodeBarcode(img) {
codeReader.decodeFromImage(img).then((result) => {
console.log(result)
})
.catch((err) => {
console.log(err)
})
console.log(`Started decode for image from ${img.src}`);
}
</script>

任何有效条形码的预期结果，但目前仅适用于二维码

{
"text": "Hello :)",
"rawBytes": {
},
"numBits": 152,
"resultPoints": [
],
"format": 11,
"timestamp": 1636657881106,
"resultMetadata": {}
}

UPC-A条形码(或任何不是QR码的条形码(的实际结果

R: No MultiFormat Readers were able to detect the code.
at ir.decodeInternal (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:252678)
at ir.decodeWithState (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:251730)
at t.BrowserMultiFormatReader.decodeBitmap (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:288702)
at t.BrowserMultiFormatReader.decode (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:34909)
at n (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:34314)
at https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:34495
at new Promise (<anonymous>)
at t.BrowserMultiFormatReader.decodeOnce (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:34475)
at t.BrowserMultiFormatReader.decodeFromImageElement (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:32072)
at t.BrowserMultiFormatReader.decodeFromImage (https://www.myserver.com/node_modules/@zxing/library/umd/index.min.js:15:31441)

有趣的是，同样的UPC-A图像在https://zxing.org/w/decode.jspx

我尝试过无数种条形码变体，所有这些都在ZXing网站上成功解码。不管条形码是什么，如果它不是二维码，就会产生上面的错误。我是不是错过了什么？

如何使用ZXingJS库成功解码标准UPC-a条形码？

Answer 1

由于UPC-A默认情况下未启用，您必须将其作为BrowserMultiFormatReader的hints提供

const hints = new Map();
const enabledFormats = [
// ...ALL_FORMATS_WHICH_YOU_WANT_TO_ENABLE
ZXing.BarcodeFormat.UPC_A,
];
hints.set(ZXing.DecodeHintType.POSSIBLE_FORMATS, enabledFormats);
const codeReader = new ZXing.BrowserMultiFormatReader(hints);

可用的条形码格式可以在这里找到。

Answer 2

processFileImg(e) {
this.$el.innerHTML += `<img id="image" src="${e.target.result}"/>`;
const img = document.getElementById('image');
img.videoWidth = 0;
this.codeReader.decodeFromImage(img).then((result) => {
this.$emit("decode", result.text);
this.$emit("result", result);
}).catch((err) => {
this.$emit("error", err);
})
}

对我来说确实有效！