javascript - 将 ArrayBuffer 转换为 ImageData 以在 Canvas 上绘制 : optimization

Question

我通过以原始 ImageData 格式发送每个帧(按 RGBA 顺序每像素 4 个字节)通过 WebSocket 流式传输视频。当我在客户端接收到每一帧时(作为 ArrayBuffer)，我想尽可能高效地将此图像直接绘制到 Canvas 上，使用 putImageData .

这是我目前的解决方案:

// buffer is an ArrayBuffer representing a properly-formatted image
var array = new Uint8ClampedArray(buffer);
var image = new ImageData(array, width, height);
canvas.putImageData(image, 0, 0);

但是速度很慢。我的理论是:

• 数组(大小约为 1MB)被复制三次，一次复制到 Uint8ClampedArray 中，一次复制到 ImageData 中，最后复制到 Canvas 中, 每帧(每秒 30 次)。

• 我为每一帧使用两次 new，这可能是垃圾收集器的问题。

这些理论是否正确？如果正确，我可以使用哪些技巧来尽快完成此操作？我愿意接受特定于浏览器的答案。

Answer 1

不，您的 ImageData image 和 TypedArray array 共享完全相同的缓冲区 buffer。

这些只是指针，您的原始缓冲区永远不会被“复制”。

var ctx = document.createElement('canvas').getContext('2d');

var buffer = ctx.getImageData(0,0,ctx.canvas.width, ctx.canvas.height).data.buffer;

var array = new Uint8ClampedArray(buffer);

var image = new ImageData(array, ctx.canvas.width, ctx.canvas.height);

console.log(array.buffer === buffer && image.data.buffer === buffer);

对于您的处理时间问题，最好的方法是直接将视频流发送到 videoElement 并使用 drawImage。