javascript 如何独立创建一个新的 ImageData 对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13626465/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to create a new ImageData object independently?
提问by Likhit
I want to create a new ImageData object in code. If I have a Uint8ClampedArrayout of which I want to make an image object, what is the best way to do it?
我想在代码中创建一个新的 ImageData 对象。如果我Uint8ClampedArray想制作一个图像对象，最好的方法是什么？
I guess I could make a new canvas element, extract its ImageData and overwrite its data attribute, but that seems like a wrong approach.
我想我可以创建一个新的画布元素，提取其 ImageData 并覆盖其数据属性，但这似乎是一种错误的方法。
It would be great if I could use the ImageData constructor directly, but I can't figure out how to.
如果我可以直接使用 ImageData 构造函数就太好了，但我不知道如何使用。
回答by hamczu
This is interesting problem... You can't just create ImageDataobject:
这是一个有趣的问题......你不能只创建ImageData对象：
var test = new ImageData(); // TypeError: Illegal constructor
I have also tried:
我也试过：
var imageData= context.createImageData(width, height);
imageData.data = mydata; // TypeError: Cannot assign to read only property 'data' of #<ImageData>
but as described in MDNdataproperty is readonly.
但如MDN 中所述，data属性是只读的。
So I think the only way is to create object and set data property with iteration:
所以我认为唯一的方法是通过迭代创建对象并设置数据属性：
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];
}
Update:I have discovered the setmethod in dataproperty of ImageData, so solution is very simple:
更新：我set在dataImageData 的属性中发现了该方法，所以解决方案非常简单：
var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
imageData.data.set(myData);
回答by Luka
Newest versions of Chrome and Firefox already support ImageDataconstructor. You can find its definition at MDN.
最新版本的 Chrome 和 Firefox 已经支持ImageData构造函数。你可以在MDN找到它的定义。
For other browsers you can create this constructor yourself:
对于其他浏览器，您可以自己创建此构造函数：
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;
}
You can use it like this:
你可以这样使用它：
var imgData1 = new ImageData(data, width, height);
var imgData2 = new ImageData(width, height);
回答by qubyte
The ImageDataconstructor is finally becoming available in Chrome and Firefox (see the compatibility table on mdn). There are two forms:
该ImageData构造终于成为Chrome和Firefox提供（见的兼容性表MDN）。有两种形式：
var imageData = new ImageData(width, height);
and if you want to build an instance with a UInt8ClampedArrayobject data:
如果你想用一个UInt8ClampedArray对象构建一个实例data：
var imageData = new ImageData(data, width, height); // height is optional
For compatibility reasons, it's best to use createImageDatavia a canvas 2D context though, as demonstrated in other answers.
出于兼容性原因，最好createImageData通过画布 2D 上下文使用，如其他答案中所示。
