使用JS来获取文章封面主题色

前提

之前在研究APlayer的时候发现了一个插件，根据封面自适应主题，一开始完全看的不是很懂，直接复制官网的过来也用不了，后面发现他写的有问题，他最后一句setTheme(index)，js的找错真的头痛，百度白天也没找出答案，后面才发现需要选中它的索引setTheme(index.index)这样才有用。

后面在看这个js的时候发现它可以根据图片的颜色来获取主色调，博客本来是有自动获取获取封面主色调的函数的，但是需要图片存放在有数据万象功能的存储桶里，但是需要亿点点的money，我本着能白嫖绝不付费的想法，想了一下，是不是可以把这个插件整合到博客中去，结果是可以的，但是会拖慢一点响应的速度好像，免费的还要什么自行车。

下面是官网的函数

const colorThief = new ColorThief();
const image = new Image();
const xhr = new XMLHttpRequest();
const setTheme = (index) => {
    if (!ap.list.audios[index].theme) {
        xhr.onload = function(){
            let coverUrl = URL.createObjectURL(this.response);
            image.onload = function(){
                let color = colorThief.getColor(image);
                ap.theme(`rgb(${color[0]}, ${color[1]}, ${color[2]})`, index);
                URL.revokeObjectURL(coverUrl)
            };
            image.src = coverUrl;
        }
        xhr.open('GET', ap.list.audios[index].cover, true);
        xhr.responseType = 'blob';
        xhr.send();
    }
};
setTheme(ap.list.index);
ap.on('listswitch', (index) => {
    setTheme(index);
});

引入js

找到 _config.butterfly.yml文件，在inject的bottom引入js

inject:

   bottom:
    - <script data-pjax async type="text/javascript" src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/color-thief/2.3.2/color-thief.umd.js"></script>

下面这段js需要放入到你使用数据万象主题颜色的函数中了，我的是放在catch当中

var path = document.getElementById("post-top-bg")?.src;//获取图片的src
const colorThief = new ColorThief();
const image = new Image();
image.src = path + "?imageAve";
image.setAttribute('crossOrigin', 'anonymous')//设置图片跨源
image.onload = function () {
  let color = colorThief.getColor(image);//返回红色、绿色和蓝色值的三个整数的数组
//   root.style.setProperty("--bieyinan-bar-background", `rgb(${color[0]}, ${color[1]}, ${color[2]})`);
//   root.style.setProperty("--bieyinan-main", `rgb(${color[0]}, ${color[1]}, ${color[2]})`);
//   root.style.setProperty("--bieyinan-theme-op-deep", `rgb(${color[0]}, ${color[1]}, ${color[2]},0.6)`);//可以修改自己所需要的变量
}