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 @   前端搬运工bug  阅读(33)  评论(0编辑  收藏  举报
    相关博文:
    阅读排行:
    · 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
    · 使用C#创建一个MCP客户端
    · ollama系列1:轻松3步本地部署deepseek,普通电脑可用
    · 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
    · 按钮权限的设计及实现
    点击右上角即可分享
    微信分享提示