返回顶部

js使用canvas通过img标签的获取图片主色和副色

JavaScript无法直接获取图片的主色和副色,但可以通过以下步骤来获取:

将图片绘制到canvas中

使用canvas的getImageData方法获取图片像素信息

遍历像素信息,统计出现最多的颜色作为主色,次多的颜色作为副色

下面是一个获取图片主色和副色的示例代码:

// 创建一个Image对象
var img = new Image();
// 加载图片
img.onload = function() {
  // 创建一个canvas元素
  var canvas = document.createElement('canvas');
  canvas.width = img.width;
  canvas.height = img.height;
  // 将图片绘制到canvas中
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
  // 获取像素信息
  var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height).data;
  // 统计颜色出现次数
  var colors = {};
  for (var i = 0; i < imageData.length; i += 4) {
    var r = imageData[i];
    var g = imageData[i + 1];
    var b = imageData[i + 2];
    var color = r + ',' + g + ',' + b;
    if (color in colors) {
      colors[color]++;
    } else {
      colors[color] = 1;
    }
  }
  // 找出出现次数最多的颜色和次多的颜色
  var maxCount = 0;
  var secondMaxCount = 0;
  var maxColor = '';
  var secondMaxColor = '';
  for (var color in colors) {
    if (colors[color] > maxCount) {
      secondMaxCount = maxCount;
      secondMaxColor = maxColor;
      maxCount = colors[color];
      maxColor = color;
    } else if (colors[color] > secondMaxCount) {
      secondMaxCount = colors[color];
      secondMaxColor = color;
    }
  }
  // 输出结果
  console.log('主色:rgb(' + maxColor + ')');
  console.log('副色:rgb(' + secondMaxColor + ')');
};
// 设置图片地址
img.src = 'example.jpg';


暂无评论