ZXing JS库可解码QR码但无法识别UPC-A等普通条形码的问题咨询

• 你使用的BrowserMultiFormatReader默认初始化时未开启针对一维条码的优化配置，默认解码优先级向QR码倾斜，缺少针对UPC-A等一维码的解码参数配置
• 解码一维码时默认未启用TRY_HARDER模式，该模式会消耗更多性能提升低清晰度、倾斜条码的识别率，ZXing官方在线工具默认开启了该参数

步骤1：初始化读取器时显式传入格式列表和解码参数 #

构造BrowserMultiFormatReader时主动声明你需要支持的所有条码格式，同时开启TRY_HARDER优化：

// 先定义需要支持的条码格式，按需添加你需要的类型
const supportedFormats = [
  ZXing.BarcodeFormat.QR_CODE,
  ZXing.BarcodeFormat.UPC_A,
  ZXing.BarcodeFormat.UPC_E,
  ZXing.BarcodeFormat.EAN_13,
  ZXing.BarcodeFormat.EAN_8,
  ZXing.BarcodeFormat.CODE_39,
  ZXing.BarcodeFormat.CODE_128,
  ZXing.BarcodeFormat.ITF
]
// 定义解码提示参数
const hints = new Map()
hints.set(ZXing.DecodeHintType.TRY_HARDER, true)
// 传入参数初始化读取器
const codeReader = new ZXing.BrowserMultiFormatReader(supportedFormats, hints)

步骤2：调整冗余逻辑 #

你当前代码中img.onload回调里嵌套$(document).ready属于逻辑冗余，会导致解码时机延迟，甚至部分场景下不触发解码，建议调整为所有逻辑放在dom就绪回调内，完整修改后的代码如下：

<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">
$(document).ready(function(){
  // 定义支持的格式
  const supportedFormats = [
    ZXing.BarcodeFormat.QR_CODE,
    ZXing.BarcodeFormat.UPC_A,
    ZXing.BarcodeFormat.UPC_E,
    ZXing.BarcodeFormat.EAN_13,
    ZXing.BarcodeFormat.EAN_8,
    ZXing.BarcodeFormat.CODE_39,
    ZXing.BarcodeFormat.CODE_128,
    ZXing.BarcodeFormat.ITF
  ]
  // 配置解码参数
  const hints = new Map()
  hints.set(ZXing.DecodeHintType.TRY_HARDER, true)
  // 初始化读取器
  const codeReader = new ZXing.BrowserMultiFormatReader(supportedFormats, hints);
  console.log('ZXing code reader initialized');

  // 解码图片方法
  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}`);
  }

  // 加载图片
  var img = $('.imageContainer img')[0];
  img.onload = function () {
     console.info("Image loaded !");
     decodeBarcode(img);
  };
  img.onerror = function () {
     console.error("Cannot load image");
     // 其他逻辑处理
  };
  img.src = "img/test.jpg";
})
</script>

可选优化 #

如果你的测试图片中仅包含单一条码，可额外添加hints.set(ZXing.DecodeHintType.PURE_BARCODE, true)参数，进一步提升一维码识别率。

内容的提问来源于stack exchange，提问作者user1129107