Как найти преобладающий цвет на изображении?

#javascript #jquery

Как получить цвет каждого пикселя, посчитать, и в итоге оставить только тот, который
наиболее часто встречается в изображение?  

Возможно, вы знаете уже готовые библиотеке. Заранее, признателен за помощь.
    

Ответы

Ответ 1

Есть маленькая библиотека 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;
}




Ответ 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())
});