直接从 WebAssembly 操作画布字节

Question

我是 Rust 和 WebAssembly 的初学者。我试图找到一种方法来canvas考虑性能的元素。

为了canvas利用 Rust 和 WebAssembly，我通常会找到一些示例，其中他们将使用浏览器的CanvasRenderingContext2D界面并在其上绘制将从 WASM 接收的数据

const canvasContext = canvasElement.getContext("2d");
const canvasImageData = canvasContext.createImageData(width, height);
const imageDataArray = getWasmImageDataArray()
canvasImageData.data.set(imageDataArray);
canvasContext.clearRect(0, 0, width, height);
canvasContext.putImageData(canvasImageData, 0, 0);

来源：https : //wasmbyexample.dev/examples/reading-and-writing-graphics/reading-and-writing-graphics.rust.en-us.html

有一些变体，他们将canvasAPI绑定到 Rust 并在 Rust / WebAssembly 中执行操作，但尽管如此，他们总是使用CanvasRenderingContext2DAPI 在画布上绘制。

这当然意味着 Rust / WebAssembly 会通过浏览器的canvasAPI往返到画布显示缓冲区，这意味着性能下降。

我想知道是否还有另一种方法：是否可以将画布显示的像素的缓冲区直接绑定到 Rust 并直接操作该缓冲区以更改画布显示的内容？有点像这样（伪代码）

Rust 伪代码：

// Makes whole canvas black
drawOnCanvasDisplayBuffer(displayBuffer) {
  for(i = 0; i < displayBuffer.width; i++) {
    for(j = 0; j < displayBuffer.height; j++) {
      displayBuffer[i][j] = COLOR_BLACK
    }
  }
}

Answer 1

WebAssembly 的 I/O 功能非常有限。它可以与其宿主环境（通常是浏览器）交互的唯一方式是直接通过导入/导出函数或间接通过线性内存。

您引用的示例有一个 WebAssembly 模块，其中它的线性内存与主机共享，允许 WebAssembly 模块和 JavaScript 主机读取和写入它。这是为画布操作创建图像缓冲区的理想方法。

我想知道是否还有另一种方法：是否可以将画布显示的像素的缓冲区直接绑定到 Rust 并直接操作该缓冲区以更改画布显示的内容？

不它不是。共享内存实例必须是WebAssembly.Memory类型，它不能是任意缓冲区。

请注意，在您的示例代码中，clearRect不需要该操作：

canvasContext.clearRect(0, 0, width, height); // ***
canvasContext.putImageData(canvasImageData, 0, 0)