如何独立创建一个新的ImageData对象？(How to create a new ImageDa

我想在代码中创建一个新的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];
}

更新：我已经发现了set在法data的ImageData的属性，所以解决方案很简单：

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);

Answer 3:

该ImageData构造终于成为Chrome和Firefox提供（见的兼容性表MDN ）。 有两种形式：

var imageData = new ImageData(width, height);

如果你想用一个建立一个实例UInt8ClampedArray对象data ：

var imageData = new ImageData(data, width, height); // height is optional

出于兼容性考虑，最好还是使用createImageData通过画布2D背景的，但是，在其他的答案证明。

Answer 4:

还有就是createImageData()方法。 但是，为此，你需要一个现有的画布的背景。

var myImageData = context.createImageData(cssWidth, cssHeight);

请参阅这里了解更多信息。

文章来源: How to create a new ImageData object independently?