将伪调色板应用于 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;
}