如何为Canvas图像应用自定义调色板？

你要实现的是将黑白Canvas图像通过自定义调色板转为彩色，不用预生成全范围映射数组的话，线性插值是高效的数学方案，核心思路是把灰度值（0-255）映射到调色板的颜色区间，再通过插值算出对应颜色。

实现步骤 #

1. 预处理调色板：把颜色字符串（如white、十六进制值）转换为RGB数值数组，方便后续计算。
2. 提取灰度值：黑白图像的RGB通道值一致，直接取R通道值作为灰度参考。
3. 区间映射与线性插值：根据灰度值找到它在调色板中的对应区间，再通过线性插值计算出最终的RGB值。

完整代码实现 #

// 自定义调色板
const colorstops = ["white", "#ffd700", "#cc0077", "#20008c", "black"];

// 工具函数：将颜色字符串转为RGB数值数组
function colorToRGB(color) {
  const tempCanvas = document.createElement('canvas');
  const tempCtx = tempCanvas.getContext('2d');
  tempCtx.fillStyle = color;
  tempCtx.fillRect(0, 0, 1, 1);
  const [r, g, b] = tempCtx.getImageData(0, 0, 1, 1).data;
  return [r, g, b];
}

// 预处理调色板为RGB数组
const palette = colorstops.map(color => colorToRGB(color));
const paletteLength = palette.length;

// 获取图像数据
const imageData = ctx.getImageData(x, y, width, height);
const data = imageData.data;

// 遍历每个像素
for(let i = 0; i < data.length; i += 4){
  // 提取灰度值（黑白图R=G=B，取R即可）
  const gray = data[i];
  // 计算灰度在调色板中的比例（0-1）
  const ratio = gray / 255;
  // 计算对应的区间索引
  const segment = ratio * (paletteLength - 1);
  const index = Math.floor(segment);
  // 处理边界情况（灰度为255时直接取最后一个颜色）
  if(index === paletteLength - 1){
    data[i] = palette[index][0];
    data[i+1] = palette[index][1];
    data[i+2] = palette[index][2];
    continue;
  }
  // 计算区间内的插值比例
  const t = segment - index;
  // 线性插值计算RGB值
  data[i] = Math.round(palette[index][0] * (1 - t) + palette[index+1][0] * t);
  data[i+1] = Math.round(palette[index][1] * (1 - t) + palette[index+1][1] * t);
  data[i+2] = Math.round(palette[index][2] * (1 - t) + palette[index+1][2] * t);
  // alpha通道保持不变
}

// 放回处理后的图像数据
ctx.putImageData(imageData, x, y);

代码说明 #

• 颜色转换工具函数：利用临时Canvas的getImageData可以兼容所有CSS颜色格式（命名色、十六进制、rgba等），不用自己写解析逻辑。
• 线性插值：核心公式是result = start * (1-t) + end * t，其中t是当前点在区间内的比例（0-1），这样能让颜色过渡更平滑。
• 效率优势：不需要预生成256个颜色的映射数组，直接实时计算，内存占用更低，遍历一次像素即可完成转换。

内容的提问来源于stack exchange，提问作者Alex