js获取图片像素颜色，修改图片像素颜色_js替换图片中某个像素颜色-优快云博客

本文通过JavaScript展示了如何获取图片的像素颜色，并详细解释了如何修改这些颜色。直接提供了一个代码示例，帮助读者理解并实现相关功能。

直接上代码示例

<!DOCTYPE HTML PUBLIC>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取图片像素颜色，修改图片像素颜色</title>

		<style type="text/css">
			body {
				margin: 0px;
				background: #f2f2f0;
			}

			#img-box {
				position: absolute;
			}
		</style>

		<script type="text/javascript">
			window.onload = function() {
				var myCanvas = document.getElementById('my-canvas');
				var myContext = myCanvas.getContext('2d');
				var canvas = document.createElement('canvas');
				var context = canvas.getContext('2d');
				var imgBox = document.getElementById('img-box');
				var x = 0,
					y = 0;
				var img_width = 0,
					img_height = 0;
				var myColor = []
				imgBox.addEventListener('click', function(ev) {
					x = ev.pageX;
					y = ev.pageY - imgBox.offsetTop;
					getColor()
					setColor()
				})

				function setColor() {
					const rgb = [236, 42, 140]
					let color = []
					const imageData = context.getImageData(0, 0, img_width, img_height);
					const length = imageData.data.length;
					for (let i = 0; i < length; i += 4) {
						color.push(imageData.data[i], imageData.data[i + 1], imageData.data[i + 2])
						if (color.join(',') == myColor.join(',')) {
							for (var j = 0; j < rgb.length; j++) {
								imageData.data[i - (rgb.length + 1 - j)] = rgb[j]
							}
						}
						if (i > 0 && i % 4 === 0) { // 每四个元素为一个像素数据 r,g,b,alpha
							color = []
						}
					}
					myContext.putImageData(imageData, 0, 0)
				}

				function getColor() {
					var imageData = context.getImageData(x, y, img_width, img_height);
					myColor = [imageData.data[0], imageData.data[1], imageData.data[2]]
					var hexColor = gethex(...myColor)
					console.log(hexColor)
				}
				// 获取16进制颜色
				function gethex(r, g, b) {
					console.log(r, g, b)
					r = r.toString(16);
					g = g.toString(16);
					b = b.toString(16);

					// 补0 
					r.length == 1 ? r = '0' + r : '';
					g.length == 1 ? g = '0' + g : '';
					b.length == 1 ? b = '0' + b : '';

					var hex = r + g + b;

					// 简化处理,如 FFEEDD 可以写为 FED 
					if (r.slice(0, 1) == r.slice(1, 1) && g.slice(0, 1) == g.slice(1, 1) && b.slice(0, 1) == b.slice(1, 1)) {
						hex = r.slice(0, 1) + g.slice(0, 1) + b.slice(0, 1);
					}

					return hex;
				}
				document.getElementById('img').onchange = function() {
					var img = event.target.files[0];
					// 检查能否读取图片 
					if (!img) {
						return;
					}

					// 检查图片类型 
					if (!(img.type.indexOf('image') == 0 && img.type && /\.(?:jpg|png|gif|jpeg)$/.test(img.name))) {
						alert('图片只能是jpg,gif,png');
						return;
					}
					// 检查图片尺寸 
					// if (img.size > 120*1024) { 
					//   alert('图片不能大于120K'); 
					//   return ; 
					// }
					var reader = new FileReader();
					reader.readAsDataURL(img);

					reader.onload = function(e) {
						var image = new Image();
						image.src = e.target.result;
						imgBox.appendChild(image)
						image.onload = function() {
							img_width = this.width;
							img_height = this.height;

							// 设置画布尺寸 
							canvas.width = img_width;
							canvas.height = img_height;

							// 将图片按像素写入画布 
							context.drawImage(this, 0, 0, img_width, img_height);
						}
					}
				}
			}
		</script>
	</head>
	<body>
		<input type="file" class="file" id="img">
		<div id="img-box"></div>
		<canvas id="my-canvas" width="1200" height="1200" style="position: absolute; left: 1200px;"></canvas>
	</body>
</html>