上传图片，可以对图片进行基本操作
原始图片为：
处理后的效果如下：
<!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>   在线简单处理</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 itimgObj = 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>
评论