图片主色

图片主色借助 rgbaster.min.js 实现，需要先引入JS文件：

<script src="lib/rgbaster/rgbaster.js" type="text/javascript" charset="utf-8"></script>

示例代码

<div class="aui-content">
  <div class="swiper-container swiper-container-horizontal">
    <div class="swiper-wrapper" style="transition-duration: 0ms; transform: translate3d(-373px, 0px, 0px);">
      <div class="swiper-slide swiper-slide-prev">
        <div class="img" style="background: rgb(59, 66, 77);">
          <img src="/static/img/auilogo.png" alt="" class="image">
        </div>
        <div class="colors">
          <span class="border" style="background: rgb(59, 66, 77);">
          </span>：<i>rgb(59,66,77) | #3b424d</i>
        </div>
      </div>
    </div>
    <div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
      <span class="swiper-pagination-bullet">
      </span>
      <span class="swiper-pagination-bullet swiper-pagination-bullet-active">
      </span>
    </div>
  </div>
</div>
<script src="lib/rgbaster/rgbaster.js" type="text/javascript" charset="utf-8"></script>
<script>
  getImgColor(_img) {
      var img = _img;
      RGBaster.colors(img, {
          paletteSize: 10, //调色板大小（可选项）
          exclude: ['rgb(0,0,0)', 'rgb(255,255,255)', 'rgb(254,254,254)'], //剔除的颜色
          success: function(payload) {
              // payload.dominant是主色，RGB形式表示
              // payload.secondary是次色，RGB形式表示
              // payload.palette是调色板，含多个主要颜色，数组
              // console.log(payload.dominant);
              // console.log(payload.secondary);
              // console.log(payload.palette);
              $(".aui-content .img").css({
                  background: payload.dominant
              });
              $(".colors span").css({
                  background: payload.dominant
              });
              $(".colors i").text(payload.dominant + ' | ' + _this.getHexBgColor(payload.dominant));
          }
      });
      getImgColor('/static/img/auilogo.png')
  }
</script>