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

我想在代码中创建一个新的ImageData对象。如果我有一个

uint8clampedaray

，我想用它制作一个图像对象，那么最好的方法是什么

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

---

如果我可以直接使用ImageData构造函数就太好了，但是我不知道如何使用。

有

createImageData（）

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

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

---

有关更多信息，请参阅。

这是一个有趣的问题。。。您不能只创建

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> 

更新： 我在ImageData的

data

属性中发现了

set

方法，所以解决方案非常简单：

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

---

最新版本的Chrome和Firefox已经支持

ImageData

constructor。你可以在网站上找到它的定义

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

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

---

ImageData

构造器终于可以在Chrome和Firefox中使用了（请参见上的兼容性表）。有两种形式：

var imageData = new ImageData(width, height);

如果要使用

UInt8ClampedArray

对象

数据

构建实例：

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

---

出于兼容性原因，最好通过画布2D上下文使用

createImageData

，如其他答案所示。

您在哪里找到

set

？这本书没有提到MDN@programminginallston，ImageData的数据是Uint8ClampedArray:）@twinlakes，以供ImageData Uint8ClampedArray检查的进一步参考。此答案的投票率最高，但同时已过时。请检查其他答案，特别是建议

ImageData

constructor-对我来说，这更好、更简洁。这似乎激发了对规范的修复，使其更容易@Domenic ha，感谢链接。我现在确实感到很自豪，虽然我知道这没什么大不了的。但是，一个学生的问题导致规范的修订也不是一件小事。

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