如何获取mix-blend-mode: difference下文本颜色的变化度量？

一、理解difference混合模式的颜色计算逻辑 #

difference模式的核心是前景色与背景色的RGB通道分别取绝对值差值，具体公式为：

• 混合后R通道：|前景R - 背景R|
• 混合后G通道：|前景G - 背景G|
• 混合后B通道：|前景B - 背景B|

以你给出的例子：

• 前景色#000（RGB：0,0,0），背景色#fff（RGB：255,255,255）
• 每个通道差值为255，混合后颜色为#fff，每个通道的变化率都是100%，平均变化率也为100%。

二、计算颜色变化度量的两种方法 #

方法1：基于公式手动计算（适合纯色背景） #

通过解析前景色和背景色的RGB值，直接套用difference公式计算混合后的颜色，再对比原颜色计算变化率。

// 十六进制颜色转RGB对象
function hexToRgb(hex) {
  const fullHex = hex.length === 4 ? hex.replace(/./g, c => c + c).slice(1) : hex.slice(1);
  const r = parseInt(fullHex.slice(0, 2), 16);
  const g = parseInt(fullHex.slice(2, 4), 16);
  const b = parseInt(fullHex.slice(4, 6), 16);
  return { r, g, b };
}

// 计算difference混合后的颜色
function calculateDifferenceBlend(foregroundRgb, backgroundRgb) {
  return {
    r: Math.abs(foregroundRgb.r - backgroundRgb.r),
    g: Math.abs(foregroundRgb.g - backgroundRgb.g),
    b: Math.abs(foregroundRgb.b - backgroundRgb.b)
  };
}

// 计算单个通道的颜色变化率
function calculateChannelChangeRate(originalValue, blendedValue) {
  return ((blendedValue - originalValue) / 255) * 100;
}

// 计算RGB通道的平均变化率
function calculateAverageChangeRate(originalRgb, blendedRgb) {
  const rRate = Math.abs(calculateChannelChangeRate(originalRgb.r, blendedRgb.r));
  const gRate = Math.abs(calculateChannelChangeRate(originalRgb.g, blendedRgb.g));
  const bRate = Math.abs(calculateChannelChangeRate(originalRgb.b, blendedRgb.b));
  return (rRate + gRate + bRate) / 3;
}

// 示例使用
const foreground = hexToRgb('#000');
const background = hexToRgb('#fff');
const blendedColor = calculateDifferenceBlend(foreground, background);
const avgChangeRate = calculateAverageChangeRate(foreground, blendedColor);

console.log('混合后颜色RGB:', blendedColor);
console.log('平均颜色变化率:', `${avgChangeRate.toFixed(2)}%`); // 输出100.00%

方法2：通过Canvas获取实际渲染颜色（适合复杂背景） #

如果背景是渐变、图片等非纯色，直接计算无法得到准确结果，可以用Canvas模拟渲染，提取文本区域的像素颜色后计算变化率。

// 复用之前的hexToRgb、calculateAverageChangeRate函数

async function getBlendedTextChangeRate(foregroundHex, backgroundHex, text) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 设置画布尺寸，确保能完整容纳文本
  canvas.width = 300;
  canvas.height = 60;
  
  // 绘制背景
  ctx.fillStyle = backgroundHex;
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  
  // 设置混合模式并绘制文本
  ctx.globalCompositeOperation = 'difference';
  ctx.fillStyle = foregroundHex;
  ctx.font = '24px Arial';
  ctx.fillText(text, 20, 40);
  
  // 提取文本区域的多个像素点求平均（避免单像素误差）
  const samplePoints = [
    { x: 30, y: 35 }, { x: 50, y: 35 }, { x: 70, y: 35 },
    { x: 30, y: 45 }, { x: 50, y: 45 }, { x: 70, y: 45 }
  ];
  
  let totalR = 0, totalG = 0, totalB = 0;
  samplePoints.forEach(point => {
    const pixel = ctx.getImageData(point.x, point.y, 1, 1).data;
    totalR += pixel[0];
    totalG += pixel[1];
    totalB += pixel[2];
  });
  
  const blendedRgb = {
    r: Math.round(totalR / samplePoints.length),
    g: Math.round(totalG / samplePoints.length),
    b: Math.round(totalB / samplePoints.length)
  };
  
  const originalRgb = hexToRgb(foregroundHex);
  const avgChangeRate = calculateAverageChangeRate(originalRgb, blendedRgb);
  
  return { blendedRgb, avgChangeRate };
}

// 示例调用
getBlendedTextChangeRate('#000', '#fff', 'Hello').then(result => {
  console.log('混合后平均颜色:', result.blendedRgb);
  console.log('平均颜色变化率:', `${result.avgChangeRate.toFixed(2)}%`);
});

三、注意事项 #

• 若背景为非纯色，文本不同位置的颜色变化率可能存在差异，建议采样多个像素点计算平均值，结果更准确。
• 方法1计算效率更高，适合简单场景；方法2能还原真实渲染效果，适合复杂背景。

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