二维码识别
用摄像头实时扫描或上传二维码图片,识别网址、Wi-Fi 配置、名片与文本,解码在浏览器本地完成,内容不上传。
使用说明
- 点击「开启摄像头」,在浏览器弹窗里允许权限,把二维码对准画面即可自动识别。
- 识别成功后摄像头会自动停止,内容与类型显示在下方结果区。
- 也可以把二维码图片拖入虚线框,或点击虚线框从本地选择文件。
- 网址类结果提供「打开链接」按钮,其余内容点击「复制内容」取走。
- 想重新识别时点「清空结果」,摄像头与图片两条路径可随时切换。
常见问题
识别的内容会上传到服务器吗?
摄像头扫描需要什么条件?
哪些码识别不了?
图片超过 640 像素还能识别吗?
使用步骤
- 选择识别方式
页面上方是摄像头实时扫描,下方是图片识别。手机上用摄像头最方便,电脑上把二维码截图或图片文件拖进来即可。
- 开启摄像头扫描
点击「开启摄像头」并在浏览器弹窗里允许权限,把二维码对准画面。识别成功后摄像头会自动停止,结果直接显示在下方。
- 上传或拖入图片
点击虚线框选择图片,或把图片直接拖进虚线框。超过 640 像素的图片会先等比缩小再解码,实际解码尺寸会显示在下方。
- 查看与复制结果
结果区显示内容与类型。网址类附「打开链接」按钮,其余内容点「复制内容」取走,点「清空结果」可清空重新识别。
工具详细介绍
这是一款在浏览器里完成的二维码识别工具,提供摄像头扫描与图片识别两条路径。摄像头路径通过 getUserMedia 打开相机,逐帧取画面交给解码库识别,成功后自动停止并释放摄像头。图片路径支持点击选择与拖拽上传,超过 640 像素的图片会先等比缩小再解码,缩小后识别更快,也更容易成功。解码由开源库 jsQR 在本地完成,图片与摄像头画面不会离开您的设备,也不会上传到任何服务器。识别结果会标注类型,网址、Wi-Fi 配置、名片与纯文本分别显示,网址类内容附打开链接按钮,全部内容都能一键复制。
结果的类型按内容开头判断。以 http 或 https 开头的按网址处理,附打开链接按钮,且只对这两种协议开放跳转,其他协议一律只展示文本,避免误触。以 WIFI: 开头的是 Wi-Fi 配置,路由器背面与手机热点分享常生成这种码。以 BEGIN:VCARD 开头的是名片,通讯录应用分享联系人时常用这种格式。其余内容一律按纯文本展示,可直接复制。识别不到码时页面给出提示而不是报错,此时可以换一张更清晰的图片,或把二维码拍得更大更正一些再试。
原理与背景
QR 码把信息编码成黑白模块矩阵,解码分几步进行。解码器先在画面里寻找三个定位图案,据此推算整个矩阵的方向、尺寸与透视变形。再按版本对应的掩码规则读出数据码字,最后按容错级别纠错并还原成文本。摄像头路径与图片路径共用同一套解码函数,区别只在像素来源。前者逐帧扫描视频画面,后者把图片缩放到长边不超过 640 像素后读取。等比缩小的优势在于模块之间的比例保持不变,定位图案不受破坏,速度更快,识别率也不下降。
浏览器打开摄像头依赖 getUserMedia 接口,并规定只在 HTTPS 或 localhost 环境下可用。这是出于隐私保护的考虑。请求参数里带上 facingMode: environment,表示优先调用手机背面的摄像头。桌面浏览器会忽略该参数,使用可用设备。工具在三个时机调用 track.stop():点击停止按钮、页面切到后台、识别成功之后。轨道释放后,标签页上的录制指示灯会立刻熄灭。同一时刻只持有一条视频轨,扫描中重复点击开始不会叠加打开多个摄像头,两路流竞争的情况也有保护。
典型使用场景
- 识别 Wi-Fi 码
路由器背面与手机热点分享常印有 Wi-Fi 二维码,内容以 WIFI: 开头。用本工具识别后复制全文,网络名与密码直接可见,给新设备配网时不必对着标签逐字核对,也不用在系统设置里来回切换。
- 录入纸质名片
展会上收到的名片可能印着 vCard 二维码,拍下来上传识别,姓名、电话、邮箱按原文还原。把文本粘进通讯录或客户管理表,比手工敲键盘快得多,也避免了看错数字抄错电话的问题。
- 核对印刷网址
宣传单上的二维码看不出指向时,先用本工具识别出完整网址再决定是否分发。发现指向异常或与内容不符,可以及时退回设计稿修改,避免错误链接印到上千份物料上。
使用技巧
- 摄像头识别不到时,先检查光线与距离,让二维码约占画面三分之一。手抖会造成模糊,静置两秒通常一次就能成功。
- 识别 Wi-Fi 码后点复制,把全文粘到备忘录里,网络名与密码一眼可见,给新设备配网时不用对着路由器标签逐字核对。
- 识别屏幕截图时优先截二维码本体,四周留一点白边。截图里界面元素太多会干扰定位,先裁剪再上传,成功率明显更高。
注意事项
- 条形码不支持
超市商品上的竖条纹是一维条形码,本工具只处理 QR 码矩阵,对条形码会提示未识别。两者码制不同,需要扫条形码时请改用专门的扫码应用,不要反复调整图片重试。
- 权限拒绝后无法重试
在浏览器弹窗里点过拒绝后,页面无法再次弹出授权窗口,摄像头区会显示提示并隐藏。需要到地址栏的权限设置里手动允许摄像头,然后刷新页面重新开始扫描。
- 截图模糊难识别
对着屏幕截图常带摩尔纹与压缩噪点,模块粘连后解码失败。优先截二维码本体并保留白边,或用手机直接对准屏幕拍摄,成功率比放大截屏再识别高得多。