quagga 识别文件上传条形码
注意图片记得清晰一点
<!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>
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 使用C#创建一个MCP客户端
· ollama系列1:轻松3步本地部署deepseek,普通电脑可用
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· 按钮权限的设计及实现