javascript - 从 HSV 模型中提取 'dominant' 颜色？ (不是来自 RGB 模型)

Question

我正在寻找从图像中获取颜色托盘。

我可以从图像中获取RGB数据

getRgbData() {
    this.canvas = window.document.createElement('canvas')
    this.context = this.canvas.getContext('2d')
    this.width = this.canvas.width = image.width || image.naturalWidth
    this.height = this.canvas.height = image.height || image.naturalHeight
    this.context.drawImage(image, 0, 0, this.width, this.height)
    return this.context.getImageData(0, 0, this.width, this.height)
}

并将RGB值转换为HSV模型(从https://gist.github.com/mjackson/5311256#file-color-conversion-algorithms-js-L1编写的rgbToHsv方法)

getHsvData() {
    const { data, width, height } = this.getRgbData()
    const pixcel = width * height
    const q = 1
    const array = []
    for (var i = 0, r, g, b, offset; i < pixcel; i = i + q) {
        offset = i * 4
        r = data[offset + 0]
        g = data[offset + 1]
        b = data[offset + 2]
        array.push({ r, g, b })
    }

    return array.map(l => this.rgbToHsv(l.r, l.g, l.b))
} 

结果是这样的(它是从 RGB 24 位转换的数据)

[
   {h: 0.6862745098039215, s: 0.7727272727272727, v: 0.17254901960784313},
   {h: 0.676470588235294, s: 0.723404255319149, v: 0.1843137254901961},
   .....
]

color-thief和 vibrant.js是从 RGB 模型中获取主色，但我想从转换后的 HSV 模型中获取主色。(我听说从HSV中提取颜色更适合人眼，是吗？)

如何从 HSV 模型中提取颜色......？

Answer 1

我们需要做的第一件事是获取图像的平均颜色。我们可以通过单独添加每个颜色 channel 然后除以 Canvas 的高度和宽度来做到这一点。

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