js基于canvas去除图片指定颜色生成透明

六月初六月初 JavaScipt 2023-08-07 16:00:03

图片的处理在开发中经常被使用到，常见的图片处理如：尺寸剪切、质量压缩、水印添加等。

本文介绍在js中如何使用canvas实现去除图片的指定颜色，实现透明格式的图片背景效果。

完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<title>：js基于canvas去除图片指定颜色</title>
	</head>
	<body>
		<img id="img" src='./205549.jpg'>
		<script>
			setTimeout(() => {
				removeImgBg(document.getElementById('img'));
			}, 6000);
			function removeImgBg(img) {
				//背景颜色  红色
				const rgba = [255, 0, 0, 255];
				// 容差大小
				const tolerance = 30;
				var imgData = null;
				const [r0, g0, b0, a0] = rgba;
				var r, g, b, a;
				const canvas = document.createElement('canvas');
				const context = canvas.getContext('2d');
				const w = img.width;
				const h = img.height;
				canvas.width = w;
				canvas.height = h;
				var img2 = new Image();
				img2.crossOrigin = '';
				img2.onload = function() {
					context.drawImage(this, 0, 0);
					imgData = context.getImageData(0, 0, w, h);
					for (let i = 0; i < imgData.data.length; i += 4) {
						r = imgData.data[i];
						g = imgData.data[i + 1];
						b = imgData.data[i + 2];
						a = imgData.data[i + 3];
						const t = Math.sqrt((r - r0) ** 2 + (g - g0) ** 2 + (b - b0) ** 2 + (a - a0) ** 2);
						if (t <= tolerance) {
							imgData.data[i] = 0;
							imgData.data[i + 1] = 0;
							imgData.data[i + 2] = 0;
							imgData.data[i + 3] = 0;
						}
					}
					context.putImageData(imgData, 0, 0);
					const newBase64 = canvas.toDataURL('image/png');
					img.src = newBase64;
				};
				img2.src = img.src;
			}
		</script>
	</body>
</html>

代码中主要配置参数说明：

    去除背景色的处理，配置指定背景色后可以去除指定的背景色换成透明格式。这也就意味着如果你图片的颜色过于复杂不是单一的色彩，那么最终的效果只能说一言难尽。

    容差的处理，容差可以根据实际的需求去设置。

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！