利用js计算图片的主色调和互补色 -逐梦个人博客

在很多时候，我们在渲染一张图片的同时，可能还需要渲染一些文字上去，如果我们定死文字的颜色，如果换了一张和文字颜色相近的图片，就会出现重色导致文字看不清楚，类似下面这样：

如果要规避这个问题，文字的颜色我们需要根据图片的主色调来取互补色，所以本文的重点就是如何计算图片的主色调和互补色。

既然是互补色，那么它肯定是依赖另一个颜色而存在，在这里就是主色调，所以我们先来介绍主色调的计算，怎么计算主色调呢？

一个比较通用也比较简单的办法就是将图片每一个像素点的r，g，b通道的值分别累加，然后分别用累加的r，g，b的值除以图片总像素点的个数，分别得到一个平均的r，g，b值并作为图片主色调的rgb值，下面是代码：

const img = new Image();
img.onload = function() {
	const { width, height } = img;
	const scaleRect = width * height;
	let sum_r = 0, sum_g = 0, sum_b = 0;
	canvas.width = width;
	canvas.height = height;
	ctx.drawImage(img, 0, 0);
	const imgData = ctx.getImageData(0,0, canvas.width, canvas.height);
	for (let i=0; i<imgData.data.length; i+=4) {
		const r = imgData.data[i];
		const g = imgData.data[i+1];
		const b = imgData.data[i+2];
		sum_r += r;
		sum_g += g;
		sum_b += b;
	}
	const avg_r = Math.round(sum_r / scaleRect);
	const avg_g = Math.round(sum_g / scaleRect);
	const avg_b = Math.round(sum_b / scaleRect);

	// 主色调
	const mainColor = `rgb(${avg_r}, ${avg_g}, ${avg_b})`;
}
img.src = 'xx.png';

通过上面的代码我们就得到了图片的主色调，接下来我们接着计算互补色，互补色的计算其实更简单，就是用255分别减去主色调的r，g，b的值分别得到一个新的r，g，b的值作为互补色调，下面是代码：

function getRevertColor(r, g, b) {
	return {
		r: 255 - r,
		g: 255 - g,
		b: 255 - b
	};
}

你可以猛戳这里查看在线demo。

当然这种方法其实还是有缺陷的，因为这里计算主色调的时候并没有考虑alpha通道的值，有兴趣的朋友可以在此基础上实现更完美的主色调和互补色提取。