WebAssembly 在前端的实战应用：图片处理、加密和计算密集型任务

1
// 方式一：fetch + instantiateStreaming（推荐，流式编译）
2
const { instance, module } = await WebAssembly.instantiateStreaming(
3
  fetch('/math.wasm'),
4
  {
5
    env: {
6
      // 导入函数：Wasm 模块可以调用的 JS 函数
7
      log: (value) => console.log('From Wasm:', value),
8
      memory: new WebAssembly.Memory({ initial: 256 }) // 256 页 = 16MB
9
    }
10
  }
11
);
12

13
// 调用导出的函数
14
const result = instance.exports.add(40, 2);
15
console.log(result); // 42
16

17
// 方式二：先编译，后实例化（适合多次实例化同一模块）
18
const response = await fetch('/math.wasm');
19
const bytes = await response.arrayBuffer();
20
const module2 = await WebAssembly.compile(bytes);
21

22
// 可以多次实例化同一个 module
23
const inst1 = await WebAssembly.instantiate(module2, imports);
24
const inst2 = await WebAssembly.instantiate(module2, imports);

1
// 创建共享内存
2
const memory = new WebAssembly.Memory({
3
  initial: 10,   // 初始 10 页（640KB）
4
  maximum: 100,  // 最大 100 页（6.4MB）
5
  shared: false   // 是否共享（用于多线程）
6
});
7

8
// JavaScript 通过 ArrayBuffer 访问 Wasm 内存
9
const buffer = new Uint8Array(memory.buffer);
10

11
// 写入数据到 Wasm 内存
12
const data = new TextEncoder().encode('Hello Wasm!');
13
buffer.set(data, 0); // 从偏移量 0 开始写入
14

15
// Wasm 函数可以读取这块内存中的数据
16
// 然后 JavaScript 可以读取 Wasm 写入的结果

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

6
[lib]
7
crate-type = ["cdylib"]
8

9
[dependencies]
10
wasm-bindgen = "0.2"
11
js-sys = "0.3"
12
web-sys = { version = "0.3", features = [
13
  "console",
14
  "ImageData",
15
  "CanvasRenderingContext2d",
16
  "HtmlCanvasElement"
17
]}
18

19
[profile.release]
20
opt-level = "z"     # 优化体积
21
lto = true          # 链接时优化
22
strip = true        # 去除调试信息

1
use wasm_bindgen::prelude::*;
2
use wasm_bindgen::Clamped;
3

4
/// 灰度化滤镜
5
#[wasm_bindgen]
6
pub fn grayscale(data: &mut [u8]) {
7
    for i in (0..data.len()).step_by(4) {
8
        let r = data[i] as f32;
9
        let g = data[i + 1] as f32;
10
        let b = data[i + 2] as f32;
11
        // 人眼对绿色最敏感的加权公式
12
        let gray = (0.299 * r + 0.587 * g + 0.114 * b) as u8;
13
        data[i] = gray;
14
        data[i + 1] = gray;
15
        data[i + 2] = gray;
16
        // alpha 通道不变
17
    }
18
}
19

20
/// 高斯模糊
21
#[wasm_bindgen]
22
pub fn gaussian_blur(data: &mut [u8], width: u32, height: u32, radius: u32) {
23
    let w = width as usize;
24
    let h = height as usize;
25
    let r = radius as i32;
26

27
    // 创建临时缓冲区
28
    let mut temp = data.to_vec();
29

30
    // 水平方向模糊
31
    for y in 0..h {
32
        for x in 0..w {
33
            let mut r_sum: f32 = 0.0;
34
            let mut g_sum: f32 = 0.0;
35
            let mut b_sum: f32 = 0.0;
36
            let mut count: f32 = 0.0;
37

38
            for dx in -r..=r {
39
                let nx = x as i32 + dx;
40
                if nx >= 0 && nx < w as i32 {
41
                    let idx = (y * w + nx as usize) * 4;
42
                    let weight = 1.0 - (dx.abs() as f32 / (r + 1) as f32);
43
                    r_sum += data[idx] as f32 * weight;
44
                    g_sum += data[idx + 1] as f32 * weight;
45
                    b_sum += data[idx + 2] as f32 * weight;
46
                    count += weight;
47
                }
48
            }
49

50
            let idx = (y * w + x) * 4;
51
            temp[idx] = (r_sum / count) as u8;
52
            temp[idx + 1] = (g_sum / count) as u8;
53
            temp[idx + 2] = (b_sum / count) as u8;
54
        }
55
    }
56

57
    // 垂直方向模糊
58
    for y in 0..h {
59
        for x in 0..w {
60
            let mut r_sum: f32 = 0.0;
61
            let mut g_sum: f32 = 0.0;
62
            let mut b_sum: f32 = 0.0;
63
            let mut count: f32 = 0.0;
64

65
            for dy in -r..=r {
66
                let ny = y as i32 + dy;
67
                if ny >= 0 && ny < h as i32 {
68
                    let idx = (ny as usize * w + x) * 4;
69
                    let weight = 1.0 - (dy.abs() as f32 / (r + 1) as f32);
70
                    r_sum += temp[idx] as f32 * weight;
71
                    g_sum += temp[idx + 1] as f32 * weight;
72
                    b_sum += temp[idx + 2] as f32 * weight;
73
                    count += weight;
74
                }
75
            }
76

77
            let idx = (y * w + x) * 4;
78
            data[idx] = (r_sum / count) as u8;
79
            data[idx + 1] = (g_sum / count) as u8;
80
            data[idx + 2] = (b_sum / count) as u8;
81
        }
82
    }
83
}
84

85
/// 亮度/对比度调整
86
#[wasm_bindgen]
87
pub fn adjust_brightness_contrast(data: &mut [u8], brightness: f32, contrast: f32) {
88
    let factor = (259.0 * (contrast + 255.0)) / (255.0 * (259.0 - contrast));
89

90
    for i in (0..data.len()).step_by(4) {
91
        for c in 0..3 {
92
            let mut value = data[i + c] as f32;
93
            // 亮度
94
            value += brightness;
95
            // 对比度
96
            value = factor * (value - 128.0) + 128.0;
97
            // 钳位到 0-255
98
            data[i + c] = value.max(0.0).min(255.0) as u8;
99
        }
100
    }
101
}
102

103
/// 棕褐色（怀旧）滤镜
104
#[wasm_bindgen]
105
pub fn sepia(data: &mut [u8]) {
106
    for i in (0..data.len()).step_by(4) {
107
        let r = data[i] as f32;
108
        let g = data[i + 1] as f32;
109
        let b = data[i + 2] as f32;
110

111
        data[i]     = (r * 0.393 + g * 0.769 + b * 0.189).min(255.0) as u8;
112
        data[i + 1] = (r * 0.349 + g * 0.686 + b * 0.168).min(255.0) as u8;
113
        data[i + 2] = (r * 0.272 + g * 0.534 + b * 0.131).min(255.0) as u8;
114
    }
115
}
116

117
/// 边缘检测（Sobel 算子）
118
#[wasm_bindgen]
119
pub fn edge_detect(data: &mut [u8], width: u32, height: u32) {
120
    let w = width as usize;
121
    let h = height as usize;
122
    let original = data.to_vec();
123

124
    // Sobel 核
125
    let gx: [[i32; 3]; 3] = [[-1, 0, 1], [-2, 0, 2], [-1, 0, 1]];
126
    let gy: [[i32; 3]; 3] = [[-1, -2, -1], [0, 0, 0], [1, 2, 1]];
127

128
    for y in 1..h-1 {
129
        for x in 1..w-1 {
130
            let mut sum_gx: i32 = 0;
131
            let mut sum_gy: i32 = 0;
132

133
            for ky in 0..3 {
134
                for kx in 0..3 {
135
                    let px = (y + ky - 1) * w + (x + kx - 1);
136
                    let idx = px * 4;
137
                    // 使用灰度值
138
                    let gray = (original[idx] as i32 + original[idx + 1] as i32 + original[idx + 2] as i32) / 3;
139
                    sum_gx += gray * gx[ky][kx];
140
                    sum_gy += gray * gy[ky][kx];
141
                }
142
            }
143

144
            let magnitude = ((sum_gx * sum_gx + sum_gy * sum_gy) as f32).sqrt().min(255.0) as u8;
145
            let idx = (y * w + x) * 4;
146
            data[idx] = magnitude;
147
            data[idx + 1] = magnitude;
148
            data[idx + 2] = magnitude;
149
        }
150
    }
151
}

1
import init, {
2
  grayscale,
3
  gaussian_blur,
4
  adjust_brightness_contrast,
5
  sepia,
6
  edge_detect
7
} from './pkg/wasm_demo.js';
8

9
await init();
10

11
class ImageProcessor {
12
  #canvas;
13
  #ctx;
14

15
  constructor(canvas) {
16
    this.#canvas = canvas;
17
    this.#ctx = canvas.getContext('2d');
18
  }
19

20
  async loadImage(src) {
21
    const img = new Image();
22
    img.crossOrigin = 'anonymous';
23

24
    await new Promise((resolve, reject) => {
25
      img.onload = resolve;
26
      img.onerror = reject;
27
      img.src = src;
28
    });
29

30
    this.#canvas.width = img.width;
31
    this.#canvas.height = img.height;
32
    this.#ctx.drawImage(img, 0, 0);
33
  }
34

35
  #getImageData() {
36
    return this.#ctx.getImageData(0, 0, this.#canvas.width, this.#canvas.height);
37
  }
38

39
  #putImageData(imageData) {
40
    this.#ctx.putImageData(imageData, 0, 0);
41
  }
42

43
  applyGrayscale() {
44
    const imageData = this.#getImageData();
45
    const start = performance.now();
46

47
    grayscale(imageData.data);
48

49
    const elapsed = performance.now() - start;
50
    console.log(`Grayscale (Wasm): ${elapsed.toFixed(2)}ms`);
51

52
    this.#putImageData(imageData);
53
    return elapsed;
54
  }
55

56
  applyBlur(radius = 5) {
57
    const imageData = this.#getImageData();
58
    const start = performance.now();
59

60
    gaussian_blur(imageData.data, this.#canvas.width, this.#canvas.height, radius);
61

62
    const elapsed = performance.now() - start;
63
    console.log(`Blur (Wasm): ${elapsed.toFixed(2)}ms`);
64

65
    this.#putImageData(imageData);
66
    return elapsed;
67
  }
68

69
  applySepia() {
70
    const imageData = this.#getImageData();
71
    const start = performance.now();
72

73
    sepia(imageData.data);
74

75
    const elapsed = performance.now() - start;
76
    console.log(`Sepia (Wasm): ${elapsed.toFixed(2)}ms`);
77

78
    this.#putImageData(imageData);
79
    return elapsed;
80
  }
81

82
  applyEdgeDetect() {
83
    const imageData = this.#getImageData();
84
    const start = performance.now();
85

86
    edge_detect(imageData.data, this.#canvas.width, this.#canvas.height);
87

88
    const elapsed = performance.now() - start;
89
    console.log(`Edge detect (Wasm): ${elapsed.toFixed(2)}ms`);
90

91
    this.#putImageData(imageData);
92
    return elapsed;
93
  }
94
}
95

96
// 使用
97
const canvas = document.getElementById('canvas');
98
const processor = new ImageProcessor(canvas);
99
await processor.loadImage('./photo.jpg');
100

101
processor.applyGrayscale();  // ~5ms for 4K image
102
processor.applyBlur(10);     // ~50ms for 4K image
103
processor.applyEdgeDetect(); // ~30ms for 4K image

1
// JavaScript 版灰度化
2
function grayscaleJS(imageData) {
3
  const data = imageData.data;
4
  for (let i = 0; i < data.length; i += 4) {
5
    const gray = 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2];
6
    data[i] = data[i + 1] = data[i + 2] = gray;
7
  }
8
}
9

10
// 性能对比
11
function benchmark(imageData) {
12
  const copy1 = new ImageData(new Uint8ClampedArray(imageData.data), imageData.width);
13
  const copy2 = new ImageData(new Uint8ClampedArray(imageData.data), imageData.width);
14

15
  // JavaScript
16
  const jsStart = performance.now();
17
  for (let i = 0; i < 100; i++) {
18
    grayscaleJS(copy1);
19
  }
20
  const jsTime = performance.now() - jsStart;
21

22
  // Wasm
23
  const wasmStart = performance.now();
24
  for (let i = 0; i < 100; i++) {
25
    grayscale(copy2.data);
26
  }
27
  const wasmTime = performance.now() - wasmStart;
28

29
  console.log(`JavaScript: ${jsTime.toFixed(1)}ms (100 iterations)`);
30
  console.log(`WebAssembly: ${wasmTime.toFixed(1)}ms (100 iterations)`);
31
  console.log(`Speedup: ${(jsTime / wasmTime).toFixed(1)}x`);
32
}
33

34
// 典型结果（4K 图片，3840x2160）：
35
// JavaScript:  1250.3ms (100 iterations)
36
// WebAssembly:  180.7ms (100 iterations)
37
// Speedup: 6.9x

1
use wasm_bindgen::prelude::*;
2
use std::num::Wrapping;
3

4
// SHA-256 常量
5
const K: [u32; 64] = [
6
    0x428a2f98, 0x71374491, 0xb5c0fbcf, 0xe9b5dba5,
7
    0x3956c25b, 0x59f111f1, 0x923f82a4, 0xab1c5ed5,
8
    0xd807aa98, 0x12835b01, 0x243185be, 0x550c7dc3,
9
    0x72be5d74, 0x80deb1fe, 0x9bdc06a7, 0xc19bf174,
10
    0xe49b69c1, 0xefbe4786, 0x0fc19dc6, 0x240ca1cc,
11
    0x2de92c6f, 0x4a7484aa, 0x5cb0a9dc, 0x76f988da,
12
    0x983e5152, 0xa831c66d, 0xb00327c8, 0xbf597fc7,
13
    0xc6e00bf3, 0xd5a79147, 0x06ca6351, 0x14292967,
14
    0x27b70a85, 0x2e1b2138, 0x4d2c6dfc, 0x53380d13,
15
    0x650a7354, 0x766a0abb, 0x81c2c92e, 0x92722c85,
16
    0xa2bfe8a1, 0xa81a664b, 0xc24b8b70, 0xc76c51a3,
17
    0xd192e819, 0xd6990624, 0xf40e3585, 0x106aa070,
18
    0x19a4c116, 0x1e376c08, 0x2748774c, 0x34b0bcb5,
19
    0x391c0cb3, 0x4ed8aa4a, 0x5b9cca4f, 0x682e6ff3,
20
    0x748f82ee, 0x78a5636f, 0x84c87814, 0x8cc70208,
21
    0x90befffa, 0xa4506ceb, 0xbef9a3f7, 0xc67178f2,
22
];
23

24
#[wasm_bindgen]
25
pub fn sha256(input: &[u8]) -> Vec<u8> {
26
    let mut h: [Wrapping<u32>; 8] = [
27
        Wrapping(0x6a09e667), Wrapping(0xbb67ae85),
28
        Wrapping(0x3c6ef372), Wrapping(0xa54ff53a),
29
        Wrapping(0x510e527f), Wrapping(0x9b05688c),
30
        Wrapping(0x1f83d9ab), Wrapping(0x5be0cd19),
31
    ];
32

33
    // 填充消息
34
    let bit_len = (input.len() as u64) * 8;
35
    let mut msg = input.to_vec();
36
    msg.push(0x80);
37
    while (msg.len() % 64) != 56 {
38
        msg.push(0);
39
    }
40
    msg.extend_from_slice(&bit_len.to_be_bytes());
41

42
    // 处理每个 512-bit 块
43
    for block in msg.chunks(64) {
44
        let mut w = [Wrapping(0u32); 64];
45
        for i in 0..16 {
46
            w[i] = Wrapping(u32::from_be_bytes([
47
                block[i*4], block[i*4+1], block[i*4+2], block[i*4+3]
48
            ]));
49
        }
50
        for i in 16..64 {
51
            let s0 = rotr(w[i-15].0, 7) ^ rotr(w[i-15].0, 18) ^ (w[i-15].0 >> 3);
52
            let s1 = rotr(w[i-2].0, 17) ^ rotr(w[i-2].0, 19) ^ (w[i-2].0 >> 10);
53
            w[i] = w[i-16] + Wrapping(s0) + w[i-7] + Wrapping(s1);
54
        }
55

56
        let [mut a, mut b, mut c, mut d, mut e, mut f, mut g, mut hh] = h;
57

58
        for i in 0..64 {
59
            let s1 = Wrapping(rotr(e.0, 6) ^ rotr(e.0, 11) ^ rotr(e.0, 25));
60
            let ch = (e & f) ^ (!e & g);
61
            let temp1 = hh + s1 + ch + Wrapping(K[i]) + w[i];
62
            let s0 = Wrapping(rotr(a.0, 2) ^ rotr(a.0, 13) ^ rotr(a.0, 22));
63
            let maj = (a & b) ^ (a & c) ^ (b & c);
64
            let temp2 = s0 + maj;
65

66
            hh = g; g = f; f = e; e = d + temp1;
67
            d = c; c = b; b = a; a = temp1 + temp2;
68
        }
69

70
        h[0] = h[0] + a; h[1] = h[1] + b;
71
        h[2] = h[2] + c; h[3] = h[3] + d;
72
        h[4] = h[4] + e; h[5] = h[5] + f;
73
        h[6] = h[6] + g; h[7] = h[7] + hh;
74
    }
75

76
    h.iter().flat_map(|x| x.0.to_be_bytes()).collect()
77
}
78

79
fn rotr(x: u32, n: u32) -> u32 {
80
    (x >> n) | (x << (32 - n))
81
}
82

83
/// SHA-256 十六进制输出
84
#[wasm_bindgen]
85
pub fn sha256_hex(input: &[u8]) -> String {
86
    sha256(input).iter().map(|b| format!("{:02x}", b)).collect()
87
}
88

89
/// PBKDF2-SHA256
90
#[wasm_bindgen]
91
pub fn pbkdf2_sha256(password: &[u8], salt: &[u8], iterations: u32, key_len: usize) -> Vec<u8> {
92
    let mut result = Vec::with_capacity(key_len);
93
    let mut block_num = 1u32;
94

95
    while result.len() < key_len {
96
        let mut u = hmac_sha256(password, &[salt, &block_num.to_be_bytes()].concat());
97
        let mut block = u.clone();
98

99
        for _ in 1..iterations {
100
            u = hmac_sha256(password, &u);
101
            for j in 0..32 {
102
                block[j] ^= u[j];
103
            }
104
        }
105

106
        result.extend_from_slice(&block[..std::cmp::min(32, key_len - result.len())]);
107
        block_num += 1;
108
    }
109

110
    result
111
}
112

113
fn hmac_sha256(key: &[u8], message: &[u8]) -> Vec<u8> {
114
    let mut k = if key.len() > 64 {
115
        sha256(key)
116
    } else {
117
        key.to_vec()
118
    };
119
    k.resize(64, 0);
120

121
    let mut ipad = vec![0x36u8; 64];
122
    let mut opad = vec![0x5cu8; 64];
123

124
    for i in 0..64 {
125
        ipad[i] ^= k[i];
126
        opad[i] ^= k[i];
127
    }
128

129
    let inner = sha256(&[&ipad[..], message].concat());
130
    sha256(&[&opad[..], &inner[..]].concat())
131
}

1
import init, { sha256_hex, pbkdf2_sha256 } from './pkg/wasm_demo.js';
2

3
await init();
4

5
// SHA-256 哈希
6
const encoder = new TextEncoder();
7
const hash = sha256_hex(encoder.encode('Hello, World!'));
8
console.log(hash);
9
// "dffd6021bb2bd5b0af676290809ec3a53191dd81c7f70a4b28688a362182986f"
10

11
// PBKDF2 密钥派生
12
const password = encoder.encode('my-secret-password');
13
const salt = crypto.getRandomValues(new Uint8Array(16));
14
const derivedKey = pbkdf2_sha256(password, salt, 100000, 32);
15
console.log('Derived key:', Array.from(derivedKey).map(b => b.toString(16).padStart(2, '0')).join(''));

1
const data = new Uint8Array(1024 * 1024); // 1MB 随机数据
2
crypto.getRandomValues(data);
3

4
// Wasm SHA-256
5
async function benchWasm(iterations) {
6
  const start = performance.now();
7
  for (let i = 0; i < iterations; i++) {
8
    sha256_hex(data);
9
  }
10
  return performance.now() - start;
11
}
12

13
// Web Crypto API（浏览器原生）
14
async function benchWebCrypto(iterations) {
15
  const start = performance.now();
16
  for (let i = 0; i < iterations; i++) {
17
    await crypto.subtle.digest('SHA-256', data);
18
  }
19
  return performance.now() - start;
20
}
21

22
// JavaScript 纯实现
23
async function benchJS(iterations) {
24
  const start = performance.now();
25
  for (let i = 0; i < iterations; i++) {
26
    sha256JS(data); // 假设有纯 JS 实现
27
  }
28
  return performance.now() - start;
29
}
30

31
// 典型结果（1MB 数据，100 次迭代）：
32
// Web Crypto API:  120ms  (最快，硬件加速)
33
// Wasm SHA-256:    450ms  (接近原生)
34
// JavaScript:     3200ms  (最慢)

1
#[wasm_bindgen]
2
pub fn mandelbrot(
3
    output: &mut [u8],
4
    width: u32,
5
    height: u32,
6
    x_min: f64,
7
    x_max: f64,
8
    y_min: f64,
9
    y_max: f64,
10
    max_iter: u32,
11
) {
12
    let w = width as usize;
13
    let h = height as usize;
14

15
    for py in 0..h {
16
        for px in 0..w {
17
            let x0 = x_min + (px as f64 / w as f64) * (x_max - x_min);
18
            let y0 = y_min + (py as f64 / h as f64) * (y_max - y_min);
19

20
            let mut x = 0.0f64;
21
            let mut y = 0.0f64;
22
            let mut iter = 0u32;
23

24
            while x * x + y * y <= 4.0 && iter < max_iter {
25
                let xtemp = x * x - y * y + x0;
26
                y = 2.0 * x * y + y0;
27
                x = xtemp;
28
                iter += 1;
29
            }
30

31
            let idx = (py * w + px) * 4;
32

33
            if iter == max_iter {
34
                // 集合内部：黑色
35
                output[idx] = 0;
36
                output[idx + 1] = 0;
37
                output[idx + 2] = 0;
38
                output[idx + 3] = 255;
39
            } else {
40
                // 根据迭代次数着色
41
                let t = iter as f64 / max_iter as f64;
42
                output[idx] = (9.0 * (1.0 - t) * t * t * t * 255.0) as u8;
43
                output[idx + 1] = (15.0 * (1.0 - t) * (1.0 - t) * t * t * 255.0) as u8;
44
                output[idx + 2] = (8.5 * (1.0 - t) * (1.0 - t) * (1.0 - t) * t * 255.0) as u8;
45
                output[idx + 3] = 255;
46
            }
47
        }
48
    }
49
}