提取图片的近似平均色

async function approximateAverageColor(src) {
  const image = new Image();
  image.crossOrigin = 'anonymous'; // 必须在设置 src 前；服务器也要允许跨域
  image.src = src;
  await image.decode();
  const canvas = document.createElement('canvas');
  const scale = Math.min(1, 64 / Math.max(image.naturalWidth, image.naturalHeight));
  canvas.width = Math.max(1, Math.round(image.naturalWidth * scale));
  canvas.height = Math.max(1, Math.round(image.naturalHeight * scale));
  const context = canvas.getContext('2d', { willReadFrequently: true });
  if (!context) throw new Error('当前环境无法使用 Canvas 2D');
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
  // 跨域资源未授权时，此处会抛 SecurityError，交由调用方处理。
  const { data } = context.getImageData(0, 0, canvas.width, canvas.height);
  let red = 0, green = 0, blue = 0, weight = 0;
  for (let i = 0; i < data.length; i += 4) {
    const alpha = data[i + 3] / 255;
    red += data[i] * alpha;
    green += data[i + 1] * alpha;
    blue += data[i + 2] * alpha;
    weight += alpha;
  }
  if (weight === 0) return null; // 全透明图没有可见平均色
  return {
    r: Math.round(red / weight),
    g: Math.round(green / weight),
    b: Math.round(blue / weight),
    alpha: weight / (data.length / 4),
  };
}

async function example(src) {
  try {
    const color = await approximateAverageColor(src);
    return color ? `rgba(${color.r}, ${color.g}, ${color.b}, ${color.alpha})` : 'transparent';
  } catch (error) {
    console.error('读取图片失败', error);
    return '#eeeeee';
  }
}