canvas 提取圖片主色（簡明）

getImageData

ctx.getImageData方法返回一個ImageData對象，它有三個屬性——width、height、data，其中 data 包含了圖片色值數據。

data屬性返回一個 Uint8ClampedArray，它可以被使用作為查看初始像素數據。每個像素用4個1bytes值(按照紅，綠，藍和透明值的順序; 這就是"RGBA"格式) 來代表。每個顏色值部份用0至255來代表。每個部份被分配到一個在數組內連續的索引，左上角像素的紅色部份在數組的索引0位置。像素從左到右被處理，然后往下，遍歷整個數組。——MDN ImageData

根據這一特性，我們可以輕松提取圖片的主色——出現次數最多的顏色。

function fetchImageMainColor(imgSrc) {
    const canvas = document.getElementById('canvas')
    canvas.width = document.documentElement.clientWidth
    canvas.height = document.documentElement.clientHeight

    const ctx = canvas.getContext('2d')
    const img = new Image()
    img.src = imgSrc
    img.onload = () => {
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
      const data = ctx.getImageData(0, 0, canvas.width, canvas.height).data
      const color = getMainColor(data);
    }
}

通過遍歷 data 數組，找到出現最多次數的那個色值，注意，透明的顏色被我們過濾掉了：

function getMainColor(data) {
  const temp = {}
  const len = data.length

  let max = 0;
  let color = ''
  let i = 0
  while(i < len) {
    if (data[i + 3] !== 0) {
      const k = `${data[i]}, ${data[i + 1]}, ${data[i + 2]}, ${(data[i + 3] / 255)}`
      temp[k] = temp[k] ? temp[k] + 1 : 1
      if (temp[k] > max) {
        max = temp[k]
        color = k
      }
    }
    i += 4
  }

  return color
}

其他方法

前端圖片主題色提取
color-thief庫