將偽調色板應用於 canvas 圖像

Question

如何將自定義調色板應用於 canvas 圖像？

例如，將黑白圖像轉換為彩色圖像：

const colorstops = ["white", "#ffd700", "#cc0077", "#20008c", "black"]; // palette

const imageData = ctx.getImageData(x, y, width, height);
for(let i = 0; i < imageData.data.length; i +=4){
  imageData.data[i] = ?
  imageData.data[i + 1] = ?
  imageData.data[i + 2] = ?
}

ctx.putImageData(imageData, x, y);

所以imageData.data是一個 0-255 數字的數組。 數組中的每 4 個元素對應一個rgba值。 我不知道如何從自定義調色板將這些 map 轉換為 colors。

我想一個解決方案是將colorstops十六進制 colors 數組轉換為一個數組，該數組將 colors 完全映射到從rgb(0,0,0)到rgb(255,255,255)的整個范圍，但這聽起來非常低效。 我可以使用一些數學公式嗎？

Answer 1

您可以計算每個像素的紅色、綠色和藍色值的平均值，然后使用該值將其映射到自定義調色板中的接近顏色。根據平均值和之間的距離找到每個顏色通道的值調色板中最接近的顏色，您可以使用線性插值。

for (let i = 0; i < imageData.data.length; i += 4) {
    let avg = (imageData.data[i] + imageData.data[i + 1] + imageData.data[i + 2]) / 3;

    // find the closest color in the custom palette
    let closestColorIndex = 0;
    for (let j = 0; j < colorstops.length - 1; j++) {
        if (avg >= (j * 255 / (colorstops.length - 1)) && avg <= ((j + 1) * 255 / (colorstops.length - 1))) {
            closestColorIndex = j;
            break;
        }
    }

    // determine the values for each color channel based on linear interpolation
    let color1 = colorstops[closestColorIndex];
    let color2 = colorstops[closestColorIndex + 1];
    let t = (avg - (closestColorIndex * 255 / (colorstops.length - 1))) / (255 / (colorstops.length - 1));

    imageData.data[i] = color1[0] + (color2[0] - color1[0]) * t;
    imageData.data[i + 1] = color1[1] + (color2[1] - color1[1]) * t;
    imageData.data[i + 2] = color1[2] + (color2[2] - color1[2]) * t;
}