# autohue.js：让图片和背景融为一体
在现代网页设计中，如何让图片与背景更好地融合是一个常见的需求。autohue.js 是一个强大的工具，它能够自动提取图片的主题色和边缘色，并将其应用到背景中，从而实现图片与背景的无缝融合。
# 一、autohue.js 是什么？
autohue.js 是一个基于 JavaScript 的库，能够自动提取图片的主题色和边缘色，并返回这些颜色的十六进制值。这些颜色可以用于设置背景颜色、渐变效果或其他样式，从而让图片与页面设计更好地融合
# 二、autohue.js 的核心功能
# 1. 自动提取主题色和边缘色
autohue.js 通过分析图片的像素数据，提取出图片的主要颜色（主题色）和边缘颜色（上下左右四边的颜色）。这些颜色可以通过聚类算法计算得出，确保提取的颜色能够代表图片的整体风格。
# 2. 支持多种配置选项
autohue.js 提供了丰富的配置选项，包括：
maxSize：图片的最大采样尺寸，用于降采样处理。较小的尺寸可以加快处理速度，但可能影响颜色提取的准确性。threshold：颜色聚类的阈值，用于控制颜色的合并程度。阈值越大，提取的颜色越少；阈值越小，提取的颜色越多。
# 3. 返回结果
autohue.js 的返回结果包括：
primaryColor：图片的主要颜色。secondaryColor：图片的次要颜色。backgroundColor：图片边缘的颜色，包括上、下、左、右四个方向。
# 三、autohue.js 的实现原理
# 1. 图片加载与降采样
在处理图片之前，autohue.js 首先加载图片并进行降采样处理。如果图片尺寸超过 maxSize，会按比例缩小，以加快处理速度。
function loadImage(imageSource) {
return new Promise((resolve, reject) => {
let img;
if (typeof imageSource === 'string') {
img = new Image();
img.crossOrigin = 'Anonymous';
img.src = imageSource;
} else {
img = imageSource;
}
if (img.complete) {
resolve(img);
} else {
img.onload = () => resolve(img);
img.onerror = (err) => reject(err);
}
});
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# 2. 聚类算法
autohue.js 使用聚类算法对图片的像素进行分析，提取出主题色和边缘色。聚类算法基于 Lab 颜色空间的距离，将相似的颜色归为同一簇。
function clusterPixelsByCondition(imageData, condition, threshold) {
const clusters = [];
const data = imageData.data;
const width = imageData.width;
const height = imageData.height;
for (let y = 0; y < height; y++) {
for (let x = 0; x < width; x++) {
if (!condition(x, y)) continue;
const index = (y * width + x) * 4;
const r = data[index];
const g = data[index + 1];
const b = data[index + 2];
const lab = rgbToLab(r, g, b);
let added = false;
for (const cluster of clusters) {
const d = labDistance(lab, cluster.averageLab);
if (d < threshold) {
cluster.count++;
cluster.sumRgb[0] += r;
cluster.sumRgb[1] += g;
cluster.sumRgb[2] += b;
cluster.averageRgb = [
cluster.sumRgb[0] / cluster.count,
cluster.sumRgb[1] / cluster.count,
cluster.sumRgb[2] / cluster.count
];
added = true;
break;
}
}
if (!added) {
clusters.push({
count: 1,
sumRgb: [r, g, b],
averageRgb: [r, g, b],
averageLab: lab
});
}
}
}
return clusters;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
# 3. 提取边缘颜色
autohue.js 还可以单独提取图片边缘的颜色，用于背景渐变效果。
const topClusters = clusterPixelsByCondition(imageData, (_x, y) => y < margin, threshold.top);
const topColor = topClusters.length > 0 ? rgbToHex(topClusters[0].averageRgb) : primaryColor;
1
2
2
# 四、如何使用 autohue.js
# 1. 安装
通过 npm 安装 autohue.js：
pnpm i autohue.js
1
# 2. 使用示例
import autohue from 'autohue.js';
autohue(url, {
threshold: {
primary: 10, // 主颜色阈值
left: 1, // 左边颜色阈值
bottom: 12 // 底部颜色阈值
},
maxSize: 50 // 最大采样尺寸
}).then((result) => {
console.log(`%c${result.primaryColor}`, 'color: #fff; background: ' + result.primaryColor, 'main');
console.log(`%c${result.secondaryColor}`, 'color: #fff; background: ' + result.secondaryColor, 'sub');
console.log(`%c${result.backgroundColor.left}`, 'color: #fff; background: ' + result.backgroundColor.left, 'bg-left');
console.log(`%c${result.backgroundColor.right}`, 'color: #fff; background: ' + result.backgroundColor.right, 'bg-right');
}).catch((err) => console.error(err));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# 五、autohue.js 的应用场景
# 1. 动态背景颜色
根据图片的主题色动态设置背景颜色，使页面整体风格更加协调。
# 2. 渐变背景
使用图片的边缘颜色生成渐变背景，增强视觉效果。
# 3. 自定义样式
结合主题色和边缘色，为页面元素添加自定义样式，提升用户体验。