博客相关 | 如何提取图片主题色并自动选择标题字体颜色

Justlovesmile

发布于 2022-03-30 15:31:45

7160

发布于 2022-03-30 15:31:45

文章被收录于专栏：云+分享云+分享

今天在写博客的时候，做了一个封面图，然后hexo cl && hexo g && gulp && hexo s一键生成，点开后却发现这个标题的字体颜色亮瞎我的眼睛：

于是试了很多帖子，终于把它改好了：

提取主题色的js:https://github.com/briangonzalez/rgbaster.js

处理配色js如下：

if (document.getElementById('post-cover')) {
  const img = document.getElementById('post-cover').getAttribute('data-lazy-src')
  RGBaster.colors(img, {
      paletteSize: 30,
      exclude: ["rgb(255,255,255)", "rgb(0,0,0)", "rgb(254,254,254)"],
      success: function(t) {
        if (t.dominant != 'rgb()'){
          const c = t.dominant.match(/\d+/g);
          const Color = `rgba(${c[0]},${c[1]},${c[2]},0.8)`;
          let fontColor;
          //const grayLevel = c[0] * 0.299 + c[1] * 0.587 + c[2] * 0.114;
          const grayLevel = c[0] * 0.213 + c[1] * 0.715 + c[2] * 0.072;
          //if (grayLevel >= 190) {
          if (grayLevel >= 255/2) {
            // 若为浅色，把文字设置为黑色
            fontColor = '#000';
            metaColor = '#1C1C1C';
          } else {
            fontColor = '#fff';
            metaColor = '#eee';
          }
          document.styleSheets[0].addRule(":root", "--mj-main:" + Color + "!important")
          document.styleSheets[0].addRule(":root", "--mj-titlecolor:" + fontColor + "!important")
          document.styleSheets[0].addRule(":root", "--mj-metacolor:" + metaColor + "!important")
        } else {
          document.styleSheets[0].addRule(":root", "--mj-main: rgba(255,250,240,0.5) !important")
          document.styleSheets[0].addRule(":root", "--mj-titlecolor: #000 !important")
          document.styleSheets[0].addRule(":root", "--mj-metacolor: #1C1C1C !important")
        }
      },
      error: function() {
          document.styleSheets[0].addRule(":root", "--mj-main: rgba(255,250,240,0.5) !important")
          document.styleSheets[0].addRule(":root", "--mj-titlecolor: #000 !important")
          document.styleSheets[0].addRule(":root", "--mj-metacolor: #1C1C1C !important")
      }
  })
} else {
  document.styleSheets[0].addRule(":root", "--mj-main: transparent !important")
  document.styleSheets[0].addRule(":root", "--mj-titlecolor: var(--light-grey) !important")
}

参考：

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

hexo