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

Question

在JavaScript中,您可以使用a直接操作图像的像素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的页面ImageData,ImageData(array, width, height)构造函数接受第一个参数

A Uint8ClampedArray包含图像的基础像素表示.

快速测试,可以确认该参数用于通过引用(即,不复制)作为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对象的属性在第一步中构造对象来消除第二步.