不能直接靠 Canvas 像素读取实现稳定、实用的实时条形码扫描，因其仅提供原始像素数据，缺乏解码能力；需结合 jsQR 等专业库，以 Canvas 为帧数据桥梁，才能实现高效、容错的识别。
不能直接靠 Canvas 像素读取实现稳定、实用的实时条形码扫描。
Canvas 像素读取本身不识别条形码
Canvas 的 getImageData() 只能拿到某帧画面的原始像素（RGBA 数组），它不具备解码能力。条形码（如 EAN-13、CODE128）和二维码（如 QR Code）是结构化编码，需专用算法解析其黑白模块排列、校验位、纠错逻辑等——这远超像素遍历或边缘检测的范畴。
纯靠 Canvas 手动分析像素，理论上可行但实践中几乎不可行：
- 光照变化、角度倾斜、模糊抖动会导致像素值剧烈波动，误判率极高
- 不同条形码类型规则差异大，需分别实现解码器，工程量巨大
- 实时性差：每帧都要做灰度转换、二值化、定位图形提取、符号解析，CPU 负担重，卡顿明显
- 无容错机制：缺少 ZXing 或 jsQR 等成熟库内置的纠错、重试、多格式自动识别能力
正确路径：用 Canvas 辅助，靠专业解码库驱动
现代 Web 条码扫描实际采用“Canvas + 解码库”协作模式，Canvas 是桥梁，不是大脑：
立即学习“前端免费学习笔记（深入）”；
-
视频流抓帧：用
video播放摄像头流，通过requestAnimationFrame定期触发绘制到canvas -
Canvas 提供图像数据：调用
ctx.drawImage(video, 0, 0, width, height)→ctx.getImageData(...)获取帧数据 -
交给解码库处理：把像素数据传给
jsQR（专注 QR/Aztec）、QuaggaJS（支持 CODE128/EAN 等）或html5-qrcode（封装更完整）进行识别 - 结果回调驱动 UI：解码成功后，再用 Canvas 绘制扫描框、高亮区域或提示动画，提升体验
推荐方案：优先使用 html5-qrcode
它已封装好整套流程，隐藏了 Canvas 底层细节，开箱即用且健壮：
- 自动处理摄像头权限、设备枚举（前置/后置）、分辨率适配
- 内部用 Canvas 抓帧 + Web Worker 解码，不阻塞主线程
- 支持扫码框自定义、手电筒开关、文件上传回扫、多格式识别（含 UPC/EAN/CODE128）
- 一行 CDN 引入即可启动：
<script src="https://cdn.jsdelivr.net/npm/html5-qrcode@2.3.8/minified/html5-qrcode.min.js"></script>
若坚持手动控制 Canvas 流程
可参考以下关键点（以 jsQR 为例）：
- 确保
video元素已播放（video.play()），否则drawImage会失败 - 用固定尺寸 canvas（如 400×300），避免缩放失真影响解码
- 只在必要帧调用解码（如每 200ms 一帧），避免过度消耗
- 解码前建议转为灰度图（减少计算量），jsQR 内部已优化此步
- 捕获
NotAllowedError或NotFoundError并友好提示用户
