博客相关 | 如何获取图片主题色并修改字体颜色

JUST LOVE SMILE

已于 2022-05-16 21:43:00 修改

阅读量460

点赞数 1

分类专栏：博客相关代码编程折腾记录文章标签： javascript 前端开发语言

于 2022-05-16 21:24:29 首次发布

本文链接：https://blog.csdn.net/qq_43701912/article/details/124808535

版权

代码编程同时被 3 个专栏收录

23 篇文章 9 订阅

订阅专栏

折腾记录

21 篇文章 0 订阅

订阅专栏

博客相关

19 篇文章 2 订阅

订阅专栏

本文介绍了如何通过RGBaster.js提取网页封面图片的主题色，并根据主题色动态调整标题和元信息的颜色。当图片加载后，如果主题色较亮则设置文字颜色为黑色，反之则设置为白色，确保文字与背景的对比度，提供良好的阅读体验。

摘要由CSDN通过智能技术生成

今天在写博客的时候，做了一个封面图，然后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")
}