Documento de referência: https://kuangyx.cn
Idéia geral: desenhe a imagem em uma tela e, em seguida, obtenha a cor de cada ponto da tela, a última da mesma cor é a cor do tema, acho que os dados obtidos por essa ideia são relativamente precisos e veja outros artigo foi escrito por alguém, mas a maior parte é para obter a cor do canto superior esquerdo da tela, que é relativamente unilateral, então finalmente escolhi este. Bem, essa é a ideia geral. Vamos procurar o código de implementação específico!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style>
img {
width: 300px;
}
</style>
<body>
<img src="https://qiniu.ve-link.com/files/4/d/f2/8666e5e6af0e58dda40ea323f029715302f9f2d4.png" id="img">
</body>
<script type="text/javascript">
const oImg = document.getElementById('img');
oImg.crossOrigin = ''
oImg.onload = function () {
const w = this.width;
const h = this.height;
// 创建画布
const canvas = document.createElement('canvas');
canvas.width = w;
canvas.height = h;
// 绘制图片在画布上
const context = canvas.getContext('2d');
context.drawImage(this, 0, 0);
// onload 内
let pxArr = context.getImageData(0, 0, w, h).data;
pxArr = Array.from(pxArr);
// onload 内
const colorList = {}
let i = 0;
while (i < pxArr.length) {
const r = pxArr[i];
const g = pxArr[i + 1];
const b = pxArr[i + 2];
// const a = pxArr[i + 3];
i = i + 4; // 最后 +4 比每次 i++ 快 10ms 左右性能
// const key = [r, g, b, a].join(',')
const key = [r, g, b].join(',')
key in colorList ? ++colorList[key] : (colorList[key] = 1)
}
// onload 内
let arr = [];
for (let key in colorList) {
arr.push({
rgba: `rgb(${key})`,
num: colorList[key]
})
}
arr = arr.sort((a, b) => b.num - a.num)
console.log(arr)
}
</script>
</html>
O que quer que você se preocupe irá controlá-lo, vamos lá! ! !