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代码
Mar 11 Javascript
JavaScript国旗变换效果代码
Aug 13 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
vue组件 $children,$refs,$parent的使用详解
Jul 31 Javascript
JS中使用media实现响应式布局
Aug 04 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
Nov 02 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
Jun 17 Javascript
浅析JavaScript中的变量提升
Jun 01 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
使用swoole扩展php websocket示例
2014/02/13 PHP
PHP清除数组中所有字符串两端空格的方法
2014/10/20 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
PHP SPL 被遗落的宝石【SPL应用浅析】
2018/04/20 PHP
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
面向对象的Javascript之二(接口实现介绍)
2012/01/27 Javascript
javascript算法题 求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2012/07/21 Javascript
jQuery编辑器KindEditor4.1.4代码高亮显示设置教程
2013/03/01 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
js控制当再次点击按钮时的间隔时间
2014/06/03 Javascript
JavaScript基础篇(3)之Object、Function等引用类型
2015/11/30 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
jQuery中ajax错误调试分析
2016/12/01 Javascript
React Router基础使用
2017/01/17 Javascript
浅谈Vue SSR 的 Cookies 问题
2017/11/20 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
JavaScript引用类型Array实例分析
2018/07/24 Javascript
JS控制只能输入数字并且最多允许小数点两位
2019/11/24 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
JavaScript 事件代理需要注意的地方
2020/09/08 Javascript
vue实现简单加法计算器
2020/10/22 Javascript
解决removeEventListener 无法清除监听的问题
2020/10/30 Javascript
如何在Vue项目中添加接口监听遮罩
2021/01/25 Vue.js
深入解析Python中的descriptor描述器的作用及用法
2016/06/27 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
django项目运行因中文而乱码报错的几种情况解决
2017/11/07 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Django实现简单网页弹出警告代码
2019/11/15 Python
python实现logistic分类算法代码
2020/02/28 Python
Python判断字符串是否为合法标示符操作
2020/09/03 Python
见习期自我鉴定范文
2014/03/19 职场文书
作风转变心得体会
2014/09/02 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
Python使用random模块实现掷骰子游戏的示例代码
2021/04/29 Python