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 相关文章推荐
JavaScript的parseInt 进制问题
May 07 Javascript
javascript继承之为什么要继承
Nov 10 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
JavaScript常用验证函数实例汇总
Nov 25 Javascript
用jQuery向div中添加Html文本内容的简单实现
Jul 13 Javascript
BootStrap按钮标签及基本样式
Nov 23 Javascript
完美解决spring websocket自动断开连接再创建引发的问题
Mar 02 Javascript
JavaScript实现仿Clock ISO时钟
Jun 29 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
js取0-9随机取4个数不重复的数字代码实例
Mar 27 Javascript
vue 中几种传值方法(3种)
Nov 12 Javascript
JS前端基于canvas给图片添加水印
Nov 11 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
php页面跳转session cookie丢失导致不能登录等问题的解决方法
2016/12/12 PHP
基于php实现的验证码小程序
2016/12/13 PHP
用javascript实现读取txt文档的脚本
2007/07/20 Javascript
IE8 中使用加速器(Activities)
2010/05/14 Javascript
javascript 闭包疑问
2010/12/30 Javascript
js 单击式的下拉菜单效果实例
2013/08/13 Javascript
Js保留小数点的4种效果实现代码分享
2014/04/12 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
Bootstrap模态窗口源码解析
2017/02/08 Javascript
简单实现AngularJS轮播图效果
2020/04/10 Javascript
nodejs个人博客开发第一步 准备工作
2017/04/12 NodeJs
Vue实现typeahead组件功能(非常靠谱)
2017/08/26 Javascript
vue组件watch属性实例讲解
2017/11/07 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
2017/12/22 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
2018/02/09 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
JavaScript中this用法学习笔记
2019/03/17 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
vue+flask实现视频合成功能(拖拽上传)
2021/03/04 Vue.js
[05:20]卡尔工作室_DOTA2新手教学_DOTA2超强新手功能
2013/04/22 DOTA
Python 制作糗事百科爬虫实例
2016/09/22 Python
python实现简单flappy bird
2018/12/24 Python
python的pstuil模块使用方法总结
2019/07/26 Python
通过自学python能找到工作吗
2020/06/21 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
python 检测图片是否有马赛克
2020/12/01 Python
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
生日答谢词
2015/01/05 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang