是否可以将Uint8ClampedArray直接绘制到画布上？

Question

在JavaScript中，您可以使用Uint8ClampedArray直接操作图像的像素。在将该图像渲染到画布之前，您必须：

1. 创建ImageData对象。

2. 使用Uint8ClampedArray将ImageData呈现给ImageData.data.set个对象。

3. 使用ImageData将context.putImageData对象绘制到画布上。

因此，从你的图像Uint8ClampedArray到实际在屏幕上看到它，它需要不少于3次O（N）复制操作。对于大图像，这可能是非常有害的。一种解决方案是缓存ImageData对象，并将指针imageData.data替换为Uint8ClampedArray - 但imageData.data是只读的！有没有办法更有效地做到这一点？

Answer 1

根据MDN's page on ImageData，ImageData(array, width, height)构造函数采用第一个参数

  

包含图像基础像素表示的Uint8ClampedArray。

快速测试验证此参数是否被引用（即未复制）用作ImageData的{​​{1}}属性。此测试记录data：

true

因此，您可以通过使用引用var arr = new Uint8ClampedArray([0,0,0,0]); var idata = new ImageData(arr,1,1); console.log(idata.data === arr); 对象的ImageData属性构建data对象来消除第二步。