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读取两种结构的xml的代码
Nov 05 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
javascript实现获取指定精度的上传文件的大小简单实例
Oct 25 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
全面解析jQuery中的$(window)与$(document)的用法区别
Aug 15 jQuery
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
vue实现的封装全局filter并统一管理操作示例
Feb 02 Javascript
javascript设计模式 ? 桥接模式原理与应用实例分析
Apr 13 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中\r \r\n \t的区别示例介绍
2014/02/08 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
Laravel 5使用Laravel Excel实现Excel/CSV文件导入导出的功能详解
2017/10/11 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
2010/04/02 Javascript
IE6下CSS图片缓存问题解决方法
2010/12/09 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
javascript判断chrome浏览器的方法
2014/03/26 Javascript
JS中判断null、undefined与NaN的方法
2014/03/26 Javascript
JavaScript模板引擎用法实例
2015/07/10 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
jQuery模拟下拉框选择对应菜单的内容
2017/03/07 Javascript
详解在vue-cli项目中安装node-sass
2017/06/21 Javascript
JS实现的走迷宫小游戏完整实例
2017/07/19 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
nodejs(officegen)+vue(axios)在客户端导出word文档的方法
2018/07/31 NodeJs
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
前后端常见的几种鉴权方式(小结)
2019/08/04 Javascript
[01:09]模型精美,特效酷炫!TI9不朽宝藏Ⅰ鉴赏
2019/05/10 DOTA
python操作ssh实现服务器日志下载的方法
2015/06/03 Python
python实现感知器
2017/12/19 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python selenium的基本使用方法分析
2019/12/21 Python
pyinstaller 3.6版本通过pip安装失败的解决办法(推荐)
2020/01/18 Python
工商学院毕业生个人自我评价
2013/09/19 职场文书
学校门卫岗位职责
2014/03/16 职场文书
平安建设实施方案
2014/03/19 职场文书
党员干部学习心得体会
2016/01/23 职场文书
教你利用python实现企业微信发送消息
2021/05/23 Python
MySQL索引 高效获取数据的数据结构
2022/05/02 MySQL