从wasm修改画布

Question

是否可以从Web组件有效地修改html5画布？

更新：

var imageData = context.getImageData(x, y, w, h)
var buffer = imageData.data.buffer;  // ArrayBuffer

可能是缓冲区可写的方式。

Answer 1

WebAssembly实例通常具有线性存储区，该存储区作为数组缓冲区暴露给JavaScript API。既可以在JS中分配它，也可以在创建WebAssembly实例时将其传递，或者WebAssembly实例可以创建它并将其导出到JS代码。无论哪种方式，都可以使用arraybuffer（使用createImageData，getImageData和putImageData）将数据有效地复制到Canvas元素中以及从Canvas元素中复制数据。

Answer 2

不，不在WebAssembly和Web-api开发的现阶段。这样，context.getImageData您将获得一个ImageData带有新缓冲区的新对象，该对象必须再次复制到WebAssembly实例的内存缓冲区中。但是，如果您不需要从画布中读取内容而只需要编写内容，则可以ImageData.data在WebAssembly实例的内存中分配。使用ImageData构造函数

imageData = new ImageData(new Uint8ClampedArray(waInstance.export.memory.buffer, byteOffset, width*height*4), width, height)

imageData有一个指向您的数据的指针。在每个渲染，做你的工作在WebAssembly并使用相同imageData的context.putImageData(imageData)，每个周期只有一个大的数据复制这样做。