Question

我正在尝试使用getImageData（）从16 x 16图像中获取像素数组。我将使用它来制作更大的瓷砖地图。例如，如果左上角像素的颜色为绿色，那么在我的实际游戏地图上将会有一个0,7的草图。我的代码用于获取数组：

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;

getImageData（）仅为红色，绿色和蓝色值提供0

1 个答案: