WebAssembly 与 Rust 前端实战：将计算密集型任务提速 10 倍

1
[package]
2
name = "wasm-demo"
3
version = "0.1.0"
4
edition = "2021"
5

6
[lib]
7
crate-type = ["cdylib", "rlib"]   # cdylib 给 Wasm，rlib 给 Rust 测试
8

9
[dependencies]
10
wasm-bindgen = "0.2"
11

12
[profile.release]
13
opt-level = "z"        # 极致优化体积
14
lto = true             # 链接时优化
15
codegen-units = 1      # 单 codegen 单元，进一步优化
16
panic = "abort"        # 去掉 unwinding 表，体积更小
17
strip = true           # 去掉符号

1
use wasm_bindgen::prelude::*;
2

3
#[wasm_bindgen]
4
pub fn grayscale(input: &[u8], width: u32, height: u32) -> Vec<u8> {
5
    let mut out = Vec::with_capacity(input.len());
6
    // RGBA 每 4 字节一个像素
7
    for chunk in input.chunks_exact(4) {
8
        let r = chunk[0] as f32;
9
        let g = chunk[1] as f32;
10
        let b = chunk[2] as f32;
11
        // ITU-R BT.601 亮度公式
12
        let y = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
13
        out.extend_from_slice(&[y, y, y, chunk[3]]);  // 保留 alpha
14
    }
15
    out
16
}

1
<script type="module">
2
  import init, { grayscale } from './pkg/wasm_demo.js';
3

4
  await init();   // 必须先调用，初始化 Wasm
5

6
  const canvas = document.querySelector('canvas');
7
  const ctx = canvas.getContext('2d');
8
  const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
9
  const t0 = performance.now();
10

11
  // 直接传入 Uint8ClampedArray，零拷贝！
12
  const gray = grayscale(imgData.data, canvas.width, canvas.height);
13

14
  console.log(`灰度化耗时：${(performance.now() - t0).toFixed(2)}ms`);
15

16
  // 把结果画回去
17
  const out = new ImageData(new Uint8ClampedArray(gray), canvas.width, canvas.height);
18
  ctx.putImageData(out, 0, 0);
19
</script>

1
#[wasm_bindgen]
2
extern "C" {
3
    // 声明 JS 端的类型
4
    type Console;
5
    #[wasm_bindgen(static_method_of = Console)]
6
    pub fn log(s: &str);
7
}
8

9
#[wasm_bindgen]
10
pub fn process(data: &[u8], callback: &js_sys::Function) {
11
    for (i, &b) in data.iter().enumerate() {
12
        if b == 0 {
13
            // 每遇到一个 0 就回调一次 JS
14
            let _ = callback.call1(&JsValue::NULL, &JsValue::from(i));
15
        }
16
    }
17
}

1
#[wasm_bindgen]
2
pub struct ImageFilter {
3
    width: u32,
4
    height: u32,
5
    kernel: Vec<f32>,
6
}
7

8
#[wasm_bindgen]
9
impl ImageFilter {
10
    #[wasm_bindgen(constructor)]
11
    pub fn new(width: u32, height: u32) -> Self {
12
        Self {
13
            width,
14
            height,
15
            kernel: vec![0.0; width as usize * height as usize],
16
        }
17
    }
18

19
    #[wasm_bindgen(getter)]
20
    pub fn width(&self) -> u32 { self.width }
21

22
    pub fn apply(&mut self, pixels: &[u8]) -> Vec<u8> {
23
        // ... 卷积实现
24
        pixels.to_vec()
25
    }
26
}

1
#![feature(simd_wasm64)]
2

3
use core::arch::wasm32::*;
4

5
#[wasm_bindgen]
6
pub fn saturate_u8(input: &[u8], gain: u8) -> Vec<u8> {
7
    let g = u16x8_splat(gain as u16);
8
    let mut out = Vec::with_capacity(input.len());
9
    for chunk in input.chunks_exact(16) {
10
        // 一次处理 16 个字节
11
        let v1 = u8x16_load(chunk.as_ptr());
12
        let v2 = u8x16_load(chunk.as_ptr().add(8));
13
        let sum1 = u16x8_add_extend_low_u8x16(v1, g);
14
        let sum2 = u16x8_add_extend_high_u8x16(v1, g);
15
        let sum3 = u16x8_add_extend_low_u8x16(v2, g);
16
        let sum4 = u16x8_add_extend_high_u8x16(v2, g);
17
        // 饱和到 0..=255
18
        let sat1 = u8x16_narrow_i16x8(sum1.into(), sum2.into());
19
        let sat2 = u8x16_narrow_i16x8(sum3.into(), sum4.into());
20
        out.extend_from_slice(&sat1);
21
        out.extend_from_slice(&sat2);
22
    }
23
    out
24
}