我正在尝试使用 canvas
从图像中提取像素element 和 ImageData 类,但几乎没有成功。
我的代码是:
var image = new Image();
image.src = "<path to PNG image file>";
var context = document.getElementById("my-canvas").getContext("2d");
context.drawImage(image, 0, 0);
var imageData = context.getImageData(0, 0, 1024, 1024);
console.log(imageData);
Canvas 的定义如下:
<canvas id ="my-canvas" width="1024" height="1024">
</canvas>
根据MDN data
字段应该是 4194304 (1024*1024*4) 大小的 UInt8 数组。相反,我得到了一个奇怪的嵌套结构(如图所示),并且所有值都是 0。该图像是 1024*1024 PNG 图像。
我哪里做错了?
最佳答案
您应该等到 PNG 加载完毕(ImageData 用零初始化):
var image = new Image();
image.onload = extractPixelsFromPNG;
image.src = "<path to PNG image file>";
var context = document.getElementById("my-canvas").getContext("2d");
function extractPixelsFromPNG() {
context.drawImage(image, 0, 0);
var imageData = context.getImageData(0, 0, 1024, 1024);
console.log(imageData);
}
关于javascript - 无法从 ImageData 对象获取像素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57758532/