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 相关文章推荐
google地图的路线实现代码
Aug 20 Javascript
IE8下关于querySelectorAll()的问题
May 13 Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 Javascript
javascript抖动元素的小例子
Oct 28 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
jquery+css3实现会动的小圆圈效果
Jan 27 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
Feb 18 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
JS如何设置元素样式的方法示例
Aug 28 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
vue自动化表单实例分析
May 06 Javascript
解决Layui数据表格的宽高问题
Sep 28 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下MAIL的另一解决方案
2006/10/09 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
功能齐全的PHP发送邮件类代码附详细说明
2008/07/10 PHP
快速开发一个PHP扩展图文教程
2008/12/12 PHP
php+mysqli事务控制实现银行转账实例
2015/01/29 PHP
Yii2中DropDownList简单用法示例
2016/07/18 PHP
php获取指定数量随机字符串的方法
2017/02/06 PHP
php如何把表单内容提交到数据库
2019/07/08 PHP
Laravel获取当前请求的控制器和方法以及中间件的例子
2019/10/11 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
JavaScript入门教程(12) js对象化编程
2009/01/31 Javascript
常用一些Javascript判断函数
2012/08/14 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
JS闭包用法实例分析
2017/03/27 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
Vue实现远程获取路由与页面刷新导致404错误的解决
2019/01/31 Javascript
详解react组件通讯方式(多种)
2020/05/06 Javascript
pyqt4教程之widget使用示例分享
2014/03/07 Python
python中私有函数调用方法解密
2016/04/29 Python
详解使用python的logging模块在stdout输出的两种方法
2017/05/17 Python
Django 多表关联 存储 使用方法详解 ManyToManyField save
2019/08/09 Python
python绘制BA无标度网络示例代码
2019/11/21 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
python中upper是做什么用的
2020/07/20 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
Python高阶函数与装饰器函数的深入讲解
2020/11/10 Python
比利时家具购买网站:Home24
2019/01/03 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
建设幸福中国演讲稿
2014/09/11 职场文书
先进个人总结范文
2015/02/15 职场文书
班主任寄语2015
2015/02/26 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
「租借女友」第2季樱泽墨角色PV&新视觉图公开
2022/03/21 日漫