提取图片主色作为页面主题色

前言#

本站使用astro开发，主题参考heo，但本教程具有通用性 本教程使用canvas提取主色 不用往下看了,会造成跨域

核心代码#

function getMainColor(img) {
  const canvas = new OffscreenCanvas(1, 1);
  const ctx = canvas.getContext("2d");
  if (!ctx) return;
  ctx.drawImage(img, 0, 0, 1, 1);
  const { data } = ctx.getImageData(0, 0, 1, 1);
  const rgba=data.join(",").split(",")
  document.documentElement.style.setProperty('--heo-main-none',`rgba(${rgba[0]},${rgba[1]},${rgba[2]},0)`)
  document.documentElement.style.setProperty('--heo-main-op-light',`rgba(${rgba[0]},${rgba[1]},${rgba[2]},0.05)`)
  document.documentElement.style.setProperty('--heo-main-op-deep',`rgba(${rgba[0]},${rgba[1]},${rgba[2]},0.85)`)
  document.documentElement.style.setProperty('--heo-main-op',`rgba(${rgba[0]},${rgba[1]},${rgba[2]},0.14)`)
  document.documentElement.style.setProperty('--heo-main',`rgba(${rgba})`)
}

先用canvas取色，然后将颜色转化为rgba

通过document.documentElement.style.setProperty插入样式

应用于图片#

<img crossorigin="anonymous" onload="javascript:getMainColor(this);" />

crossorin允许canvas跨域

onload触发取色

适配pjax#

判断当前页面是否存在#post-bg

const path = (document.querySelector("#post-cover") as HTMLImageElement)?.src
  if (path == undefined) {
    document.documentElement.style.setProperty('--heo-main', 'var(--heo-theme)');
    document.documentElement.style.setProperty('--heo-main-op', 'var(--heo-theme-op)');
    document.documentElement.style.setProperty('--heo-main-op-deep', 'var(--heo-theme-op-deep)');
    document.documentElement.style.setProperty('--heo-main-none', 'var(--heo-theme-none)');
  }

在pjax:complete中执行