js 图像处理

最新推荐文章于 2023-10-24 20:30:58 发布

chenxuezhou

最新推荐文章于 2023-10-24 20:30:58 发布

阅读量475

点赞数

分类专栏： js 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/u012557298/article/details/128243557

版权

js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

图片处理

jpg像素应该是rpg、channel值，其他图片应该也是这样的，图片存储为图片在读取

<html>
	<head>
		<title>Sample</title>
	</head>
	<body>
		<div><span>R:</span><input type="text" id="R" value="200"></div>
		<div><span>P:</span><input type="text" id="P" value="200"></div>
		<div><span>G:</span><input type="text" id="G" value="200"></div>
		<input type="submit" value="更新" id="refresh">
		<div><canvas id="demo"></canvas></div>
	</body>
	<script src="../../dst/core.js" type="text/javascript"></script>
	<script>
		//画布
		var demo = document.getElementById("demo"),
			canvas = demo.getContext("2d", {
				willReadFrequently: true
			});
		//img标签指定图片
		var img = document.createElement("img");
		img.src = "0.jpg";
		img.setAttribute("crossorigin", "anonymous")
		//首次图片加载
		var imageData;
		img.onload = function() {
			//画布要先drawImage上后才可读取，放在onload可预览
			refresh(200, 200, 200)
		};
		//输入框和按钮事件注册
		var Relement = document.getElementById("R")
		Relement.onkeydown = function(event) {
			keyDown(event, 0)
		}
		var Pelement = document.getElementById("P")
		Pelement.onkeydown = function(event) {
			keyDown(event, 1)
		}
		var Gelement = document.getElementById("G")
		Gelement.onkeydown = function(event) {
			keyDown(event, 2)
		}

		var refreshElement = document.getElementById("refresh")
		refreshElement.onclick = function() {
			console.log(Relement.value, Pelement.value, Gelement.value)
			refresh(Relement.value, Pelement.value, Gelement.value)
		}

		function keyDown(event, index) {
			var e = event || window.event || arguments.callee.caller.arguments[0];
			//只有上下按键触发
			if (e.keyCode == 40) {
				if (index == 0) {
					Relement.value--
				}
				if (index == 1) {
					Pelement.value--
				}
				if (index == 2) {
					Gelement.value--
				}
				console.log(Relement.value, Pelement.value, Gelement.value)
				refresh(Relement.value, Pelement.value, Gelement.value)
			}
			if (e.keyCode == 38) {
				if (index == 0) {
					Relement.value++
				}
				if (index == 1) {
					Pelement.value++
				}
				if (index == 2) {
					Gelement.value++
				}
				console.log(Relement.value, Pelement.value, Gelement.value)
				refresh(Relement.value, Pelement.value, Gelement.value)
			}
		}
		//指定RPG刷新画布
		function refresh(R, P, G) {
			canvas.drawImage(img, 0, 0);
			imageData = canvas.getImageData(0, 0, img.width, img.height)
			for (var i = 0; i < imageData.height; i++) {
				for (var j = 0; j < imageData.width; j++) {
					var px = (i * imageData.width + j) * 4
					if (imageData.data[px + 0] >= R && imageData.data[px + 1] >= P && imageData.data[px + 2] >=
						G) {

					} else {
						imageData.data[px + 0] = imageData.data[px + 1] = imageData.data[px + 2] = 0;
						imageData.data[px + 3] = 255
					}
				}
			}
			canvas.putImageData(imageData, 0, 0);
		}
	</script>
</html>

加载代码，由于img没有onload，所以image.width一直是0

function loadImage1(imageList) {
			var item;
			for (var i = 0; i < imageList.length; i++) {
				item = imageList[i]
				if (i == 12) {
					prefix = 'sys/'
					sw = sys_point.sw
					sh = sys_point.sh
				}
				if (i == 17) {
					prefix = 'time/'
					sw = date.sw
					sh = date.sh
				}
				if (i == 27) {
					prefix = 'time/'
					sw = time.sw
					sh = time.sh
				}
				var image = new Image();
				image.src = prefix + item + suffix
				sw += image.width + (prefix == 'time/' ? 3 : 0)
				image.onload = drawCanvasImage(context, image, sw, sh)
			}
		}