如何对图片主题色进行提取

r囧r小猫 2022-09-04 06:51 205阅读 0赞

## 一起网易云 ???? ##

网易云音乐想必是大家很熟悉的一款 app 了，毕竟大家在深夜都会`网抑云`![3332370a0bfe5e444ef8b451bff25961.png][]开玩笑了，最近在网易云听歌时，发现了一个很有意思的特效：

就是切换歌曲时，会根据当前封面替换背景色。作为资深切图仔，我那该死的好奇心兜不住了，不行，我要去一探究竟。![77392135f6949b1db6d9b68dd1c2691b.png][]首先我构思了很多它可能的实现方式：

*  机器学习对图片进行色彩分析
 *  前端提取图片主色调，做渐变处理
 *  封面背景图做高斯模糊

对于第一种，他不在我的知识范围内，这里就不展开说明了 ????。

第二种的话，一般都是利用`canvas`来实现。

第三种相对来说，从技术层面来看，实现上是最为简单的。

做了猜测分析后，我默默打开了熟悉的 Chrome 控制台，打开了网易云音乐的源代码：![276c83a4fca82e4e6ee11a9398728074.png][]

好家伙，果然是第三种实现方式。????

本来到这里，本文就该结束了。但之前也有朋友问过我`如何对前端图片主题色进行提取`的问题，正好之前也做过类似的需求，这里就展开做个说明吧。

我们这里以一个图片网站为例，来展示实际业务中应用较广的场景：![038550f6e2ec126a8d7f1064bf59e5a5.gif][]在弱网下，图片加载速度较慢，此时在图片完全加载之前，提取图片的主色调，然后填充为背景色。这样用户体验能有较大的提升。

那具体是怎么实现的呢？????

我们这里采用`canvas`来实现，具体分为三步：

*  获取图片数据
 *  对图片数据进行处理
 *  对颜色列表排序

这里我们使用的测试图片为：![bcf264df18d798e2830d0577633046b0.png][]

相对来说，主色调较为明显，也便于测试～

## 获取图片数据 ???? ##

我们知道图片是由一个个像素点组成的。通过 canvas 的`getImageData()`方法恰好可以获取图片的像素数据：

let imgObj = document.getElementById('yourId');
    
    // 创建画布
    let canvas = document.createElement('canvas');
    canvas.setAttribute('width', imgObj.width);
    canvas.setAttribute('height', imgObj.height);
    let context = canvas.getContext('2d');
    // 将图片画在画布上
    context.drawImage(imgObj, 0, 0);
    // 获取像素数据
    let imgData = context.getImageData(0, 0, imgObj.width, imgObj.height);
    let pixelData = imgData.data;

但这时你去打印`pixelData`，你会发现结果为：![5d0a30583ce835992fb2d0fa683c26e3.png][]好家伙，全是 0，，，????

我一时想不到是什么原因：难道是 canvas 的 api 使用不熟练？

![4dc0d92d67fee96e2ef84ec64980ad85.png][]在`stackoverflow`上找到了上面的回答：![54b92bd8a4fe0cc3c5cb2fe51db2a386.png][]但是我修改后还是不行。

这时，我想到图片加载是异步的。可能图片还没加载完毕就开始从画布读取图片数据了，显然这是不对的。于是我对原有代码做了一番调整：

getMainColor("./test.jpeg");
    function getMainColor(image) {
      return new Promise((resolve, reject) => {
        try {
          const canvas = document.createElement("canvas");
          const img = new Image(); // 创建img元素
          img.src = image; // 设置图片源地址
          img.onload = () => {
            let color = getImageColor(canvas, img);
            resolve(color);
          };
        } catch (e) {
          reject(e);
        }
      });
    }
    function getImageColor(canvas, img) {
      const context = canvas.getContext("2d");
      context.drawImage(img, 0, 0);
    
      // 获取像素数据
      let pixelData = context.getImageData(
        0,
        0,
        canvas.width,
        canvas.height
      ).data;
      console.log("pixelData", pixelData);
      return pixelData;
    }

事实证明：it's true![30408623d41749524098538d7ee82468.png][]

获取了图片数据，下一步就要对其进行相应的处理。

## 对图片数据进行处理 ???? ##

展开上一步得到的数据：![db9949108d054cf5c21077f902744d9c.png][]这里的数据是什么意思呢？其实就是`rgba`，分布代表`红色(Red)`，`绿色(Green)`，`蓝色(Blue)`和`透明度(Alpha)`。`rgba` 的图片每个像素点是由上面四个数值表示的。也就是说每四个为一组。

知道了规律，那让我们来对数据做一下清洗：主要就是对颜色进行分组，并统计每种颜色分别出现的次数：

function getImageColor(canvas, img) {
      const context = canvas.getContext("2d");
      context.drawImage(img, 0, 0);
    
      // 获取像素数据
      let pixelData = context.getImageData(
        0,
        0,
        canvas.width,
        canvas.height
      ).data;
      console.log("pixelData", pixelData);
      return getCountsArr(pixelData);
    }
    function getCountsArr(pixelData) {
      let colorList = [];
      let rgba = [];
      let rgbaStr = "";
      // 分组循环
      for (let i = 0; i < pixelData.length; i += 4) {
        rgba[0] = pixelData[i];
        rgba[1] = pixelData[i + 1];
        rgba[2] = pixelData[i + 2];
        rgba[3] = pixelData[i + 3];
    
        if (rgba.indexOf(undefined) !== -1 || pixelData[i + 3] === 0) {
          continue;
        }
        // console.log("rgba", rgba);
        rgbaStr = rgba.join(",");
        if (rgbaStr in colorList) {
          ++colorList[rgbaStr];
        } else {
          colorList[rgbaStr] = 1;
        }
      }
      console.log("colorList", colorList);
    
      return colorList;
    }

打印`colorList`结果为：![f6c7da926c88412952310e70b28450a4.png][]

到这里，我们就得到了每种数据分别出现的次数。

## 对颜色列表排序 ???? ##

最后一步，对上面得到的色值对象做一个排序：

for (let prop in colorList) {
      arr.push({
        // 如果只获取rgb,则为`rgb(${prop})`
        color: `rgba(${prop})`,
        count: colorList[prop],
      });
    }
    // 数组排序
    arr.sort((a, b) => {
      return b.count - a.count;
    });
    
    console.log("arr", arr);

排序后得到如下结果：![2fbd4a6ff3276a4da63e2f98b13686ae.png][]

到这里我们就得到了图片色值出现次数从大到小的排序数组，我们来看排在第一位的`rgba(206,205,201,255)`：![875969fc8a2a50e7c1d59ce89a1b374e.png][]再把测试图片贴一下：![904049602d3b833871b0fad77507af0e.png][]肉眼可见的主题色已经被提取出来了！????

## 反思 ???? ##

最后还是回到文章最开始提到的网易云音乐的播放器特效。不管它的实现方式是怎么样的，它的这种产品创意是值得我们学习的。

我们平时在浏览国内外的一些网站或者使用一些 app 时，总能遇到一些让你拍手称赞的效果。而这些特效往往又与我们前端分不开。

俗话说：`前端是离产品最近的开发工程师`，那最近你有没有遇到一些让你感觉很惊艳或者很有想法的效果呢，欢迎在评论区留言 ????

[![723e83b07d17a4ff756369e192090dd9.png][]][723e83b07d17a4ff756369e192090dd9.png 1]

## 关于奇舞团 ##

奇舞团是 360 集团最大的大前端团队，代表集团参与 W3C 和 ECMA 会员（TC39）工作。奇舞团非常重视人才培养，有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择，并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

![a74ba0354b0d851ec3b36c4de4ef409f.png][]

[3332370a0bfe5e444ef8b451bff25961.png]: /images/20220829/78c1ca07632d4afe8b835601ea785e6f.png
[77392135f6949b1db6d9b68dd1c2691b.png]: /images/20220829/194641745bcf4ae4b78f6afe23aa28f4.png
[276c83a4fca82e4e6ee11a9398728074.png]: /images/20220829/49db7de5a6114488891023b30ed44e1e.png
[038550f6e2ec126a8d7f1064bf59e5a5.gif]: /images/20220829/dd138e6d70014742a717b23b7532ebc3.png
[bcf264df18d798e2830d0577633046b0.png]: /images/20220829/97b13898b9264bc6a5a88b07b4e5c6d9.png
[5d0a30583ce835992fb2d0fa683c26e3.png]: /images/20220829/5bd247d9dfb14c8ba612b847b0faa7fe.png
[4dc0d92d67fee96e2ef84ec64980ad85.png]: https://img-blog.csdnimg.cn/img_convert/4dc0d92d67fee96e2ef84ec64980ad85.png
[54b92bd8a4fe0cc3c5cb2fe51db2a386.png]: /images/20220829/46b4b37e2677414c8f79494c09d0fbc9.png
[30408623d41749524098538d7ee82468.png]: /images/20220829/3197b2fd021b4fab88f1306d00994828.png
[db9949108d054cf5c21077f902744d9c.png]: /images/20220829/12c78d5270ed4009ad2d5a8babb5bac0.png
[f6c7da926c88412952310e70b28450a4.png]: /images/20220829/388e05ec8abe4d06af96592458a806ea.png
[2fbd4a6ff3276a4da63e2f98b13686ae.png]: /images/20220829/16a381871634427db48f0518c3570e63.png
[875969fc8a2a50e7c1d59ce89a1b374e.png]: https://img-blog.csdnimg.cn/img_convert/875969fc8a2a50e7c1d59ce89a1b374e.png
[904049602d3b833871b0fad77507af0e.png]: /images/20220829/bc05b78ee1414aa5af5c705646e0ed0d.png
[723e83b07d17a4ff756369e192090dd9.png]: /images/20220829/702772ecaeb44c7eba0e51b65e16171d.png
[723e83b07d17a4ff756369e192090dd9.png 1]: http://mp.weixin.qq.com/s?__biz=Mzg4MTYwMzY1Mw%3D%3D&chksm=cf61d698f8165f8e2b7f6cf4a638347c3b55b035e6c2095e477b217723cce34acbbe943ad537&idx=1&mid=2247496626&scene=21&sn=699dc2b117d43674b9e80a616199d5b6#wechat_redirect
[a74ba0354b0d851ec3b36c4de4ef409f.png]: /images/20220829/16146e83b9ff4ad4bbad0283e500dc8f.png