计算图片的平均色值(主色调)与补色

前言

前端开发的时候经常会有一些奇奇怪怪的需求，比如：

• UI 设计师希望某个详情页的背景色是图片的平均颜色
• 图片上加文字，文字的颜色是图片的补色
• …

虽然这些东西听起来就很想骂人，但是没办法，还是 要吃饭啊

思路

• 平均色值
  第一反应就是比较粗暴的方法，统计所有像素点的 r,g,b 的值，然后分别用累加的 r,g,b 的值除以像素点的个数，得到一个 平均的 r,g,b

• 补色
  得到 平均 r,g,b 之后，再用 255 减去对应的值，就可以得到补色的 r,g,b

步骤

平均色值

function getImgAverageColor(img) {
  const { width, height } = img;
  const totalPixs = width * height;
  let sum_r = 0,
    sum_g = 0,
    sum_b = 0;
  let canvas = document.createElement("canvas");
  let context = canvas.getContext && canvas.getContext("2d");
  canvas.width = width;
  canvas.height = height;
  context.drawImage(img, 0, 0);
  const imgData = context.getImageData(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < imgData.data.length; i += 4) {
    const r = imgData.data[i];
    const g = imgData.data[i + 1];
    const b = imgData.data[i + 2];
    sum_r += r;
    sum_g += g;
    sum_b += b;
  }
  const avg_r = Math.round(sum_r / totalPixs);
  const avg_g = Math.round(sum_g / totalPixs);
  const avg_b = Math.round(sum_b / totalPixs);

  return {
    r: avg_r,
    g: avg_g,
    b: avg_b,
  };
}

补色

function getRevertColor(r, g, b) {
  return {
    r: 255 - r,
    g: 255 - g,
    b: 255 - b,
  };
}