直接从 WebAssembly 操作画布字节答案

【问题标题】：Manipulate canvas bytes directly from WebAssembly直接从 WebAssembly 操作画布字节
【发布时间】：2020-05-25 06:30:20
【问题描述】：

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

要使用 Rust 和 WebAssembly 在 canvas 上绘图，我通常会找到一些示例，其中他们将使用浏览器的 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

他们将canvas API 绑定到Rust 并在Rust / WebAssembly 中执行操作，但他们总是使用CanvasRenderingContext2D API 在画布上绘图。

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

我想知道是否还有另一种方法：是否可以将画布直接显示的像素的缓冲区绑定到 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
    }
  }
}

【问题讨论】：

标签： canvas rust webassembly

【解决方案1】：

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

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

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

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

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

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

【讨论】：