如何独立创建新的 ImageData 对象？答案

【问题标题】：How to create a new ImageData object independently?如何独立创建新的 ImageData 对象？
【发布时间】：2012-11-17 13:36:19
【问题描述】：

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

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

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

【问题讨论】：

这似乎激发了对规范的修复，使其更容易w3.org/Bugs/Public/show_bug.cgi?id=24301
@Domenic 哈哈，谢谢你的链接。我现在实际上感到相当自豪，虽然我知道这没什么大不了的。但是，嘿，导致规范修订的学生问题也不是小事。

标签： javascript canvas html5-canvas getimagedata

【解决方案1】：

有createImageData() 方法。但为此，您需要现有画布的上下文。

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

更多信息请参见here。

【讨论】：

【解决方案2】：

这是个有趣的问题...你不能只创建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);

【讨论】：

你在哪里找到set？ MDN中没有提到
@programminginallston，ImageData 的数据是一个 Uint8ClampedArray :)
@twinlakes 进一步参考 ImageData Uint8clampedarrays 检查this。
这个答案是最受欢迎的，但同时也是过时的。请检查其他答案，特别是建议 ImageData 构造函数 - 对我来说，这更好，更简洁。

【解决方案3】：

最新版本的 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);

【讨论】：

【解决方案4】：

ImageData 构造函数终于在 Chrome 和 Firefox 中可用（请参阅mdn 上的兼容性表）。有两种形式：

var imageData = new ImageData(width, height);

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

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

出于兼容性原因，最好通过画布 2D 上下文使用 createImageData，如其他答案所示。

【讨论】：