java 画布实验报告_编辑画布图像

我已经设置了一个用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);

变量 data 似乎只持有 0 而没有别的 . 当它进入for循环时，这是一个问题，因为没有任何反应 . 据我所知，我没有做错任何事 .

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