import rgbaster from 'rgbaster'
let res = await rgbaster('图片url', { scale: 0.6 });
// 获取图片主色
res[0].color
color-thief
github https://github.com/lokesh/color-thief
npmjs https://www.npmjs.com/package/colorthief
文档 https://lokeshdhakar.com/projects/color-thief/
canvas
使用canvas获取图片颜色的方法
<canvas id="canvas"></canvas>
<script>
  // 步骤一：创建 Canvas 元素
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  // 步骤二：绘制图片到 Canvas 上
  var img = new Image();
  img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);
    getImageColors();
  img.src = "image.jpg";
  // 步骤三：遍历像素点获取颜色值
  function getImageColors() {
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var data = imageData.data;
    var colors = [];
    for (var i = 0, len = data.length; i < len; i += 4) {
      var r = data[i];
      var g = data[i + 1];
      var b = data[i + 2];
      var a = data[i + 3];
      colors.push([r, g, b, a]);
    console.log(colors);
</script>
图片主色获取脚本rgbaster.js小介绍小使用
前端-获取图片主色调
javascript 获取图片颜色