Извлечь «доминирующие» цвета из модели HSV? (не от модели RGB)

Первое, что нам нужно сделать, это получить средний цвет изображения. Мы можем сделать это, добавив каждый цветовой канал отдельно, а затем разделив его на высоту и ширину холста.

function channelAverages(data, width, height) {
  let r = 0, g = 0, b = 0
  let totalPixels = width * height
  for (let i = 0, l = data.data.length; i < l; i += 4) {
    r += data.data[i]
    g += data.data[i + 1]
    b += data.data[i + 2]
  }
  return {
    r: Math.floor(r / totalPixels),
    g: Math.floor(g / totalPixels),
    b: Math.floor(b / totalPixels)
  }
}

Далее мы хотим преобразовать среднее значение возвращенного цвета в HSL, мы можем сделать это с помощью этой функции (на которую вы также ссылаетесь выше).

function rgbToHsl(r, g, b) {
  r /= 255, g /= 255, b /= 255;
  var max = Math.max(r, g, b), min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2;

  if (max == min) {
    h = s = 0; // achromatic
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }
  return [h, s, l];
}

Итак, чтобы получить наш вывод, мы можем сделать это:

let data = ctx.getImageData(0, 0, canvas.width, canvas.height)
let avg = channelAverages(data, width, height)
console.log(rgbToHsl(avg.r, avg.g, avg.b))

Если нам нужны числа, которые мы можем использовать в редакторе (например, PhotoShop или Gimp) для проверки наших результатов, нам просто нужно умножить каждое:

h = h * 360 
    Example: 0.08 * 360 = 28.8

s = s * 100 
    Example: 0.85 * 100 = 85

l = l * 100 
    Example: 0.32 * 100 = 32

Существует библиотека под названием Kleur.js, которую вы можете использовать для получения изображений, но помните, что она дает случайную цветовую палитру каждый раз. Но доминирующий цвет останется одним и тем же в каждой цветовой палитре.

// Create the Kleur Object
Kleur = new Kleur();

// Set the image link to get the palette from
imageObj = Kleur.init(imgLink);

// Wait for the image to load
imageObj.onload = function(e) {

    // get the color array from the image
    let colorArr = Kleur.getPixelArray(imageObj);

    // pass the array to generate the color array
    let array_of_pixels = Kleur.generateColorArray(colorArr);

    // you can get the dominant color from the image
    const dominant = Kleur.getDominant(array_of_pixels);

    // log the light colors and the dominant color
    console.log(light, dominant)
}

если вы хотите увидеть пример использования этого кода, посетите codepen

И если вам нужны все доминирующие цвета, которые, я думаю, являются цветами с наибольшим количеством пикселей, вы можете получить доступ к array_of_pixels, поэтому вы можете сделать

// for first five dominant color
for(let x = 0; x < 5; x++){
    console.log(array_of_pixels[x].hsv);
}

// for the dominant colors hsv value
console.log(dominant.hsv)

это зарегистрирует значения hsv для пяти наиболее доминирующих цветов в изображении (обычно доминирующие цвета действительно похожи, поэтому следите за этим)

Kleur js возвращает цвета в различном цветовом пространстве

• RGB
• Шестнадцатеричный
• ВПГ
• XYZ
• ЛАБОРАТОРИЯ
• ЛЧ

он также возвращает count, который представляет собой количество пикселей, имеющих цвет