javascript - 如何独立创建一个新的ImageData对象？

Question

我想在代码中创建一个新的 ImageData 对象。如果我有一个 Uint8ClampedArray，我想从中创建一个图像对象，最好的方法是什么？

我想我可以创建一个新的 Canvas 元素，提取它的 ImageData 并覆盖它的数据属性，但这似乎是一种错误的方法。

如果我可以直接使用 ImageData 构造函数就好了，但我不知道该怎么做。

Answer 1

这是一个有趣的问题...您不能只创建 ImageData 对象:

var test = new ImageData(); // TypeError: Illegal constructor

我也试过:

var imageData= context.createImageData(width, height);
imageData.data = mydata; // TypeError: Cannot assign to read only property 'data' of #<ImageData> 

但如 MDN 中所述data 属性是只读的。

所以我认为唯一的方法是创建对象并通过迭代设置数据属性:

var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
for(var i = 0; i < myData.length; i++){
    imageData.data[i] = myData[i];
}

更新:我在ImageData的data属性中发现了set方法，所以解决方法很简单:

var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
imageData.data.set(myData);