【无标题】canva做出一个按钮实现的图片滤镜效果，过于简单就不写注释了

最新推荐文章于 2024-10-18 11:12:30 发布

ACBYCL

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量137

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/ACBYCL/article/details/124760090

版权

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title></title>
</head>

<body>
	<canvas id="canvas" width=410 height=400 style="border: 1px solid blue;margin:0 auto;display:block"></canvas>
	<br>
	<div style="text-align: center;">
		<button id="red" onclick="changered()">点我变红</button>
		<button id="red" onclick="changegray()">点我变灰</button>
		<button id="red" onclick="light()">点我变亮</button>
		<button id="red" onclick="black()">点我暗</button>
		<button id="red" onclick="old()">点我变复古</button>
		<button id="red" onclick="deepred()">点我变暗红</button>
		<button id="red" onclick="deepgreen()">点我变深绿</button>
		<button id="red" onclick="deepblue()">点我变深蓝色</button>
	</div>
</body>
<script>
	function $$(id) {
		return document.getElementById(id)
	}
	var canvas = $$('canvas')
	var cxt = canvas.getContext('2d')
	var img = new Image();
	img.src = "./princess.png"

	img.onload = function () {

		cxt.drawImage(img, 10, 10);
	}
	function changered() {
		var imgdata = cxt.getImageData(10, 10, 120, 120);
		var data = imgdata.data
		for (var i = 0; i < data.length; i += 4) {
			data[i + 0] = 255 - data[i + 0]
			data[i + 1] = 255 - data[i + 1]
			data[i + 2] = 255 - data[i + 2]
		}
		cxt.putImageData(imgdata, 140, 10);

	}
	function changegray() {
		imgdata = cxt.getImageData(10, 10, 120, 120);
		data = imgdata.data
		for (var i = 0; i < data.length; i += 4) {
			var avg = data[i + 0] * 0.3 + data[i + 1] * 0.6 + data[i + 2] * 0.1
			data[i + 0] = avg
			data[i + 1] = avg
			data[i + 2] = avg
		}
		cxt.putImageData(imgdata, 270, 10);
	}

	function light() {
		imgdata = cxt.getImageData(10, 10, 120, 120);
		data = imgdata.data
		for (var i = 0; i < data.length; i += 4) {
			var a = 50
			data[i + 0] += a
			data[i + 1] += a
			data[i + 2] += a
		}
		cxt.putImageData(imgdata, 10, 140);
	}

	function black() {
		var imgdata = cxt.getImageData(10, 10, 120, 120);
		var data = imgdata.data
		for (var i = 0; i < data.length; i += 4) {
			var a = -100
			data[i + 0] += a
			data[i + 1] += a
			data[i + 2] += a
		}
		cxt.putImageData(imgdata, 140, 140);
	}
	function old() {
		imgdata = cxt.getImageData(10, 10, 120, 120);
		data = imgdata.data
		for (var i = 0; i < data.length; i += 4) {
			r = data[i + 0]
			g = data[i + 1]
			b = data[i + 2]
			data[i + 0] = r * 0.39 + g * 0.76 + b * 0.18
			data[i + 1] = r * 0.35 + g * 0.68 + b * 0.16
			data[i + 2] = r * 0.27 + g * 0.53 + b * 0.13
		}
		cxt.putImageData(imgdata, 270, 140);

	}
	function deepred() {
		imgdata = cxt.getImageData(10, 10, 120, 120);
		data = imgdata.data
		for (var i = 0; i < data.length; i += 4) {
			r = data[i + 0]
			g = data[i + 1]
			b = data[i + 2]
			var avg = (r + g + b) / 3
			data[i + 0] = avg
			data[i + 1] = 0
			data[i + 2] = 0
		}
		cxt.putImageData(imgdata, 10, 270);
	}
	function deepgreen() {
		imgdata = cxt.getImageData(10, 10, 120, 120);
		data = imgdata.data
		for (var i = 0; i < data.length; i += 4) {
			r = data[i + 0]
			g = data[i + 1]
			b = data[i + 2]
			var avg = (r + g + b) / 3
			data[i + 0] = 0
			data[i + 1] = avg
			data[i + 2] = 0
		}
		cxt.putImageData(imgdata, 140, 270);
	}
	function deepblue() {
		imgdata = cxt.getImageData(10, 10, 120, 120);
		data = imgdata.data
		for (var i = 0; i < data.length; i += 4) {
			r = data[i + 0]
			g = data[i + 1]
			b = data[i + 2]
			var avg = (r + g + b) / 3
			data[i + 0] = 0
			data[i + 1] = 0
			data[i + 2] = avg
		}
		cxt.putImageData(imgdata, 270, 270);
	}

</script>

</html>

图片素材