javascript - getImageData() 只给我红色、绿色和蓝色值 0

Question

我正在尝试使用 getImageData() 从 16 x 16 图像中获取像素数组。我将用它来从更大的图 block 中制作 map 。例如，如果左上角像素的颜色是绿色，那么在我的实际游戏 map 上，在 0, 0 处将会有一个草 block 。我的获取数组的代码:

function getData() {
map = new Image();
map.src = "./res/maps/sample.png";
ctxTemp.drawImage(map, 0, 0);

var temp = ctxTemp.getImageData(0, 0, 16, 16).data;
console.log(temp);

for (var i = 0; i < temp.length; i+=4) {
    var red = temp[i];
        green = temp[i + 1];
        blue = temp[i + 2];
        alpha = temp[i + 3];
}
}

Answer 1

必须等待图像加载。将代码附加到 onload 后工作正常。

function getData() {
    var map = new Image();
    map.onload = function() {
        var canvas = document.getElementsByTagName("canvas")[0];
        var ctx = canvas.getContext("2d");
        ctx.drawImage(map, 0, 0);

        var temp = ctx.getImageData(0, 0, 16, 16).data;
        console.log(temp);

        for (var i = 0; i < temp.length; i += 4) {
            var red = temp[i];
            green = temp[i + 1];
            blue = temp[i + 2];
            alpha = temp[i + 3];
        }
    };

    map.src = "./res/maps/sample.png";
}

window.onload = getData;