是否可以將 ImageBitmap 直接從 JS 傳輸到 WebAssembly 並在那里轉換為 ImageData？

Question

是否可以將ImageBitmap直接從 JS 傳輸到 WebAssembly 而無需將其轉換為類型化數組？ ImageBitmap 可以是 JS 和 WebAssembly 之間的某種“可轉移” object，因為它位於主線程和 web 工作線程之間嗎？

這個想法是用更快的東西替換CanvasRenderingContext2D.getImageData() 。 目前，我這樣做是為了在視頻上應用過濾器：

1. context.drawImage(imageBitmap, 0, 0);
2. 讓 imageData = context.getImageData();
3. 循環通過 imageData 並應用色度鍵過濾器。

我想嘗試用下一個替換它（如果可能的話）：

1. 將 ImageBitmap 傳輸到 WebAssembly；
2. 將 ImageBitmap 轉換為 ImageData；
3. 循環通過 ImageData 並應用 chrome 鍵過濾器；
4. 將更改后的 ImageData 傳回 JS 並在 canvas 上繪制。

我不熟悉 WebAssembly 的可能性，所以可能對這個愚蠢的問題感到抱歉。

謝謝。

Answer 1

我也不太熟悉 WebAssembly 方面的力量，但我真的不認為有任何方法可以從那里使用ImageBitmap object。

但無論如何，從ImageBitmap object 讀取像素數據的緩慢之處在於從 GPU 到 CPU 的回讀操作。 WebAssembly 在這里並沒有真正的幫助。

您可能想查看WebGL ，而不是哪個 IIRC 具有渲染和回讀的路徑，兩者之間的操作最少，這可能比使用 2D 上下文快一點。 另一個需要關注的地方是傳入的WebGPU上下文，但支持較少。 再一次，我對它不是很熟悉，但如果你希望獲得最好的性能，它絕對值得一看。

但是，在您的情況下，最好的方法可能是在您生成ImageBitmap object 時返回前一步。 你沒有說它來自哪里，但可以肯定的是，用於生成它的源已經可以訪問其像素數據，可能比通過 bitmap 更快。 例如，如果你有一個圖像文件的Blob表示，你可以將它的內部ArrayBuffer數據傳遞給你的 WebAssembly 並在那里進行解碼。 如果你有視頻，你可以使用WebCodecs API來提取 YUV 平面。 等等