Javascript Can'；t从ImageData对象获取像素

我试图使用

canvas

元素和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);

var image=newimage（）；
image.src=“”；
var context=document.getElementById（“我的画布”）.getContext（“2d”）；
drawImage（image，0,0）；
var imageData=context.getImageData（0,0,1024,1024）；
控制台日志（imageData）；

画布的定义如下：

<canvas id ="my-canvas" width="1024" height="1024">
</canvas>

根据

数据

字段应该是UInt8的4194304（1024*1024*4）大小的数组。相反，我得到了一个奇怪的嵌套结构（如图所示），所有值都是0。该图像为1024*1024 PNG图像

我哪里做错了

---

您应该等待PNG加载（ImageData初始化为零）：

var image=newimage（）；
image.onload=从PNG提取像素；
image.src=“”；
var context=document.getElementById（“我的画布”）.getContext（“2d”）；
函数extractPixelsFromPNG（）{
drawImage（image，0,0）；
var imageData=context.getImageData（0,0,1024,1024）；
控制台日志（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);
}