quagga 识别文件上传条形码

注意图片记得清晰一点

quagga.js文件下载地址

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Barcode Scanner</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
  <script src="./quagga.js" type="text/javascript"></script>
</head>

<body>
    
    
  <input type="file" onchange="fileChange(event)">
  <script type="text/javascript" >
 function fileChange(event) {
  const file = event.target.files[0];
  if (!file) {
    console.log("没有选择文件");
    return;
  }

  const fileURL = URL.createObjectURL(file);

  // 使用 Quagga 解码条形码
  Quagga.decodeSingle({
    decoder: {
      readers: [
        "code_128_reader",
        "code_39_reader",
        "code_39_vin_reader",
        "code_93_reader",
        "ean_reader",
        "ean_5_reader",
        "ean_2_reader",
        "ean_8_reader",
        "codabar_reader",
        "upc_reader",
        "upc_e_reader",
        "i2of5_reader",
        "2of5_reader"
      ]
    },
    locate: true, // 启用定位
    src: fileURL, // 使用文件的 URL
    locator: {
      patchSize: "large", // 使用中等大小的补丁  //"small" | "medium" | "large" 指定用于定位的图像补丁的大小。较小的补丁可能在某些情况下提供更高的精度，但会消耗更多的计算资源。
      // halfSample: true,    // 启用半采样
    // area: {
    //   top: "100%",         // 定位区域从顶部开始
    //   right: "0%",      // 右侧50%
    //   left: "-100%",       // 左侧50%
    //   bottom: "100%"     // 底部100%
    // }
    }
  }, function (result) {
    console.log(result); // 查看完整的返回信息
    if (result && result.codeResult) {
      console.log("识别到的信息：", result.codeResult.code);
    } else {
      console.log("未识别到条形码");
    }
  });
}
  </script>
</body>

</html>

 

posted @ 2024-12-06 11:00  前端搬运工bug  阅读(130)  评论(0)    收藏  举报