小程序 WebAssembly 与高性能计算

// 特性探测，低版本基础库必须降级
const canUseWasm = typeof WXWebAssembly !== 'undefined'

if (!canUseWasm) {
  return fallbackToJs(data)   // 用纯 JS 实现兜底
}

# 安装 emsdk
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk && ./emsdk install latest && ./emsdk activate latest
source ./emsdk_env.sh

# 编译图像灰度滤镜
emcc image_filter.c \
  -O3 \
  -s STANDALONE_WASM=1 \
  -s EXPORTED_FUNCTIONS='["_gray_scale","_malloc","_free"]' \
  -s ALLOW_MEMORY_GROWTH=1 \
  -s INITIAL_MEMORY=16777216 \
  -s MAXIMUM_MEMORY=67108864 \
  --no-entry \
  -o image_filter.wasm

# Binaryen 二次优化
wasm-opt -Oz image_filter.wasm -o image_filter.opt.wasm

{
  "subpackages": [
    {
      "root": "wasm/",
      "name": "wasm"
    }
  ]
}

let wasmInstance = null

async function ensureWasm() {
  if (wasmInstance) return wasmInstance
  await wx.loadSubpackage({ name: 'wasm' })
  const mod = await WXWebAssembly.instantiate('wasm/image_filter.wasm', {
    env: {
      // 导入给 C 代码调用的 JS 函数
      js_log: ptr => console.log('wasm log', ptr)
    }
  })
  wasmInstance = mod.instance
  return wasmInstance
}

const { exports } = wasmInstance
const { memory, gray_scale, malloc, free } = exports

function grayScale(imageData) {
  const { data, width, height } = imageData
  const size = data.length

  // 1. 在 WASM 堆上分配
  const ptr = malloc(size)
  // 2. 拷贝输入（这一步无法避免）
  const heap = new Uint8Array(memory.buffer, ptr, size)
  heap.set(data)
  // 3. 调用计算
  gray_scale(ptr, width, height)
  // 4. 拷贝结果回 JS
  data.set(new Uint8Array(memory.buffer, ptr, size))
  // 5. 释放
  free(ptr)
}

// 错误：buffer 缓存在闭包外，扩容后变成 detached
const cachedHeap = new Uint8Array(memory.buffer)

// 正确：每次使用前重新构造视图
function getHeap() {
  return new Uint8Array(memory.buffer)
}

// image_filter.c
#include <stdlib.h>
#include <math.h>

// 灰度化：原地处理 RGBA 数据
void gray_scale(unsigned char* data, int width, int height) {
    int total = width * height;
    for (int i = 0; i < total; i++) {
        int idx = i * 4;
        unsigned char r = data[idx];
        unsigned char g = data[idx + 1];
        unsigned char b = data[idx + 2];
        // 亮度加权公式（ITU-R BT.601）
        data[idx]     = (unsigned char)(0.299 * r + 0.587 * g + 0.114 * b);
        data[idx + 1] = data[idx];
        data[idx + 2] = data[idx];
    }
}

// 亮度调整
void adjust_brightness(unsigned char* data, int total, int delta) {
    for (int i = 0; i < total; i++) {
        int idx = i * 4;
        for (int c = 0; c < 3; c++) {
            int v = data[idx + c] + delta;
            data[idx + c] = v < 0 ? 0 : (v > 255 ? 255 : v);
        }
    }
}

class WasmImageFilter {
  constructor(instance) {
    this.exports = instance.exports
    this.bufPtr = 0
    this.bufSize = 0
  }

  // 复用缓冲区，避免反复 malloc/free
  _ensureBuffer(size) {
    if (this.bufSize >= size) return this.bufPtr
    if (this.bufPtr) this.exports.free(this.bufPtr)
    this.bufPtr = this.exports.malloc(size)
    this.bufSize = size
    return this.bufPtr
  }

  grayScale(imageData) {
    const { data, width, height } = imageData
    const ptr = this._ensureBuffer(data.length)
    new Uint8Array(this.exports.memory.buffer, ptr, data.length).set(data)
    this.exports.gray_scale(ptr, width, height)
    data.set(new Uint8Array(this.exports.memory.buffer, ptr, data.length))
    return imageData
  }
}

// 使用：把 canvas 数据喂进来
const ctx = wx.createCanvasContext('preview')
wx.canvasGetImageData({
  canvasId: 'preview',
  x: 0, y: 0, width: 750, height: 1000,
  success: async res => {
    const filter = new WasmImageFilter(await ensureWasm())
    const out = filter.grayScale(res)
    wx.canvasPutImageData({
      canvasId: 'preview',
      x: 0, y: 0, width: 750, height: 1000,
      data: out.data
    })
  }
})

async function safeWasmCall(fn, fallback) {
  try {
    if (!canUseWasm) return fallback()
    const inst = await ensureWasm()
    return fn(inst)
  } catch (e) {
    // 上报异常，但不要中断用户操作
    wx.reportMonitor('wasm_fail', 1)
    console.error('[wasm] fallback', e)
    return fallback()
  }
}