量化具有 8 种选定颜色的图像 (JavaScript)

Question

我正在编写一个代码，用于拍摄图像并使用我选择的 8 种选定颜色对其进行量化。我想让程序做的是找到一种最接近我在数组中选择的 8 种颜色之一的颜色，并将该像素替换为数组中的那种颜色。问题是我目前有灰度量化图像，但我很难让它显示颜色。我尝试过的是我使用距离函数来获取图像上的颜色与图像像素的距离。这样一来，我的代码似乎仍然无法正常工作。我也尝试用函数替换 RGBA 值，但这也不起作用。如果对解决我的问题有什么建议请给我答复！

这是我的代码：

for(let x = 0; x < image.width; x++){
    for(let y = 0; y < image.height; y++){

        let i = y * image.width + x;

    
        let i_r = i*4+0;
        let i_g = i*4+1;
        let i_b = i*4+2;

        
        let L = 0.2126*rgba[i_r] + 0.7152*rgba[i_g] + 0.0722*rgba[i_b];


        let palette = [ [240, 242,254], [179, 168, 164], [121,192, 246], [103,185,183], [255,201,157], [215,134,94], [67,38,158], [165,104,57]];

        let qL = (L/255) * (palette.length - 1);


        qL = Math.round(qL);

        qL = qL/(palette.length - 1) * 255;

        rgba[i_r] = qL;
        rgba[i_g] = qL;
        rgba[i_b] = qL;

        

    }
}

Answer 1

这可能是解决您的问题的方法：

for(let x = 0; x < image.width; x++){
    for(let y = 0; y < image.height; y++){

        let i = y * image.width + x;

    
        let i_r = i*4+0;
        let i_g = i*4+1;
        let i_b = i*4+2;

        
        let L = 0.2126*rgba[i_r] + 0.7152*rgba[i_g] + 0.0722*rgba[i_b];


        
        // this line should be improved
        let qL = (L/255) * (palette.length - 1);


        qL = Math.round(qL);

        // fix - remove this line
        // qL = qL/(palette.length - 1) * 255;

        // fix
        rgba[i_r] = palette[qL][0];
        rgba[i_g] = palette[qL][1];
        rgba[i_b] = palette[qL][2];
    }
}

请看一下

graph.add(function(x) { return Math.round(8*x/255.0); });

如您所见，第一部分（映射到 0 的值）在 x 轴上只有 16 个值，下一个部分有 32 个...最后一个部分也有 16 个值，它映射到值 8 - 所以猜测应用程序会在这里失败（因为调色板的最大索引应该是 7）。也许你想改进这个。

您可能需要类似的东西（注意 eq 中的 x - 16）

量化具有 8 种选定颜色的图像 (JavaScript)

Quantize an image with 8 selected colors (JavaScript)

javascript

html

node.js

image

quantization