基本信息
源码名称：js实现简单网页图片处理（滤镜）
源码大小：0.01M
文件格式：.rar
开发语言：js
更新时间：2018-12-20
   友情提示：（无需注册或充值，赞助后即可获取资源下载链接）

     嘿，亲！知识可是无价之宝呢，但咱这精心整理的资料也耗费了不少心血呀。小小地破费一下，绝对物超所值哦！如有下载和支付问题，请联系我们QQ(微信同号)：813200300

本次赞助数额为： 3 元　
   源码介绍
上传图片，可以对图片进行基本操作

原始图片为：


处理后的效果如下： 






<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>PICTURES Combiner</title>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	
</head>
<body>
	<div class="htmleaf-container">
		
		<div class="container">
			<div class="row">
				<div class="col-sm-12">
					<h1>图片简单处理<small>&nbsp&nbsp&nbsp在线简单处理</small></h1>
			      	<hr>
			      	<span class="btn btn-info" onclick="document.getElementById('image-chooser').click();">上传图片</span>
			      	<button class="btn btn-info" onclick="downloadImage()">下载图片</button>
			      	<div class="alert alert-warning" id="error" style="display:none;">
					  <strong>错误!</strong> 你需要先上传图片！！！
					</div>

			      	<hr>
			      	<div class="btn-group" id="filters" style="display:none;">
			      		<h3>滤镜:</h3>
						<button class="btn btn-success" onclick="loadImage(document.getElementById('image-chooser'))">重置</button>
						<button class="btn btn-success" onclick="filter(0)">黑白</button>
						<button class="btn btn-success" onclick="filter(1)">棕褐色效果</button>
						<button class="btn btn-success" onclick="filter(2)">底片效果</button>
						<button class="btn btn-success" onclick="filter(3)">旧照片效果</button>
						<button class="btn btn-success" onclick="filter(4)">负冲效果</button>
						<button class="btn btn-success" onclick="filter(9)">降噪处理</button>
						<button class="btn btn-success" onclick="filter(5)">亮度增加</button>
						<button class="btn btn-success" onclick="filter(6)">亮度减少</button>
						<button class="btn btn-success" onclick="filter(7)">对比度增加</button>
						<button class="btn btn-success" onclick="filter(8)">对比度减少</button>
						<button class="btn btn-success" onclick="filter(11)">蜡笔画效果</button>
						<button class="btn btn-success" onclick="filter(12)">卡通画效果</button>
						<button class="btn btn-success" onclick="filter(13)">装饰图效果</button>
					</div>
				</div>
				<div class="col-sm-12">
					<input type="file" id="image-chooser" style="display:none" onchange="loadImage(this)">
			      	<canvas id="canvas" width="600" height="300" class="well"></canvas>
				</div>
			</div>
		</div>
	
	</div>
  	<script type="text/javascript" src="src/Chobi.min.js"></script>
  	<script type="text/javascript">


		var imgObj = null; //全局对象
		function loadImage(elem){
			//you should probably check if file is image or not before passing it
			imgObj = new Chobi(elem);
			imgObj.ready(function(){//将图片转换为canvas画布并展现出来
				this.canvas = document.getElementById("canvas");//获取画布
				this.loadImageToCanvas();

				//将隐藏的功能展现出来
				document.getElementById("filters").style.display = "block";
			});
		}
		//下载图片
		function downloadImage(){
			if(imgObj == null){
				document.getElementById("error").style.display="block";
				setTimeout(function(){
					document.getElementById("error").style.display="none";
				}, 4000);//在4000毫秒数后调用函数function（）
				return;
			}
			imgObj.download('demo-image');
		}


	
		function filter(id){
			if(imgObj == null){
				alert("请选择一张照片");
				return;
			}
			if(id==0){
				imgObj.blackAndWhite();//黑白效果
			}
			else if(id==1){
				imgObj.sepia();//棕褐色效果
			}
			else if(id==2){
				imgObj.negative();//底片效果
			}
			else if(id==3){
				imgObj.vintage();//旧照片效果
			}
			else if(id==4){
				imgObj.crossProcess();//负冲效果
			}
			else if(id==5){
				imgObj.brightness(1);//亮度增加
			}
			else if(id==6){
				imgObj.brightness(-1);//亮度减少
			}
			else if(id==7){
				imgObj.contrast(1);//对比度增加
			}
			else if(id==8){
				imgObj.contrast(-1);//对比度减少
			}
			else if(id==9){
				imgObj.noise();//降噪处理
			}
			else if(id==11){
				imgObj.crayon();//蜡笔画
			}
			else if(id==12){
				imgObj.cartoon();//卡通画
			}
			else if(id==13){
				imgObj.vignette();//装饰画
			}


			imgObj.loadImageToCanvas();//让图片展示在画布上
		}
	</script>
</body>
</html>