WASM 二维码解码
基于 Rust (rqrr) 编译的 WASM 二维码解码模块,验证端到端解码链路
1. 生成二维码
使用 SepQRCode 组件生成一张测试二维码,作为解码输入源。
JS API 初始化
2. WASM 加载与解码
将 Canvas 像素转为灰度数组,传入 WASM 解码,验证内容是否匹配。
JS API 调用
⏳ 加载 WASM 模块中...
3. 多内容解码验证
对多种内容类型(URL、数字、文本、JSON、中文、Emoji、长文本)进行解码,验证通用识别能力。
⏳ 测试中...
4. 纠错级别 & 性能基准
验证 L/M/Q/H 四种纠错级别均可解码,并测量单次解码耗时。
⏳ 测试中...
5. WASM vs JS 解码性能对比
通过 SepQRCode.decodeMode 开关分别走 WASM 与 JS 路径,对比解码速度,并验证 _lastDecodeBy 路径标记。
⏳ 性能测试中,逐个完成将实时更新...
6. 交互式解码
输入任意文本,实时生成二维码并解码。使用 SepQRCode.decode() 走当前模式路径,结果展示 _lastDecodeBy 标记。
7. 批量生成:WASM 编码
批量生成 200 张二维码,测试 WASM 编码器吞吐量。
8. 详细说明
WASM 二维码编解码模块,基于 Rust (rqrr + qrcode) 编译,一个 .wasm 同时提供解码与编码能力。组件层默认 WASM 优先、JS 兜底。
QRCodeWasm 实例 API
| 方法 | 参数 | 返回 | 说明 |
|---|---|---|---|
QRCodeWasm.load(url) | string | Promise<void> | 异步加载 .wasm 模块 |
QRCodeWasm.isReady() | - | boolean | 模块是否加载完成 |
QRCodeWasm.decode(gray, w, h) | Uint8Array, number, number | Array<{data, ecc, version, mask}> | 灰度图像解码,3x3 超采样多数投票 |
QRCodeWasm.encode(text, level) | string, string(L/M/Q/H) | Uint8Array | 编码为 bool 矩阵(扁平一维) |
QRCodeWasm.encodeMatrix2D(text, level) | string, string | number[][] | 编码为二维 bool 矩阵 |
QRCodeWasm.encodeBatch(count, texts, levels) | number, string[], string[] | Array<{index, matrix, size}> | 批量编码,吞吐量远超逐条调用 |
SepQRCode 编解码模式开关
| 属性 | 类型 | 可选值 | 说明 |
|---|---|---|---|
SepQRCode.encodeMode | string | 'auto' / 'wasm' / 'js' | 编码模式:auto=WASM优先 JS兜底 |
SepQRCode.decodeMode | string | 'auto' / 'wasm' / 'js' | 解码模式:auto=WASM优先 JS兜底 |
SepQRCode._lastEncodeBy | string/null | 'wasm' / 'js' / null | 最近一次编码实际走的路径 |
SepQRCode._lastDecodeBy | string/null | 'wasm' / 'js' / null | 最近一次解码实际走的路径 |
技术架构
| 层级 | 技术 | 说明 |
|---|---|---|
| Rust 核心 | rqrr 0.6 + qrcode 0.14 | 单 crate 复用,编解码合并在一个 .wasm |
| 编译目标 | wasm32-unknown-unknown | 裸 WASM,无 Emscripten 依赖 |
| WASM 导出 | decode_qr / encode_qr / encode_qr_batch | C ABI 导出,JS 侧通过线性内存交互 |
| 解码策略 | 3x3 超采样多数投票 | 消除 rqrr 最近邻采样对亚像素误差的零容忍问题 |
| 编码降级链 | WASM → JS (45a-qrcode-utils.js) | WASM 未就绪或编码失败时自动兜底 |
| 解码降级链 | WASM → JS (45b-03-qrcode-decode.js) | WASM 未就绪或解码失败时自动兜底 |