实现播客背景随图片变化

听播客的时候，发现页面背景会随着图片的变化而变化：

刚好最近也有类似的需求，所以记录一下。

问题的关键点就是获取图片的平均颜色：

// 获取图片的平均颜色
const getAverageColor = (imgElement) => {
  const canvas = document.createElement("canvas");
  const context = canvas.getContext("2d");

  canvas.width = imgElement.width;
  canvas.height = imgElement.height;
  
  // 将图片绘制到 canvas 上
  context.drawImage(imgElement, 0, 0, imgElement.width, imgElement.height);

  // 获取 canvas 上所有像素的数据
  const imageData = context.getImageData(
    0,
    0,
    imgElement.width,
    imgElement.height
  );
  const data = imageData.data;

  let r = 0,
    g = 0,
    b = 0;

 // 遍历所有像素的数据 
 // 每个像素的数据包含4个值：红色（data[i]）、绿色（data[i+1]）、蓝色（data[i+2]）和透明度（data[i+3]） 
 // 我们只需要红色、绿色和蓝色值
  for (let i = 0; i < data.length; i += 4) {
    r += data[i];
    g += data[i + 1];
    b += data[i + 2];
  }
  
  // 计算平均值
  r = Math.floor(r / (data.length / 4));
  g = Math.floor(g / (data.length / 4));
  b = Math.floor(b / (data.length / 4));

  return `rgb(${r}, ${g}, ${b})`;
};

然后根据具体需求设置渐变和透明度即可。

canvas.drawImage

canvas.drawImage 是 HTML5 Canvas API 中用于将图像、视频或其他 canvas 画布的内容绘制到当前 canvas 的方法。这个方法有多个重载形式，可以根据需要裁剪、缩放和放置图像。

1. 将图像绘制到 canvas 上：

   context.drawImage(image, dx, dy);
   

   • image：要绘制的图像、视频或 canvas 对象。
   • dx：目标 canvas 的 X 坐标。
   • dy：目标 canvas 的 Y 坐标。

2. 将图像绘制到 canvas 上，并指定大小：

   context.drawImage(image, dx, dy, dWidth, dHeight);
   

   • dWidth：绘制到目标 canvas 上的图像宽度。
   • dHeight：绘制到目标 canvas 上的图像高度。

3. 从图像的指定区域绘制到 canvas 上：

   context.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
   

   • sx：图像上开始裁剪的 X 坐标。
   • sy：图像上开始裁剪的 Y 坐标。
   • sWidth：从图像裁剪的宽度。
   • sHeight：从图像裁剪的高度。
   • dx：目标 canvas 的 X 坐标。
   • dy：目标 canvas 的 Y 坐标。
   • dWidth：绘制到目标 canvas 上的图像宽度。
   • dHeight：绘制到目标 canvas 上的图像高度。

canvas.getImageData

canvas.getImageData 是 HTML5 Canvas API 中用于获取 canvas 上指定区域像素数据的方法。该方法返回一个包含指定区域所有像素数据的 ImageData 对象，可以用于图像处理和分析。

getImageData 方法

const imageData = context.getImageData(sx, sy, sw, sh);

• sx：要获取图像数据的矩形区域左上角的 x 坐标。
• sy：要获取图像数据的矩形区域左上角的 y 坐标。
• sw：矩形区域的宽度。
• sh：矩形区域的高度。

ImageData 对象

ImageData 对象包含以下属性：

• width：图像数据的宽度。
• height：图像数据的高度。
• data：一个 Uint8ClampedArray 类型的数组，包含所有像素的数据。每个像素由四个连续的数组元素表示，分别是红色 (R)、绿色 (G)、蓝色 (B) 和 alpha (A) 透明度。