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 相关文章推荐
用js实现随机返回数组的一个元素
Aug 13 Javascript
浅谈Javascript面向对象编程
Nov 15 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
精心挑选的15款优秀jQuery 本特效插件和教程
Aug 06 Javascript
如何让div span等元素能响应键盘事件操作指南
Nov 13 Javascript
javascript按位非运算符的使用方法
Nov 14 Javascript
谈谈javascript中使用连等赋值操作带来的问题
Nov 26 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
微信浏览器左上角返回按钮监听的实现
Mar 04 Javascript
微信小程序调用wx.getImageInfo遇到的坑解决
May 31 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 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
Linux下进行MYSQL编程时插入中文乱码的解决方案
2007/03/15 PHP
PHP实现的连贯操作、链式操作实例
2014/07/08 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
laravel-admin 实现给grid的列添加行数序号的方法
2019/10/08 PHP
用javascript获取textarea中的光标位置
2008/05/06 Javascript
正则表达式判断是否存在中文和全角字符和判断包含中文字符串长度
2008/09/27 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
jQuery实现6位数字密码输入框
2016/12/29 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
webpack 2的react开发配置实例代码
2017/07/28 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
浅谈bootstrap layer.open中end的使用方法
2019/09/12 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
js最全的数组的降维5种办法(小结)
2020/04/28 Javascript
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python爬取网易云音乐热门评论
2017/03/31 Python
python表格存取的方法
2018/03/07 Python
numpy中实现ndarray数组返回符合特定条件的索引方法
2018/04/17 Python
python检索特定内容的文本文件实例
2018/06/05 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
通过Python pyecharts输出保存图片代码实例
2020/11/25 Python
CSS3制作炫酷带方向感应的鼠标滑过图片3D动画
2016/03/16 HTML / CSS
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
输入一行文字,找出其中大写字母、小写字母、空格、数字、及其他字符各有多少
2016/04/15 面试题
骨干教师培训制度
2014/01/13 职场文书
小学教研工作制度
2014/01/15 职场文书
《长城》教学反思
2014/02/14 职场文书
护理专业学生职业生涯规划范文
2014/03/11 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
汽车服务工程专业自荐信
2014/09/02 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
浅谈golang 中time.After释放的问题
2021/05/05 Golang