Javascript 编辑画布图像

我已经用JavaScript设置了一个画布来显示一个图像，现在我正在尝试将图像转换为一个设置的调色板。我搜索了其他问题，甚至是MDN，但在上面找不到任何东西

我想到了这个：

var image = "http://upload.wikimedia.org/wikipedia/commons/d/d7/RGB_24bits_palette_sample_image.jpg";

var canvas = document.getElementById("c");
var context = canvas.getContext("2d");

// load image from data url
var imageObj = new Image();
imageObj.src = image;
imageObj.onload = function() {
    context.drawImage(this, 0, 0);
};

var imgData = context.getImageData(0,0,canvas.width,canvas.height);
var data = imgData.data;

var palette = [[0,0,0],[118,38,64],[64,51,127],[228,52,254],[14,89,64],[128,128,128],[27,154,254],[191,179,255]];

for(var i = 0; i < data.length; i += 4) {
    var red = data[i];
    var green = data[i+1];
    var blue = data[i+2];
    var alpha = data[i+3];
    min = 9999999999;
    paleteMatch = null;
    for (var j = 0; j < palette.length; j++) {
        var lsd = (Math.pow(palette[j][0] - red, 2) + green + blue) / 3;
        if (lsd < min) {
          min = lsd;
          paletteMatch = palette[j];
        }
    }
    data[i] = paletteMatch[0];
    data[i+1] = paletteMatch[1];
    data[i+2] = paletteMatch[2];
}

imgData.data.set(data);
context.putImageData(imgData, 0, 0);

var图像=”http://upload.wikimedia.org/wikipedia/commons/d/d7/RGB_24bits_palette_sample_image.jpg";
var canvas=document.getElementById（“c”）；
var context=canvas.getContext（“2d”）；
//从数据url加载图像
var imageObj=新图像（）；
imageObj.src=图像；
imageObj.onload=函数（）{
drawImage（this，0，0）；
};
var imgData=context.getImageData（0,0，canvas.width，canvas.height）；
var数据=imgData.data；
变量调色板=[[0,0,0]，[118,38,64]，[64,51127]，[228,52254]，[14,89,64]，[128128128]，[27154254]，[191179255]；
对于（变量i=0；i

变量

data

似乎只包含

0

s，而不包含其他内容。当它进入for循环时，这是一个问题，因为什么都没有发生。据我所知，我没有做错什么

---

为什么图像数据会告诉我每个像素都是黑色的，我该如何解决这个问题？

因为图像的加载是异步的，所以请将代码放在图像的加载中callback@Infer-现在我觉得自己像个白痴。。。干杯