实现一个简单的基于 WebAssembly 的图片处理应用

图片来源： https://rustwasm.github.io/

本文做者：刘家隆

写在前边

本文但愿经过 Rust 敲一敲 WebAssembly 的大门。做为一篇入门文章，指望可以帮你了解 WebAssembly 以及构建一个简单的 WebAssembly 应用。在不考虑IE的状况，目前大部分主流的浏览器已经支持 WebAssembly，尤为在移动端，主流的UC、X5内核、Safari等都已支持。读完本文，但愿可以帮助你将 WebAssembly 应用在生产环境中。

WebAssembly（wasm） 简介

若是你真的了解了 WebAssembly， 能够跳过这一节。

能够先看两个 wasm 比较经典的 demo：

http://webassembly.org.cn/dem...

http://wasm.continuation-labs...

快速总结一下： WebAssembly（wasm） 是一个可移植、体积小、加载快而且兼容 Web 的全新格式，由 w3c 制定出的新的规范。目的是在一些场景下可以代替 JS 取得更接近原生的运算体验，好比游戏、图片/视频编辑、AR/VR。说人话，就是能够体积更小、运行更快。

wasm 有两种表示格式，文本格式和二进制格式。二进制格式能够在浏览器的 js 虚拟机中沙箱化运行，也能够运行在其余非浏览器环境中，好比常见的 node 环境中等；运行在 Web 上是 wasm 一开始设计的初衷，因此实如今浏览器上的运行方法很是简单。

经过一个简单的例子实现快速编译 wasm 文本，运行一个 wasm 二进制文件：

wasm 文本格式代码：

(module
    (import "js" "import1" (func $i1)) // 从 js 环境中导入方法1
    (import "js" "import2" (func $i2)) // 从 js 环境中导入方法2
    (func $main (call $i1)) // 调用方法1
    (start $main)
    (func (export "f") (call $i2)) // 将本身内部的方法 f 导出，提供给 js，当 js 调用，则会执行方法2
)

上述内容看个大概便可，参阅代码中注释大体了解主要功能语法便可。主要功能就是从 js 环境中导入两个方法 import1 和 import2； 同时自身定义一个方法 f 并导出提供给外部调用，方法体中执行了 import2。

文本格式自己没法在浏览器中被执行，必须编译为二进制格式。能够经过 wabt 将文本格式编译为二进制，注意文本格式自己不支持注释的写法，编译的时候须要将其去除。这里使用 wat2wasm 在线工具快速编译，将编译结果下载就是运行须要的 wasm 二进制文件。

有了二进制文件，剩下的就是在浏览器中进行调用执行。

// 定义 importObj 对象赋给 wasm 调用
var importObj = {js: { 
    import1: () => console.log("hello,"), // 对应 wasm 的方法1
    import2: () => console.log("world!") // 对应 wams 的方法2
}};
// demo.wasm 文件就是刚刚下载的二进制文件
fetch('demo.wasm').then(response =>
    response.arrayBuffer() // wasm 的内存 buffer
).then(buffer =>
       /**
       * 实例化，返回一个实例 WASM.module 和一个 WASM.instance，
       * module 是一个无状态的 带有 Ast.module 占位的对象；
       * 其中instance就是将 module 和 ES 相关标准融合，能够最终在 JS 环境中调用导出的方法
       */
    WebAssembly.instantiate(buffer, importObj) 
).then(({module, instance}) =>
    instance.exports.f() // 执行 wasm 中的方法 f
);

大概简述一下功能执行流程：

• 在 js 中定义一个 importObj 对象，传递给 wasm 环境，提供方法 import1 import2 被 wasm 引用；
• 经过 fetch 获取二进制文件流并获取到内存 buffer；
• 经过浏览器全局对象 WebAssembly 从内存 buffer 中进行实例化，即 WebAssembly.instantiate(buffer, importObj)，此时会执行 wasm 的 main 方法，从而会调用 import1 ，控制台输出 hello；
• 实例化以后返回 wasm 实例，经过此实例能够调用 wasm 内的方法，从而实现了双向链接，执行 instance.exports.f() 会调用 wasm 中的方法 f，f 会再调用 js 环境中的 import2，控制台输出 world。

细品这段实现，是否是就能够达到 wasm 内调用 js，从而间接实如今 wasm 环境中执行浏览器相关操做呢？这个下文再展开。

经过直接编写文本格式实现 wasm 显然不是咱们想要的，那么有没有“说人话的”实现方式呢，目前支持比较好的主要包括 C、 C++、Rust、 Lua 等。

很有特色的Rust

若是你了解 Rust，这一节也能够跳过了。

A language empowering everyone to build reliable and efficient software. ——from rust-lang

Rust 被评为 2019 最受欢迎的语言。

截图自 https://insights.stackoverflo...

Rust 正式诞生于 15 年，距今仅仅不到五年的时间，可是目前已覆盖各大公司，国外有 Amazon、Google、Facebook、Dropbox 等巨头，国内有阿里巴巴、今日头条、知乎、Bilibili 等公司。那是什么让如此年轻的语言成长这么快？

• Rust 关注安全、并发与性能，为了达成这一目标，Rust 语言遵循内存安全、零成本抽象和实用性三大设计哲学
• 借助 LLVM 实现跨平台运行。
• Rust 没有运行时 gc，而且大部分状况不用担忧内存泄漏的问题。
• ...

你心里 OS 学不动了？别急，先简单领略一下 Rust 的魅力，或许你会被他迷住。

下边看似很简单的问题，你可否答对？一共三行代码，语法自己没有问题，猜打印的结果是啥？

fn main() {
    let s1 = String::from("hello word"); // 定义一个字符串对象
    let s2 = s1; // 赋值
    println!("{}", s1); // log输出 
}

<details>
<summary>思考一会 点击查看答案</summary>
报错！变量 s1 不存在了。
</details>

这实际上是 Rust 中一个比较重要的特性——全部权。当将 s1 赋值给 s2 以后，s1 的全部权便不存在了，能够理解为 s1 已经被销毁。经过这种特性，实现内存的管理被前置，代码编写过程当中实现内存的控制，同时，借助静态检查，能够保证大部分编译正确的程序能够正常运行，提升内存安全以外，也提升了程序的健壮性，提升开发人员的掌控能力。

全部权只是 Rust 的众多特性之一，围绕自身的三大哲学（安全、并发与性能）其有不少优秀的思想，也预示着其上手成本仍是比较高的，感兴趣的能够深刻了解一下。以前 Rust 成立过 CLI、网络、WASM、嵌入式四大工做组，预示着 Rust 但愿发力的四大方向。截止目前已经在不少领域有比较完善的实现，例如在服务端方向有 actix-web、web 前端方向有 yew、wasm 方面有 wasm-pack 等。总之，Rust 是一门能够拓宽能力边界的很是有意思的语言，尽管入门陡峭，也建议去了解一下，或许你会深深的爱上它。

除 wasm 外的其余方向（cli、server等），笔者仍是喜欢 go，由于简单，^_^逃...

行了，扯了这么多，Rust 为什么适合 wasm：

• 没有运行时 GC，不须要 JIT，能够保证性能
• 没有垃圾回收代码，经过代码优化能够保证 wasm 的体积更小
• 支持力度高（官方介入），目前而言相比其余语言生态完善，保证开发的低成本

Rust -> wasm

Rust编译目标

rustc 自己是一个跨平台的编译器，其编译的目标有不少，具体能够经过 rustup target list 查看，和编译 wasm 相关的主要有三个：

• wasm32-wasi：主要是用来实现跨平台，经过 wasm 运行时实行跨平台模块通用，无特殊 web 属性
• wasm32-unknown-emscripten：首先须要了解 emscripten，借助 LLVM 轻松支持 rust 编译。目标产物经过 emscripten 提供标准库支持，保证目标产物能够完整运行，从而实现一个独立跨平台应用。
• wasm32-unknown-unknown：主角出场，实现 rust 到 wasm 的纯粹编译，不须要借助庞大的 C 库，于是产物体积更加小。经过内存分配器（wee_alloc）实现堆分配，从而可使用咱们想要的多种数据结构，例如 Map，List 等。利用 wasm-bindgen、web-sys/js-sys 实现与 js、ECMAScript、Web API 的交互。该目标链目前也是处于官方维护中。

或许有人对 wasm32-unknown-unknown 的命名感受有些奇怪，这里大概解释一下：wasm32 表明地址宽度为 32 位，后续可能也会有 wasm64 诞生，第一个 unknow 表明能够从任何平台进行编译，第二个 unknown 表示能够适配任何平台。

wasm-pack

以上各个工具链看着复杂，官方开发支持的 wasm-pack 工具能够屏蔽这一切细节，基于 wasm32-unknown-unknown 工具链可快速实现 Rust -> wasm -> npm 包的编译打包，从而实如今 web 上的快速调用，窥探 wasm-npm 包这头“大象”只须要以下几步：

1. 使用 rustup 安装rust
2. 安装 wasm-pack
3. wasm-pack new hello-wasm.
4. cd hello-wasm
5. 运行 wasm-pack build.
6. pkg 目录下产物就是能够被正常调用的 node_module 了

一个真实例子看一下 wasm 运行优点

路指好了，准备出发！接下来能够愉快的利用 rust 编写 wasm 了，是否是手痒了；下边经过实现一个 MD5 加密方法来对比一下 wasm 和 js 的运行速度。

首先修改 Cargo.toml，添加依赖包

[dependencies]
wasm-bindgen = "0.2"
md5 = "0.7.0"

Cargo 是 Rust 的包管理器，用于 Rust 包的发布、下载、编译等，能够按需索取你须要的包。其中 md5 就是一会要进行 md5 加密的算法包，wasm-bindgen 是帮助 wasm 和 js 进行交互的工具包，抹平实现细节，方便两个内存空间进行通信。

编写实现（src/lib.rs）

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn digest(str: &str) -> String {
    let digest = md5::compute(str);
    let res = format!("{:x}", digest);
    return res;
}

借助 wasm_bindgen 能够快速将方法导出给 js 进行调用，从而不须要关心内存通讯的细节。最终经过 wasm-pack build 构建出包（在目录 pkg 下），能够直接在 web 进行引用了，产物主要包含如下几部分

├── package.json
├── README.md
├── *.ts
├── index_bg.wasm：生成 wasm 文件，被index.js进行调用
├── index.js：这个就是最终被 ECMAScript 项目引用的模块文件，里边包含咱们定义的方法以及一些自动生成的胶水函数，利用 TextEncoder 实现内存之间的数据通讯。

js 调用

import * as wasm from "./pkg";
wasm.digest('xxx');

构建出的 wasm pkg 包引入 web 项目中，使用 webpack@4 进行打包编译，甚至不须要任何其余的插件即可支持。

速度对比

针对一个大约 22 万字符长度的字符串进行 md5 加密，粗略的速度对比：

	加密1次时间（ms）	加密100次时间（ms）	算法依赖包
js版本md5	~57	~1300	https://www.npmjs.com/package...
wasm版本md5	~5	~150	https://crates.io/crates/md5

从数据层面来看，wasm 的性能优点显而易见。但同时也发如今 100 次的时候，性能数据差值虽然扩大，可是比值却相比一次加密缩小。缘由是在屡次加密的时候，js 和 wasm 的通讯成本的占比逐渐增高，致使加密时间没有按比例增加，也说明 wasm 实际加密运算的时间比结果更小。这其实也代表了了 wasm 在 web 上的应用场景：重计算、轻交互，例如音视频/图像处理、游戏、加密。但在未来，这也会获得相应的改善，借助 interface-type 可实现更高效的值传递，将来的前端框架或许会真正迎来一场变革。

利用 wasm 实现一个完整 Web 应用

借助 wasm-bindgen,js-sys和web-sys crates，咱们甚至能够极小的依赖 js，完成一个完整的 web 应用。如下是一个本地彩色 png 图片转换为黑白图片的 web-wasm 应用。

效果图：

在线体验： 点我

大体功能是经过 js 读取文件，利用 wasm 进行图片黑白处理，经过 wasm 直接建立 dom 并进行图片渲染。

1. 利用 js 实现一个简单的文件读取：

// html
<div>
    <input type="file" id="files" style="display: none" onchange="fileImport();">
    <input type="button" id="fileImport" value="选择一张彩色的png图片">
</div>

// js
$("#fileImport").click(function () {
    $("#files").click();
})
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);
        wasm.grayscale(uint8Array);
    }
}

这里获取到的文件是一个 js 对象，最终拿到的文件信息须要借助内存传递给 wasm , 而文件对象没法直接传递给 wasm 空间。咱们能够经过 FileReader 将图片文件转换为一个 8 位无符号的数组来实现数据的传递。到此，js 空间内的使命完成了，最后只须要调用 wasm.grayscale 方法，将数据传递给 wasm 便可。

2. wasm 获取数据并重组

fn load_image_from_array(_array: &[u8]) -> DynamicImage {
    let img = match image::load_from_memory_with_format(_array, ImageFormat::Png) {
        Ok(img) => img,
        Err(error) => {
            panic!("{:?}", error)
        }
    };
    return img;
}

#[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);
}

wasm 空间拿到传递过来的数组，须要重组为图片文件对象，利用现成的轮子 image crate 能够快速实现从一个无符号数组转换为一个图片对象（load_image_from_array），并进行图像的黑白处理（img.grayscale()）。处理事后的对象须要最终再返回浏览器 <img /> 标签可识别的内容信息，提供给前端进行预览，这里选择 base64 字符串。

3. wasm 内生成 base64 图片格式

fn get_image_as_base64(_img: DynamicImage) -> String {
    // 建立一个内存空间
    let mut c = Cursor::new(Vec::new());
    match _img.write_to(&mut c, ImageFormat::Png) {
        Ok(c) => c,
        Err(error) => {
            panic!(
                "There was a problem writing the resulting buffer: {:?}",
                error
            )
        }
    };
    c.seek(SeekFrom::Start(0)).unwrap();
    let mut out = Vec::new();
    // 从内存读取数据
    c.read_to_end(&mut out).unwrap();
    // 解码
    let stt = encode(&mut out);
    let together = format!("{}{}", "data:image/png;base64,", stt);
    return together;
}

在 wasm 空间内将 DynamicImage 对象再转换为一个基础值，从而再次实现值得传递；借助 Rust Cursor，对 DynamicImage 对象信息进行读写，Rust Cursor 有点相似前端的 Reader/Writer，经过一个缓存区实现信息读写，从而拿到内存空间内的图片存储信息，得到的信息通过 base64 解码便可拿到原始字符串信息，拿到的字符串拼接格式信息 data:image/png;base64 组成完整的图片资源字符创，即可以直接返回给前端进行预览渲染了。

以上已经完成了图片处理的全部流程了，获取到的 base64 能够直接交还给 js 进行建立 dom 预览了。可是！我有没有可能不使用 js 进行操做，在 wasm 内直接完成这步操做呢？

4. wasm 内建立 dom 并渲染图片

wasm 自己并不能直接操做 dom，必须通过 js 完成 dom 的操做。可是依然能够实如今 wasm 内载入 js 模块间接操做 dom。web_sys 便实现了这步操做，并基本完成全部的接口实现，借助 web_sys 甚至能够很方便的实现一个纯 wasm 的前端框架，好比 yew。

图片引自： https://hacks.mozilla.org/201...

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 操做 dom 基本一致，其实也都是间接调用了 js 端方法。在实际应用中，仍是要尽可能避免屡次的通讯带来额外的性能损耗。

一个简单的图片黑白处理应用完成了，完整的代码： 点我。其余的功能能够按照相似的方式进行拓展，好比压缩、裁剪等。

写在最后

本文简述了从 Rust 到 wasm，再到 web based wasm 的流程。但愿读完本文，可以帮你在实际业务开发中开拓解决问题的思路，探索出更多更实用的场景。因为做者水平有限，欢迎批评指正。

资料参考

https://rustwasm.github.io/

https://rustwasm.github.io/wa...

https://github.com/WebAssembl...

https://yew.rs/docs/v/zh_cn/

https://hacks.mozilla.org/201...

本文发布自 网易云音乐前端团队，可自由转载，转载请在标题标明转载并在显著位置保留出处。咱们一直在招人，若是你刚好准备换工做，又刚好喜欢云音乐，那就 加入咱们！