无法从 ImageData 对象中获取像素 [重复]答案

【问题标题】：Can't get the pixels from ImageData object [duplicate]无法从 ImageData 对象中获取像素 [重复]
【发布时间】：2019-09-02 14:18:41
【问题描述】：

我正在尝试使用 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);

而画布是这样定义的：

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

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

我哪里做错了？

【问题讨论】：

标签： javascript html5-canvas imagedata

【解决方案1】：

你应该等到你的 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);
}

【讨论】：

每次都能得到我