1、安裝npm i rgbaster；
2、新建pickColor.js

(function (window, undefined) {

  "use strict";

  // Helper functions.
  var getContext = function (width, height) {
    var canvas = document.createElement("canvas");
    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    return canvas.getContext('2d');
  };

  var getImageData = function (img, loaded) {

    var imgObj = new Image();
    var imgSrc = img.src || img;

    // Can't set cross origin to be anonymous for data url's
    // https://github.com/mrdoob/three.js/issues/1305
    if (imgSrc.substring(0, 5) !== 'data:')
      imgObj.crossOrigin = "Anonymous";

    imgObj.onload = function () {
      var context = getContext(imgObj.width, imgObj.height);
      context.drawImage(imgObj, 0, 0);

      var imageData = context.getImageData(0, 0, imgObj.width, imgObj.height);
      loaded && loaded(imageData.data);
    };

    imgObj.src = imgSrc;

  };

  var makeRGB = function (name) {
    return ['rgb(', name, ')'].join('');
  };

  var mapPalette = function (palette) {
    var arr = [];
    for (var prop in palette) {
      arr.push(frmtPobj(prop, palette[prop]))
    };
    arr.sort(function (a, b) {
      return (b.count - a.count)
    });
    return arr;
  };

  var fitPalette = function (arr, fitSize) {
    if (arr.length > fitSize) {
      return arr.slice(0, fitSize);
    } else {
      for (var i = arr.length - 1; i < fitSize - 1; i++) {
        arr.push(frmtPobj('0,0,0', 0))
      };
      return arr;
    };
  };

  var frmtPobj = function (a, b) {
    return {
      name: makeRGB(a),
      count: b
    };
  }


  // RGBaster Object
  // ---------------
  //
  var PALETTESIZE = 10;

  var RGBaster = {};

  RGBaster.colors = function (img, opts) {

    opts = opts || {};
    var exclude = opts.exclude || [], // for example, to exclude white and black:  [ '0,0,0', '255,255,255' ]
      paletteSize = opts.paletteSize || PALETTESIZE;

    getImageData(img, function (data) {

      var colorCounts = {},
        rgbString = '',
        rgb = [],
        colors = {
          dominant: {
            name: '',
            count: 0
          },
          palette: []
        };

      var i = 0;
      for (; i < data.length; i += 4) {
        rgb[0] = data[i];
        rgb[1] = data[i + 1];
        rgb[2] = data[i + 2];
        rgbString = rgb.join(",");

        // skip undefined data and transparent pixels
        if (rgb.indexOf(undefined) !== -1 || data[i + 3] === 0) {
          continue;
        }

        // Ignore those colors in the exclude list.
        if (exclude.indexOf(makeRGB(rgbString)) === -1) {
          if (rgbString in colorCounts) {
            colorCounts[rgbString] = colorCounts[rgbString] + 1;
          } else {
            colorCounts[rgbString] = 1;
          }
        }

      }

      if (opts.success) {
        var palette = fitPalette(mapPalette(colorCounts), paletteSize + 1);
        opts.success({
          dominant: palette[0].name,
          secondary: palette[1].name,
          palette: palette.map(function (c) {
            return c.name;
          }).slice(1)
        });
      }
    });
  };

  window.RGBaster = window.RGBaster || RGBaster;

})(window);

3、show.vue

<template>
  <div>
    <div
      class="tl"
      :style="'background:linear-gradient(to bottom,' + color2 + ',' + cc + ')'"
    >
      <div class="triangle">
        <van-swipe :autoplay="3000" @change="onchange">
          <van-swipe-item
            v-for="(image, index) in images"
            :key="index"
            :autoplay="3000"
            indicator-color="white"
          >
            <img :src="image.url" style="width: 80%; height: 160px" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>
  </div>
</template>
<script>
import pickColor from "@/utils/pickColor";
export default {
  data() {
    return {
      images: [
        {
          id: 0,
          url: require("https://img03.sogoucdn.com/app/a/100520146/3205fa52dccd07a388622300cb98f571"),
        },
        {
          id: 1,
          url: require("https://img03.sogoucdn.com/app/a/100520146/58317fdefb42c34bd601b9c5352b41a5"),
        },
        {
          id: 2,
          url: require("https://img04.sogoucdn.com/app/a/100520146/38f7d169d29b6bf1df3cc0e01da2e3be"),
        },
      ],
      color1: "",
      color2: "",
      cc: "#ffffff",
    };
  },
  mounted() {
    this.getImgColor(this.images[0].url);
  },
  methods: {
    // rgb背景色轉(zhuǎn)十六進制#xxxxxx;
    getHexBgColor(bg) {
      var str = [];
      var rgb = bg.split("(");
      for (var k = 0; k < 3; k++) {
        str[k] = parseInt(rgb[1].split(",")[k]).toString(16);
      }
      str = "#" + str[0] + str[1] + str[2];
      return str;
    },

    onchange(index) {
      this.getImgColor(this.images[index].url);
    },

    //獲取圖片主題色
    getImgColor(_img) {
      var _this = this;
      var img = _img;
      RGBaster.colors(img, {
        paletteSize: 10, //調(diào)色板大?。蛇x項）
        exclude: ["rgb(0,0,0)", "rgb(255,255,255)", "rgb(254,254,254)"], //剔除的顏色
        success: function (payload) {
          // payload.dominant是主色，RGB形式表示
          // payload.secondary是次色，RGB形式表示
          // payload.palette是調(diào)色板，含多個主要顏色，數(shù)組
          console.log(payload.dominant);
          console.log(payload.secondary);
          _this.color1 = _this.getHexBgColor(payload.dominant);
          _this.color2 = _this.getHexBgColor(payload.secondary);
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
.tl {
  width: 100%;
  height: 200px;
}
.triangle {
  padding-top: 60px;
}
</style>
<style>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.5);
  position: relative;
}
</style>