javascript - 是否可以将Uint8ClampedArray直接绘制到 Canvas 上？

在JavaScript中，您可以直接使用Uint8ClampedArray操纵图像的像素。在将该图像渲染到 Canvas 上之前，您必须:

创建一个ImageData对象。

使用Uint8ClampedArray将ImageData渲染为ImageData.data.set对象。

使用ImageData将context.putImageData对象绘制到 Canvas 上。

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

最佳答案

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



快速测试验证此参数是否被引用(即未复制)用作ImageData的data属性。此测试记录true:

var arr = new Uint8ClampedArray([0,0,0,0]);
var idata = new ImageData(arr,1,1);
console.log(idata.data === arr);

因此，您可以通过在第一步中使用引用了ImageData对象的data属性构造Uint8ClampedArray对象来消除第二步。

关于javascript - 是否可以将Uint8ClampedArray直接绘制到 Canvas 上？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31757609/