图片主色值获取脚本-rgbaster-js-介绍-&-使用 - 《代码人生》

示例：

文章参考：

图片主色获取脚本rgbaster.js小介绍小使用 « 张鑫旭-鑫空间-鑫生活 rgbaster.js Github 地址 扩展脚本 如果要取多个颜色，推荐使用color-thief：https://github.com/lokesh/color-thief

温馨提示：

该示例需要在本地开一个服务这样才可以使 rgbaster.js 正常的访问到图片的具体信息，否则会有你跨域的报错信息

示例：

简单的获取主色、次色、调色板

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取图片主题色脚本基础示例</title>
  <script src="./rgbaster.js"></script>
</head>
<body>
  <img src="./demo.jpg" alt="" id="image">
  <script type="text/javascript">
      var img = document.getElementById('image');
      RGBaster.colors(img, {
        success: function(payload) {
          // You now have the payload.
          // payload.dominant是主色，RGB形式表示
          // payload.secondary是次色，RGB形式表示
          // payload.palette是调色板，含多个主要颜色，数组
          console.log(payload.dominant);
          console.log(payload.secondary);
          console.log(payload.palette);
        }
      });
  </script>
</body>
</html>

控制台输出效果图
需要注意的地方：

由于该脚本是不能够跨域进行访问的，所以除了在服务器端增加标示：Access-Control-Allow-Origin: *之外，就只能将文件都放置在同一个服务器上，我这里是本地开的一个虚拟的服务器，所以像上面那样直接去访问另一个域名下的资源是不可以的还有就是建议使用的图片尽量选择缩略图来进行色值获取，结果其实是和大图的一样的，但是大图在获取时或造成一定的卡顿或是闪屏

扩展的完整的示例：

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取图片主题色脚本扩展的完整的示例</title>
  <script src="./rgbaster.js"></script>
</head>
<body>
  <img src="./demo.jpg" alt="" id="image">
  <script type="text/javascript">
  var img = document.getElementById('image');
  RGBaster.colors(img, {
      // return up to 30 top colors from the palette  从调色板返回最多30个顶级颜色
      paletteSize: 30,
      // don't count white
      //排除 白色
      exclude: ['rgb(255,255,255)'],
      // do something when done
      //获取成功之后
      success: function(payload) {
          console.log('Dominant color:', payload.dominant);
          console.log('Secondary color:', payload.secondary);
          console.log('Palette:', payload.palette);
      }
  })
  </script>
</body>
</html>

控制台输出效果图

加了样式的具体的实现

源码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>获取图片主题色脚本扩展的完整的示例</title>
  <script src="./rgbaster.js"></script>
  <style>
      img{
          padding: 40px;
      }
  </style>
</head>
<body>
  <img src="./demo.jpg" alt="" id="image">
  <script type="text/javascript">
  var img = document.getElementById('image');
  RGBaster.colors(img, {
      // return up to 30 top colors from the palette  从调色板返回最多30个顶级颜色
      paletteSize: 30,
      // don't count white
      //排除 白色
      exclude: ['rgb(255,255,255)'],
      // do something when done
      //获取成功之后
      success: function(payload) {
          // img.style.backgroundColor = payload.dominant;
          img.style.backgroundColor = payload.secondary;
          console.log('Dominant color:', payload.dominant);//主色
          console.log('Secondary color:', payload.secondary);//次色
          console.log('Palette:', payload.palette);//调色板
      }
  })
  </script>
</body>
</html>

浏览器效果图

整个的 padding 的背景色就是取得图片的主色值 Github 示例地址