如何独立创建一个新的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属性是readonly.

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

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];
}

更新: 我set在dataImageData的属性中发现了方法,因此解决方案非常简单:

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

Answer 2

最新版本的Chrome和Firefox已经支持ImageData构造函数.您可以在MDN上找到它的定义.

对于其他浏览器,您可以自己创建此构造函数:

function ImageData() {
    var i = 0;
    if(arguments[0] instanceof Uint8ClampedArray) {
        var data = arguments[i++];
    }
    var width = arguments[i++];
    var height = arguments[i];      

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

你可以像这样使用它:

var imgData1 = new ImageData(data, width, height);
var imgData2 = new ImageData(width, height);