js 实现图片滤镜

最新推荐文章于 2024-07-25 13:59:39 发布

Bai1997_

最新推荐文章于 2024-07-25 13:59:39 发布

阅读量2.3k

点赞数 1

分类专栏： js 文章标签： js 滤镜

本文链接：https://blog.csdn.net/qq_44904804/article/details/99882574

版权

本文介绍如何利用JavaScript为图片应用各种滤镜效果，包括基础的色彩调整、灰度、对比度等，通过示例代码详细解析实现过程。

摘要由CSDN通过智能技术生成

图片滤镜代码

<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">

	</style>
</head>

<body>
	<canvas id="canvasa" width="500" height="500"></canvas>
	<canvas id="canvasb" width="500" height="500"></canvas>
	<select id="select">
		<option>选择滤镜</option>
		<option>去红色</option>
		<option>黑白</option>
		<option>反差</option>
		<option>灰色</option>
		<option>马赛克</option>
		<option>模糊</option>
	</select>
	<button id="btn">切换</button>

</body>
<script type="text/javascript">
	var canvasa = document.getElementById("canvasa")
	var contexta = canvasa.getContext("2d")
	var canvasb = document.getElementById("canvasb")
	var contextb = canvasb.getContext("2d")
	var my_img = new Image()
	my_img.src = "homework_text/thing.jpg"
	my_img.onload = function () {
   
		contexta.drawImage(my_img, 0, 0, canvasa.width, canvasa.height)
	}
	select.onchange = function () {
   
		var val = this.value
		if (val == "去红色") {
   
			btn.onclick = function () {
   
				qu_red()
			}
		}
		if (val == "黑白") {
   
			btn.onclick = function () {
   
				hei_bai()
			}
		}
		if (val == "反差") {
   
			btn.onclick = fun