html如何提取图片颜色代码,解析CSS 提取图片主题色功能(小技巧)

提取图片颜色代码和解析CSS提取图片主题色是两个不同的功能，我来分别回答。

1. 如何提取图片颜色代码

可以使用JavaScript中的Canvas API来实现提取图片颜色代码的功能。具体步骤如下：

1) 创建一个Canvas元素，并将图片绘制到Canvas上。

let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
let img = new Image();
img.src = "图片链接";
img.onload = function() {
  canvas.width = img.width;
  canvas.height = img.height;
  ctx.drawImage(img, 0, 0, img.width, img.height);
};

2) 获取Canvas上某个像素的颜色代码。

let pixelData = ctx.getImageData(x, y, 1, 1).data;
let colorCode = "#" + ((1 << 24) + (pixelData[0] << 16) + (pixelData[1] << 8) + pixelData[2]).toString(16).slice(1);

其中x和y表示像素的坐标，pixelData是一个长度为4的数组，分别表示RGBA四个通道的值。将RGB三个通道的值拼接成一个16进制数，并加上前缀“#”就是颜色代码了。

2. 解析CSS提取图片主题色功能

可以使用第三方库color-thief来实现解析CSS提取图片主题色的功能。具体步骤如下：

1) 引入color-thief库。

<script src="//cdn.jsdelivr.net/npm/color-thief@2.3.0/dist/color-thief.min.js"></script>

2) 创建一个Image元素，并将图片加载到Image上。

let img = new Image();
img.src = "图片链接";
img.onload = function() {
  // 图片加载完成后的回调函数
};

3) 使用color-thief库提取图片主题色。

let colorThief = new ColorThief();
let color = colorThief.getColor(img);

colorThief.getColor(img)函数的返回值是一个长度为3的数组，分别表示RGB三个通道的值。将RGB三个通道的值拼接成一个16进制数，并加上前缀“#”就是图片的主题色了。