如何独立创建一个新的ImageData对象? [英] How to create a new ImageData object independently?
问题描述
我想在代码中创建一个新的ImageData对象。如果我有一个 Uint8ClampedArray
,我想制作一个图像对象,最好的方法是什么?
I want to create a new ImageData object in code. If I have a Uint8ClampedArray
out of which I want to make an image object, what is the best way to do it?
我想我可以创建一个新的canvas元素,提取它的ImageData并覆盖它的数据属性,但这似乎是一种错误的方法。
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
对象:
This is interesting problem... You can't just create ImageData
object:
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
property is readonly。
but as described in MDN data
property is readonly.
所以我认为唯一的方法是使用迭代创建对象和设置数据属性:
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];
}
更新:
我发现了ImageData的 data
属性中的 set
方法,因此解决方案非常简单:
Update:
I have discovered the set
method in data
property of ImageData, so solution is very simple:
var canvas = document.createElement('canvas');
var imageData = canvas.getContext('2d').createImageData(width, height);
imageData.data.set(myData);
这篇关于如何独立创建一个新的ImageData对象?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!