2 篇文章带有标签 “qr-code”

发布

二维码识别器：支持图片上传、剪贴板粘贴与摄像头扫码

二维码识别器是一款纯前端在线 QR 码识别工具，基于 jsQR 库实现。它支持图片上传、拖拽、剪贴板粘贴以及摄像头实时扫码四种方式，所有图片处理均在浏览器本地完成，不会上传到任何服务器，保护隐私安全。

  • 图片上传识别：点击或拖拽图片文件到识别区域，即可自动解析二维码内容。
  • 剪贴板粘贴识别：直接按 Ctrl / ⌘ + V 粘贴剪贴板中的图片，无需先保存文件。
  • 摄像头实时扫码：调用设备摄像头，持续扫描画面中的二维码，适合快速识别实物上的 QR 码。
  • 前后摄像头切换：支持在设备的前置与后置摄像头之间切换，适应不同扫码场景。
  • 双指缩放对焦：摄像头模式下支持双指捏合缩放画面，双击重置缩放，方便对准远距离或微小二维码。
  • UTF-8 中文支持：底层使用 TextDecoder('utf-8') 解码二进制数据，确保中文、日文等非 ASCII 字符正确显示。
  • 链接自动识别：识别结果若为 URL，自动渲染为可点击的超链接，一键跳转。
  • 一键复制结果：识别后点击"复制识别结果"按钮，快速将内容复制到剪贴板。
  • 纯前端隐私安全：所有图像处理在本地完成，图片不离开浏览器，无需担心隐私泄露。

二维码识别器依赖 getUserMedia 和 jsQR 库，建议使用 Chrome、Edge、Safari、Firefox 等现代浏览器。

tool qr-code scanner decoder browser jsqr camera

笔记

下午折腾了两个纯前端二维码工具：一个识别器、一个生成器。记录下调试过程中踩过的几个坑，免得以后重复踩。

用的是 jsQR。识别英文二维码没问题，但中文二维码识别结果直接为空。

查了下，jsQR 返回的对象里有两个字段：

  • code.data：legacy 字符串，对多字节字符支持不好
  • code.binaryData：原始字节数组

正确做法是用 binaryData 配合 TextDecoder 按 UTF-8 解码：

function decodeQRData(code) {
  if (code.binaryData && code.binaryData.length) {
    const bytes = new Uint8Array(code.binaryData);
    return new TextDecoder('utf-8').decode(bytes);
  }
  return code.data || '';
}

图片识别和摄像头扫码两处都要走这个解码逻辑。

生成器中 qr.addData(value) 对中文支持不行，需要先做一次 UTF-16 到 UTF-8 的字节转换：

blognoteqr-codejavascript