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

二维码识别器是什么

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

核心功能

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

使用方式

图片识别模式

  1. 打开 二维码识别器。
  2. 点击”图片识别”标签（默认）。
  3. 拖拽图片到识别区域，或点击选择文件，也可以直接粘贴剪贴板图片。
  4. 识别结果自动显示在下方，可点击复制。

摄像头识别模式

  1. 点击”摄像头识别”标签。
  2. 点击”开启摄像头”按钮，授予摄像头权限。
  3. 将二维码对准摄像头画面，工具会自动识别并显示结果。
  4. 若设备有多个摄像头，可点击”切换摄像头”切换前后镜头。
  5. 点击”关闭摄像头”结束扫码。

浏览器兼容性

二维码识别器依赖 getUserMedia 和 jsQR 库，建议使用 Chrome、Edge、Safari、Firefox 等现代浏览器。摄像头功能在移动端浏览器上体验更佳，部分老旧浏览器可能不支持摄像头调用。

技术栈

  • HTML + CSS + JavaScript
  • jsQR（纯 JavaScript QR 码解码库）
  • FileReader API（图片读取）
  • Clipboard API（结果复制）
  • MediaDevices API（摄像头调用）
  • 无后端、无依赖、纯静态页面

相关文章