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 相关文章推荐
js中自定义方法实现停留几秒sleep
Jul 11 Javascript
AngularJS基础知识笔记之过滤器
May 10 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
Dec 16 Javascript
Uploadify上传文件方法
Mar 16 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
JavaScript数组push方法使用注意事项
Oct 30 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
使用vue完成微信公众号网页小记(推荐)
Apr 28 Javascript
JS浮点数运算结果不精确的Bug解决
Aug 01 Javascript
解决layer 动态加载select 失效的问题
Sep 18 Javascript
Js代码中的span拼接问题解决
Nov 22 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编程效率的方法
2013/11/07 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十二)
2014/06/25 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
PHP中功能强大却很少使用的函数实例小结
2016/11/10 PHP
老生常谈文本文件和二进制文件的区别
2017/02/27 PHP
PHP 数组黑名单/白名单实例代码详解
2019/06/04 PHP
jQuery 锚点跳转滚动条平滑滚动一句话代码
2010/04/30 Javascript
jQuery 源码分析笔记(3) Deferred机制
2011/06/19 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
javascript获取函数名称、函数参数、对象属性名称的代码实例
2014/04/12 Javascript
对new functionName()定义一个函数的理解
2014/05/22 Javascript
js实现简单鼠标跟随效果的方法
2015/04/10 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
解决jQuery使用JSONP时产生的错误
2015/12/02 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
2016/03/24 Javascript
基于bootstrap插件实现autocomplete自动完成表单
2016/05/07 Javascript
jQuery获取及设置表单input各种类型值的方法小结
2016/05/24 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
JS前端笔试题分析
2016/12/19 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
Python Web服务器Tornado使用小结
2014/05/06 Python
Django Admin 实现外键过滤的方法
2017/09/29 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
Python3 元组tuple入门基础
2020/02/09 Python
django ListView的使用 ListView中获取url中的参数值方式
2020/03/27 Python
CSS3属性 line-clamp控制文本行数的使用
2020/03/19 HTML / CSS
美国最大最全的亚洲购物网站:美国亚米网(Yamibuy)
2020/05/05 全球购物
电气工程及其自动化自我评价四篇
2013/09/24 职场文书
仓库理货员岗位职责
2013/12/18 职场文书
保护动物倡议书
2014/04/15 职场文书
大学生精神文明先进个人事迹材料
2014/05/02 职场文书
教师评职称工作总结2015
2015/04/20 职场文书
关于远足的感想
2015/08/10 职场文书
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python