如何修改JavaScript代码将RGB颜色输出改为HEX格式？

第一步：准备靠谱的RGB转HEX函数 #

先把这个函数放到你的代码里（要放在用到它的代码之前）：

function rgbToHex(r, g, b) {
  // 限制数值在0-255之间，避免异常值
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  // 转成两位十六进制字符串，不足补0
  const hexR = r.toString(16).padStart(2, '0');
  const hexG = g.toString(16).padStart(2, '0');
  const hexB = b.toString(16).padStart(2, '0');
  // 返回标准HEX格式（可选转大写，小写直接去掉.toUpperCase()即可）
  return `#${hexR}${hexG}${hexB}`.toUpperCase();
}

如果需要支持透明度（HEXA格式），用这个扩展版本：

function rgbToHex(r, g, b, a) {
  r = Math.max(0, Math.min(255, r));
  g = Math.max(0, Math.min(255, g));
  b = Math.max(0, Math.min(255, b));
  const hexR = r.toString(16).padStart(2, '0');
  const hexG = g.toString(16).padStart(2, '0');
  const hexB = b.toString(16).padStart(2, '0');
  let hexStr = `#${hexR}${hexG}${hexB}`;
  // 如果传入透明度参数，追加两位十六进制值
  if (a !== undefined) {
    a = Math.max(0, Math.min(255, a));
    const hexA = a.toString(16).padStart(2, '0');
    hexStr += hexA;
  }
  return hexStr.toUpperCase();
}

第二步：修改原像素化代码 #

找到你原代码中设置RGB背景色的那一行，替换成调用上述函数的结果。

举个常见的原代码片段示例：

// 原代码中设置像素颜色的部分
const pixelData = ctx.getImageData(x, y, 1, 1).data;
const r = pixelData[0];
const g = pixelData[1];
const b = pixelData[2];
const a = pixelData[3];

// 原代码用RGB设置背景色
pixel.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
// 原代码单独处理透明度
if (a < 255) {
  pixel.style.opacity = a / 255;
}

替换后的代码（不支持透明度）：

const pixelData = ctx.getImageData(x, y, 1, 1).data;
const r = pixelData[0];
const g = pixelData[1];
const b = pixelData[2];
const a = pixelData[3];

// 直接用HEX格式设置背景色
pixel.style.backgroundColor = rgbToHex(r, g, b);
// 透明度处理保持不变
if (a < 255) {
  pixel.style.opacity = a / 255;
}

替换后的代码（支持HEXA透明度）：

const pixelData = ctx.getImageData(x, y, 1, 1).data;
const r = pixelData[0];
const g = pixelData[1];
const b = pixelData[2];
const a = pixelData[3];

// 用HEXA格式设置背景色，不需要单独设置opacity
pixel.style.backgroundColor = rgbToHex(r, g, b, a);

核心逻辑说明 #

1. 原代码通过getImageData获取每个像素的RGB(A)值
2. 调用rgbToHex把十进制的RGB值转换成十六进制的HEX字符串
3. 把原来的rgb(...)字符串替换成转换后的HEX字符串即可

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