JavaScript实现图像模糊化的方法实例


Posted in Javascript onJanuary 15, 2017

前言

众所周知一幅完整的图像,是由红色、绿色、蓝色三个通道组成的。红色、绿色、蓝色三个通道的缩览图都是以灰度显示的。用不同的灰度色阶来表示" 红,绿,蓝"在图像中的比重。通道中的纯白,代表了该色光在此处为最高亮度,亮度级别是255。

模糊化方法:

就是将一个像素点的R(G,B)和它周围像素点的R(G,B)取出,然后取平均值再赋给这个像素点的R(G,B);这样就完成模糊化了;

例:

       1        2        3

       4        5        6

       7        8        9

       比如这个像素点5,把5像素点和周围的8个像素点(1,2,3,4,6,7,8,9)的R(G,B)取出,取这9个点的平均值然后赋给5像素点

       R(5) = (R1+R2+R3+R4+R5+R6+R7+R8+R9)/9;

       G(5) = (G1+G2+G3+G4+G5+G6+G7+G8+G9)/9;

       B(5) = (B1+B2+B3+B4+B5+B6+B7+B8+B9)/9;

效果图:

JavaScript实现图像模糊化的方法实例

实例代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ImgBase</title>
		<style type="text/css">
			.scream{
				width:400px;
				height:300px;
				position: absolute;
				top:60px;
				border: 1px solid;
			}
			#canvas{
				position: absolute;
				top:60px;
				left:500px;
				border: 1px dashed;
			}
		</style>
	</head>
	<body>
		<input type="file" onchange="loadImg()"/>
		<input type="button" value="模糊化" onclick="Fuzzy()"/>
		<br/><br/>
		<div class="scream">
			<img id="scream" width="400px" height="300px" alt="Image preview...">
		</div>
		<canvas id="canvas" width="400px;" height="300px;">
			your browser does not support canvas!
		</canvas>
		
		<script>
			function Fuzzy(){
				var c=document.getElementById("canvas");
			 var ctx=c.getContext("2d");
			 var imgData=ctx.getImageData(0,0,c.width,c.height);
			 var img_w = imgData.width;
			 var img_h = imgData.height;
			 
			 for(var w=1;w<(img_w-1);w++){
			 	for(var h=1;h<(img_h-1);h++){
			 		//起始点
			 		var i = (w+img_w*h)*4;
			 		var R = imgData.data[i-1604]+imgData.data[i-1600]+imgData.data[i-1596]+imgData.data[i-4]+imgData.data[i]
			 		+imgData.data[i+4]+imgData.data[i+1596]+imgData.data[i+1600]+imgData.data[i+1604];	//R(0-255)
				 	var G = imgData.data[i-1603]+imgData.data[i-1599]+imgData.data[i-1595]+imgData.data[i-3]+imgData.data[i+1]
			 		+imgData.data[i+5]+imgData.data[i+1597]+imgData.data[i+1601]+imgData.data[i+1605];	//G(0-255)
				 	var B = imgData.data[i-1602]+imgData.data[i-1598]+imgData.data[i-1594]+imgData.data[i-2]+imgData.data[i+2]
			 		+imgData.data[i+6]+imgData.data[i+1598]+imgData.data[i+1602]+imgData.data[i+1606];;	//G(0-255)
				 	var Alpha = imgData.data[i+3];	//Alpha(0-255)
		 	
				 	imgData.data[i] = R/9;
				  imgData.data[i+1] = G/9;	
				  imgData.data[i+2] = B/9;	
				  imgData.data[i+3] = Alpha;	
			 	}
			 }
			 ctx.putImageData(imgData,0,0);
			}
		</script>
		<script>
			//canvas图像的宽高 
			var c_w = 400; var c_h = 300;
			//加载img图像
			function loadImg(){
				var img = document.getElementById("scream");
				var file = document.querySelector('input[type=file]').files[0];
				if(!/image\/\w+/.test(file.type)){
			  alert("文件必须为图片!");
			  return false;
			 }
				var reader = new FileReader();
				reader.addEventListener("load", function () {
				 img.src = reader.result;
				}, false);
				
				if(file) {
					reader.readAsDataURL(file);
					loadCanvas();
				}
			}
			//加载canvas图像
			function loadCanvas(){
				var c=document.getElementById("canvas");
				var ctx=c.getContext("2d");
				
				var img = document.getElementById("scream");
				img.onload = function() {
					ctx.drawImage(img,0,0,c_w,c_h);
				} 
			}
		</script>
	</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
Jquery中增加参数与Json转换代码
Nov 20 Javascript
JavaScript实现的简单幂函数实例
Apr 17 Javascript
Bootstrap富文本组件wysiwyg数据保存到mysql的方法
May 09 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
简单封装js的dom查询实例代码
Jul 08 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
JS中的事件委托实例浅析
Mar 22 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
vue实现简单实时汇率计算功能
Jan 15 #Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 #Javascript
JS轮播图中缓动函数的封装
Nov 25 #Javascript
JavaScript字符串对象
Jan 14 #Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 #Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 #Javascript
jQuery实现select模糊查询(反射机制)
Jan 14 #Javascript
You might like
php.ini修改php上传文件大小限制的方法详解
2013/06/17 PHP
destoon安全设置中需要设置可写权限的目录及文件
2014/06/21 PHP
linux中cd命令使用详解
2015/01/08 PHP
JS子父窗口互相操作取值赋值的方法介绍
2013/05/11 Javascript
JavaScript设计模式之观察者模式(发布者-订阅者模式)
2014/09/24 Javascript
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
浅谈如何实现easyui的datebox格式化
2016/06/12 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
详解微信小程序设置底部导航栏目方法
2017/06/29 Javascript
详解从零搭建 vue2 vue-router2 webpack3 工程
2017/11/22 Javascript
vue: WebStorm设置快速编译运行的方法
2018/10/18 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
js实现滑动进度条效果
2020/08/21 Javascript
js中延迟加载和预加载的具体使用
2021/01/14 Javascript
django2笔记之路由path语法的实现
2019/07/17 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
html5画布旋转效果示例
2014/01/27 HTML / CSS
美国领先的礼品卡网站:GiftCards.com
2016/11/02 全球购物
美国一家全面的在线零售鞋类公司:SHOEBACCA
2017/01/06 全球购物
英国第一豪华护肤品牌:Elemis
2017/10/12 全球购物
什么是smarty? Smarty的优点是什么?
2013/08/11 面试题
大学生毕业自荐信
2013/10/10 职场文书
护理专业个人求职简历的自我评价
2013/10/13 职场文书
英语系毕业生自荐信
2013/10/31 职场文书
教师应聘个人求职信
2013/12/10 职场文书
致标枪运动员广播稿
2014/02/06 职场文书
教师师德考核自我评价
2014/09/13 职场文书
房产公证书样本
2015/01/23 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
二年级数学教学反思
2016/02/16 职场文书