主页 / 问题 / 690302
Accepted
Денис Небесный
Asked:2020-07-10 14:54:59 +0000 UTC2020-07-10 14:54:59 +0000 UTC

如何找到图像中的主色？

  • 772

在此处输入图像描述

如何获取每个像素的颜色，对其进行计数，最后只得到图像中出现频率最高的那个？

也许你知道一个现成的图书馆。预先感谢您的帮助。

javascript

2 个回答

  1. Best Answer

    有一个小型 RGBaster 库(briangonzalez/rgbaster.js)

    它使您可以完全按照自己的需要进行操作。下面是它的使用示例。

    // Для примера я загружаю изображение по URL, а не из тела документа
var img = 'http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/img/main-images/6.jpg';

RGBaster.colors(img, {
  // Не учитывать белый цвет
  exclude: ['rgb(255,255,255)'],
  success: function(payload) {
    // console.log(payload.dominant);  // Преобладающий цвет
    // console.log(payload.secondary); // Второй по популярности цвет
    // console.log(payload.palette);   // Палитра цветов (по умолчанию 30)
    // Устанавливаем фоновый цвет равный самому популярному.
    document.body.style.background = payload.dominant;
  }
});
    img {
  width: 250px;
  display: block;
  margin: 0 auto;
}
    <script src="https://cdn.rawgit.com/briangonzalez/rgbaster.js/b2fb235b/rgbaster.min.js"></script>
<img src='http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/img/main-images/6.jpg'>

    • 4

  2. Vibrant.js库允许您实现所需的功能。

    此处有一个更详细的示例。

    var img = document.querySelector('img');
img.setAttribute('src', img.getAttribute('data-src')); 
img.crossOrigin = "Anonymous";
img.addEventListener('load', function() {
  var vibrant = new Vibrant(img);
  var swatches = vibrant.swatches();
  for (var swatch in swatches)
    if (swatches.hasOwnProperty(swatch) && swatches[swatch])
      console.log(swatch, swatches[swatch].getHex())
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vibrant.js/1.0.0/Vibrant.js"></script>
<img data-src="https://raw.githubusercontent.com/jariz/vibrant.js/master/examples/3.jpg" />

    • 2

相关问题