CodeScanner

相机 / PDA 按键 / 图片三种取码方式，识别 QR 与常见一维码。

最后更新

说明

与 QrCode / Barcode 生成端对称的读取组件，提供三种取码方式：相机模式经 JS 侧内置的 zxing.js（首次使用惰性加载，与 QrCode 的纯托管编码互不依赖）对摄像头视频流连续解码，Continuous 决定命中后是否继续扫描，FacingMode 切换前后置；PDA 按键模式面向仓储 / 门店手持终端，硬件扫码枪以键盘仿真方式瞬时敲入整串内容并随结束符提交，用逐键间隔判定是否为扫码突发，故不抢占正常输入、也无需聚焦本页，PdaTerminator 支持 Enter / Tab / EnterTab / 无结束符（空闲超时提交）；图片模式选择本地图片或传入 ImageUrl 做一次性离线解码。默认放开 QR 与常见一维码，可用 Formats 传入 zxing 码制名称过滤。识别结果经 DotNetObjectReference 回推，绑定 Value 并触发 OnScan，结果区支持复制 / 清除并保留最近历史。相机取流需安全上下文（HTTPS / localhost）并授予摄像头权限，不支持时自动降级提示；PDA 与图片模式在 Blazor Web 与 Blazor Hybrid 双端均可用。

常见能力：

  • 相机 / PDA 按键 / 图片三种取码方式
  • QR 与常见一维码全覆盖，Formats 可过滤
  • 相机连续扫描、前后置切换、逐帧去重
  • PDA 键盘仿真：逐键间隔判定扫码突发，不抢正常输入
  • PDA 结束符可配 Enter / Tab / EnterTab / 无结束符超时提交
  • 图片本地或 URL 一次性离线解码
  • 安全上下文缺失时相机自动降级，PDA / 图片双端可用
  • 结果可复制 / 清除并保留最近历史，OnScan / ValueChanged 回推

用法

<CodeScanner @bind-Value="text" OnScan="OnScan" />

@* 仅识别 QR、相机命中一次即停；图片模式预置本地素材 *@
<CodeScanner Formats="_qrOnly" Continuous="false" PdaTerminator="EnterTab" ImageUrl="/files/qr.png" />

API 参数

参数 类型 默认值 说明
AutoStart bool false 就绪后自动开启当前模式（仅相机/PDA 有意义）。
Continuous bool true 相机连续扫描：为真时命中后继续扫描；为假时命中一次自动停止。
FacingMode string "environment" 摄像头朝向：environment（后置，默认）/ user（前置）。
Formats String[] null 限定码制（zxing 名称，如 QR_CODE / CODE_128 / EAN_13）；为空表示放开全部支持格式。
HistorySize int 5 结果区下方保留的历史条数（默认 5，0 表示不显示历史）。
ImageUrl string null 图片模式的初始 URL（可预置一张本地/远程二维码图片，属数据不做本地化）。
Interval int 300 相机相邻两帧解码间隔（毫秒，默认 300）。
Mode string "camera" 默认识别模式：camera / pda / image（默认相机）。
OnScan EventCallback<ScanResult> — 事件 识别成功回调，携带文本与码制。
PdaIdleTimeout int 120 PDA 无结束符时的空闲提交窗口（毫秒，默认 120）。
PdaMinLength int 3 PDA 内容最小长度，低于此长度不视为一次扫码（默认 3）。
PdaTerminator string "Enter" PDA 扫码枪结束符：Enter（默认）/ Tab / EnterTab / None（无结束符则空闲超时提交）。
Value string null 最近一次识别内容（可绑定）。
ValueChanged EventCallback<string> — 事件
Visible bool true 取得或设置组件是否可见，默认为false。
VisibleChanged EventCallback<bool> — 事件 取得或设置组件可见性变化时的回调事件。
Class string null 取得或设置组件的CSS类名，用于自定义样式。
Disabled bool false 取得或设置组件是否禁用，默认为false。
Style string null 取得或设置组件的内联样式，用于自定义样式。

所有组件均继承 BaseComponent，除上表参数外还支持 Class、Style、Disabled、Visible。

微信公众号二维码 扫码关注公众号
QQ 交流群二维码 扫码加入 QQ 群