利用js计算图片的主色调和互补色

原创 Dean 工作笔记 二维码阅读
2019-06-30 00:18

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

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

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

一个比较通用也比较简单的办法就是将图片每一个像素点的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通道的值,有兴趣的朋友可以在此基础上实现更完美的主色调和互补色提取。

本文地址:https://www.deanhan.cn/js-main-and-revert-color.html
版权声明:本文为原创文章,版权归 Dean 所有,欢迎分享本文,转载请保留出处!
  • 支付宝二维码 支付宝
  • 微信二维码 微信