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)stringPromise<void>异步加载 .wasm 模块
QRCodeWasm.isReady()-boolean模块是否加载完成
QRCodeWasm.decode(gray, w, h)Uint8Array, number, numberArray<{data, ecc, version, mask}>灰度图像解码,3x3 超采样多数投票
QRCodeWasm.encode(text, level)string, string(L/M/Q/H)Uint8Array编码为 bool 矩阵(扁平一维)
QRCodeWasm.encodeMatrix2D(text, level)string, stringnumber[][]编码为二维 bool 矩阵
QRCodeWasm.encodeBatch(count, texts, levels)number, string[], string[]Array<{index, matrix, size}>批量编码,吞吐量远超逐条调用

SepQRCode 编解码模式开关

属性类型可选值说明
SepQRCode.encodeModestring'auto' / 'wasm' / 'js'编码模式:auto=WASM优先 JS兜底
SepQRCode.decodeModestring'auto' / 'wasm' / 'js'解码模式:auto=WASM优先 JS兜底
SepQRCode._lastEncodeBystring/null'wasm' / 'js' / null最近一次编码实际走的路径
SepQRCode._lastDecodeBystring/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_batchC ABI 导出,JS 侧通过线性内存交互
解码策略3x3 超采样多数投票消除 rqrr 最近邻采样对亚像素误差的零容忍问题
编码降级链WASM → JS (45a-qrcode-utils.js)WASM 未就绪或编码失败时自动兜底
解码降级链WASM → JS (45b-03-qrcode-decode.js)WASM 未就绪或解码失败时自动兜底

自动化断言