主题色提取

最新推荐文章于 2024-06-11 09:58:00 发布

qq_36320160

最新推荐文章于 2024-06-11 09:58:00 发布

阅读量498

点赞数

分类专栏：前端文章标签： Vue.js JavaScript

原文链接：https://www.mk2048.com/blog/blog.php?id=0a000j122j&title=%E4%B8%BB%E9%A2%98%E8%89%B2%E6%8F%90%E5%8F%96

版权

前端专栏收录该内容

520 篇文章 2 订阅

订阅专栏

在做音乐webapp的时候，被腾讯的一款本地音乐播放器（轻听）的播放界面惊艳到了（如下图），于是决定‘复制’下来。

撸起袖子就开始干~
首先想到的是绘入canvas中利用getImageData提取数据然后分析得到主题色，因为用的qq音乐api遇到了跨域问题，在解决跨域问题后（具体方法看这里跨域那些事），紧接着的问题是如何提取主题色。
关于颜色提取的大概算法有这些

魔法数字法
八叉树提取法
最小插值法
中位切分法
聚类
......
具体的就看看这两篇啦
图片主题色提取算法小结
 图像主题色提取算法

接下来介绍几款颜色提取的js插件

1.rgbaster.js

github地址。这是一段小脚本，可以提取图片的主色、次色。

使用

首先肯定是引入啦，然后上代码

const img = document.querySelector('img');
// 或者
// const img = 'http://example.com/image.jpg';
RGBaster.colors(img, {
     // 调色板大小，就是提取的样本，越大越精确，同时性能越差
     paletteSize: 30,
     // 颜色排除
     exclude: [ 'rgb(255,255,255)', 'rgb(0,0,0)' ],
     success: function(payload) {
        console.log('Dominant color:',payload.dominant);// 提取出来的主色
        console.log('Secondary color:', payload.secondary);// 次色
        console.log('Palette:', payload.palette); // 调色板
     }})

提取出来的结果是一个rgb值

需要使用rgba值的同学，只需要正则一下，提取出来再拼接就好啦

const c = payload.dominant.match(/\d /g);
const Color = `rgba(${c[0]},${c[1]},${c[2]},0.8)`;

颜色有深有浅，暗色的话，黑色字体就看不清了，文字颜色得随着背景色取反，我们可以把rgb值转化成灰度值来判断颜色深浅

let fontColor;
const grayLevel = c[0] * 0.299   c[1] * 0.587   c[2] * 0.114;
      if (grayLevel >= 192) {
        // 若为浅色，把文字设置为黑色
        fontColor = '#000';
      } else {
        fontColor = '#fff';
      }

在项目中我就是用这个插件，成果是这样的

对项目感兴趣的点这里?项目地址

最后再给大家附上另外两款颜色提取插件

2.Color Thief

项目地址

使用

// 提取主色
const img = document.querySelector('img');
var colorThief = new ColorThief();
    console.log(colorThief.getColor(img));
 }
// 调色板
var colorThief = new ColorThief();
colorThief.getPalette(sourceImage, 8);

结果

3.vibrant.js

从图像中提取突出的颜色。
Vibrant.js是Android支持库中令人敬畏的Palette类的JavaScript端口。
项目地址

使用

const img = document.querySelector('img');
var vibrant = new Vibrant(img);
    var swatches = vibrant.swatches()
    for (var swatch in swatches)
        if (swatches.hasOwnProperty(swatch) && swatches[swatch])
            console.log(swatch, swatches[swatch].getHex())