Question

我设置了一个用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 s而不是其他内容。当它进入for循环时，这是一个问题，因为没有任何反应。据我所知，我没有做错任何事。

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

编辑画布图像

0 个答案: