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

Question

我想在代码中创建一个新的ImageData对象。如果我有一个Uint8ClampedArray，我想制作一个图像对象，最好的方法是什么？ 我猜我可以创建一个新的画布元素，提取其ImageData并覆盖其数据属性，但这似乎是一种错误的方法。 如果我能直接使用ImageData构造函数就太好了，但我无法弄清楚如何使用它。

- Likhit

---

这似乎激发了对规范的修复，以使其更容易 https://www.w3.org/Bugs/Public/show_bug.cgi?id=24301 - Domenic

@Domenic 哈哈，谢谢你提供的链接。我现在感到非常自豪，尽管我知道这不是什么大不了的事情。但嘿，一个学生的问题引发了规范修订，也不是小事。 - Likhit

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所述，数据属性是只读的。

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

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

- hamczu

---

你在哪里找到了 set？MDN 上没有提到它。 - twinlakes

@programminginallston，ImageData的数据是Uint8ClampedArray :) - Danguafer

请参考 @twinlakes 关于 ImageData Uint8clampedarrays 的更多信息，请查看 此链接。 - Paulo Bueno

这个答案是最受赞同的，但同时已经过时了。请查看其他答案，特别是建议使用 ImageData 构造函数 - 对我来说，这更好而且更简洁。 - 1valdis

Answer 2

所有现代浏览器，包括Chrome、Edge、Firefox和Safari都支持ImageData构造函数。您可以在MDN上找到它的定义。

您可以像这样使用它：

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

对于非常老的浏览器，你可以自己创建这个构造函数：

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

- Luka

Answer 3

ImageData构造函数终于在Chrome和Firefox中变得可用(请参见mdn上的兼容性表)。它有两种形式:

var imageData = new ImageData(width, height);

如果您想使用UInt8ClampedArray对象data构建一个实例：

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

为了兼容性考虑，最好通过canvas 2D上下文来使用createImageData，正如其他答案中所示。

- qubyte

Answer 4

有一个createImageData()方法。但是为了使用它，你需要一个已存在的画布上下文。

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

请查看这里获取更多信息。

- Mouagip