js canvas画布实现高斯模糊效果


Posted in Javascript onNovember 27, 2018

最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果。在实现局部模糊效果前,首先能够实现全部模糊。经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实现了当前的案例:

js canvas画布实现高斯模糊效果

<!doctype html>
<html lang="zh">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>canvas画布的高斯模糊效果</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
 var canvas = document.getElementById('canvas');
 var ctx = canvas.getContext('2d');
 let img = new Image();
 //这里直接修改图片的路径
 img.src = "636753681750720000/Block/preview.jpg";
 img.onload = function () {
 //设置canvas的宽高
 canvas.height = img.height;
 canvas.width = img.width;
 //将图像绘制到canvas上面
 ctx.drawImage(img, 0, 0, img.width, img.height);
 //从画布获取一半图像
 var data = ctx.getImageData(0, 0, img.width/2, img.height);
 //将图像数据进行高斯模糊 data.data是一个数组,每四个值代表一个像素点的rgba的值,data.width data.height 分别代表图像数据的宽高
 var emptyData = gaussBlur(data);
 //将模糊的图像数据再渲染到画布上面
 ctx.putImageData(emptyData, 0, 0);
 };

 function gaussBlur(imgData) {
 var pixes = imgData.data;
 var width = imgData.width;
 var height = imgData.height;
 var gaussMatrix = [],
  gaussSum = 0,
  x, y,
  r, g, b, a,
  i, j, k, len;

 var radius = 10;
 var sigma = 5;

 a = 1 / (Math.sqrt(2 * Math.PI) * sigma);
 b = -1 / (2 * sigma * sigma);
 //生成高斯矩阵
 for (i = 0, x = -radius; x <= radius; x++, i++) {
  g = a * Math.exp(b * x * x);
  gaussMatrix[i] = g;
  gaussSum += g;

 }

 //归一化, 保证高斯矩阵的值在[0,1]之间
 for (i = 0, len = gaussMatrix.length; i < len; i++) {
  gaussMatrix[i] /= gaussSum;
 }
 //x 方向一维高斯运算
 for (y = 0; y < height; y++) {
  for (x = 0; x < width; x++) {
  r = g = b = a = 0;
  gaussSum = 0;
  for (j = -radius; j <= radius; j++) {
   k = x + j;
   if (k >= 0 && k < width) {//确保 k 没超出 x 的范围
   //r,g,b,a 四个一组
   i = (y * width + k) * 4;
   r += pixes[i] * gaussMatrix[j + radius];
   g += pixes[i + 1] * gaussMatrix[j + radius];
   b += pixes[i + 2] * gaussMatrix[j + radius];
   // a += pixes[i + 3] * gaussMatrix[j];
   gaussSum += gaussMatrix[j + radius];
   }
  }
  i = (y * width + x) * 4;
  // 除以 gaussSum 是为了消除处于边缘的像素, 高斯运算不足的问题
  // console.log(gaussSum)
  pixes[i] = r / gaussSum;
  pixes[i + 1] = g / gaussSum;
  pixes[i + 2] = b / gaussSum;
  // pixes[i + 3] = a ;
  }
 }
 //y 方向一维高斯运算
 for (x = 0; x < width; x++) {
  for (y = 0; y < height; y++) {
  r = g = b = a = 0;
  gaussSum = 0;
  for (j = -radius; j <= radius; j++) {
   k = y + j;
   if (k >= 0 && k < height) {//确保 k 没超出 y 的范围
   i = (k * width + x) * 4;
   r += pixes[i] * gaussMatrix[j + radius];
   g += pixes[i + 1] * gaussMatrix[j + radius];
   b += pixes[i + 2] * gaussMatrix[j + radius];
   // a += pixes[i + 3] * gaussMatrix[j];
   gaussSum += gaussMatrix[j + radius];
   }
  }
  i = (y * width + x) * 4;
  pixes[i] = r / gaussSum;
  pixes[i + 1] = g / gaussSum;
  pixes[i + 2] = b / gaussSum;
  }
 }
 return imgData;
 }
</script>
</html>

代码不多,大家直接copy一下,运行好了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
Nov 17 Javascript
JS获取Table中td值的方法
Mar 19 Javascript
JS实现很实用的对联广告代码(可自适应高度)
Sep 18 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
老生常谈javascript中逻辑运算符&amp;&amp;和||的返回值问题
Apr 13 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
p5.js码绘“跳动的小正方形”的实现代码
Oct 22 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 Javascript
video.js 一个页面同时播放多个视频的实例代码
Nov 27 #Javascript
Vue数据双向绑定的深入探究
Nov 27 #Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 #Javascript
微信小程序实现日历功能
Nov 27 #Javascript
微信小程序实现打卡日历功能
Sep 21 #Javascript
微信小程序实现时间预约功能
Nov 27 #Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 #Javascript
You might like
PHP学习笔记 用户注册模块用户类以及验证码类
2011/09/20 PHP
PHP spl_autoload_register实现自动加载研究
2011/12/06 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
网站页面自动跳转实现方法PHP、JSP(下)
2010/08/01 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
JavaScript控制按钮可用或不可用的方法
2015/04/03 Javascript
js表格排序实例分析(支持int,float,date,string四种数据类型)
2015/05/06 Javascript
jquery实现二级导航下拉菜单效果
2015/12/18 Javascript
详解js私有作用域中创建特权方法
2016/01/25 Javascript
详解react关于事件绑定this的四种方式
2018/03/09 Javascript
安装vue-cli的简易过程
2018/05/22 Javascript
node thread.sleep实现示例
2018/06/20 Javascript
浅谈React碰到v-if
2018/11/04 Javascript
es6中比较有用的7个技巧小结
2019/07/12 Javascript
Vue+Node服务器查询Mongo数据库及页面数据传递操作实例分析
2019/12/20 Javascript
Python 自动化表单提交实例代码
2017/06/08 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
Python3.6安装卸载、执行命令、执行py文件的方法详解
2020/02/20 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Python3 ffmpeg视频转换工具使用方法解析
2020/08/10 Python
html5使用canvas画空心圆与实心圆
2014/12/15 HTML / CSS
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
MANGO官方网站:西班牙芒果服装品牌
2017/01/15 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
什么是Linux虚拟文件系统VFS
2012/01/31 面试题
企业法人代表授权委托书
2014/10/02 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
高校自主招生教师推荐信
2015/03/23 职场文书
珍惜时间的诗歌赏析
2019/08/23 职场文书
2019年教师节祝福语精选,给老师送上真诚的祝福
2019/09/09 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android