最近看到web版的图片处理，想起了以前看到过的关于web端 二维码扫描识别率提升的文章。里面提到了使用webassembly 达到了最终97%以上的准确识别率和很短的时间消耗。于是来尝试一下
why webassembly?
webassembly简单来说就是，c/c++/rust等一些可以最大限度发挥性能的语言，编译为字节码，称为wasm格式，可以被浏览器中的wasm虚拟机执行。
JIT是浏览器端对于js解释执行的优化，将频繁使用的js代码，进行优化和存储为字节码，不用再次解释，减少了运行时间。但是仍依赖于对js代码hot的判断，对于低频高性能需求，就无奈了。
主流浏览器可支持，目前小程序官方不支持。因此我们得出：
webassembly == web端极致性能
文档：https://www.wasm.com.cn/
why rust?
rust 出来有一段时间了，几年前就听同事推荐过，一直没有机会尝试。既然要性能，那么连gc都没有的rust就很有战斗力了。其次，webassembly是rust官方主推的四大场景之一，支持度自然要更好点。最后就是真的挺感兴趣，slogen也很带感：in rust, we trust.
文档：https://kaisery.github.io/trpl-zh-cn/
talk is cheap, show me the code
图片处理就是调包侠，处理完抛出去就行。值得注意的是，js无法直接传给ws所获得的图片data，要转为Uint8Array。有经验同学们一眼就看出了问题，大量的js-ws交互，会带来很大的序列化成本，做需求时要优化方案，尽量避免这种情况。
- 生成项目、将rust打包为wasm和包装为可直接引用的js：wasm-pack
- rust端使用的crate：wasm-bindgen、js-sys、web-sys、image、base64
- 打包通过webpack：ws不允许直接放入js首包，需要通过import()函数导入，从而拆分为另一个js包。
我们要实现的demo是将一张彩色图片变为灰度图，使用image这个crate，这个库有灰度函数：grayscale。
wasm-bindgen 提供 WebAssembly（wasm） 模块和 JavaScript 之间的高级别交互，有很多使用功能，我们这边只是将rust函数抛出。
#[wasm_bindgen]
pub fn grayscale(_array: &[u8]) -> Result<(), JsValue> {
let mut img = load_image_from_array(_array);
img = img.grayscale();
let base64_str = get_image_as_base64(img);
return append_img(base64_str);
}
web_sys可以让我们获取到dom对象，直接通过rust来操作dom，这远比来回序列化要方便。
pub fn append_img(image_src: String) -> Result<(), JsValue> {
let window = web_sys::window().expect("no global `window` exists");
let document = window.document().expect("should have a document on window");
let body = document.body().expect("document should have a body");
let val = document.create_element("img")?;
val.set_attribute("src", &image_src)?;
val.set_attribute("style", "height: 200px")?;
body.append_child(&val)?;
Ok(())
}
最后我们在js文件中的引入，需要通过import()经过webpack编译后会拆分为两个js包
window.fileImport = function () {
//获取读取我文件的 File 对象
var selectedFile = document.getElementById("files").files[0];
var reader = new FileReader(); // 这是核心, 读取操作就是由它完成.
reader.readAsArrayBuffer(selectedFile); // 读取文件的内容,也可以读取文件的URL
reader.onload = function () {
var uint8Array = new Uint8Array(this.result);
import('./pkg/rw').then(res => {
res.grayscale(uint8Array);
})
};
};
wasm-pack 为我们准备好了打包的一切工具，具体步骤有：
- 确保我们有 Rust 1.30 或打上版本，通过rustup安装wasm32-unknown-unknown目标(target),
- 用cargo将我们的 Rust 的源 编译为 WebAssembly 的 .wasm二进制文件,
- 为 Rust 生成的 WebAssembly 使用wasm-bindgen，生成 JavaScript API.
wasm-pack build后，生成物为：
pkg/
├── package.json
├── README.md
├── xxx_bg.wasm
├── xxx_bg.d.ts
├── xxx.d.ts
├── xxx_bg.js
└── xxx.js
我们引入的是xxx.js，其中有引入了xxx_bg.js，由此看来，有点类似头文件和实现文件。
最后
现在有了create project的cli：create-wasm-app
可以很方便创建工程。
代码详见：https://github.com/silencesdg/rust_webAssembly_demo