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 相关文章推荐
出现“不能执行已释放的Script代码”错误的原因及解决办法
Aug 29 Javascript
JS 控制CSS样式表
Aug 20 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
requireJS使用指南
Apr 27 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
vue devtools的安装与使用教程
Aug 08 Javascript
Vue面试题及Vue知识点整理
Oct 07 Javascript
在Vue项目中使用snapshot测试的具体使用
Apr 16 Javascript
使用vue判断当前环境是安卓还是IOS
Apr 12 Vue.js
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自动加载的两种实现方法
2010/06/21 PHP
PHP求最大子序列和的算法实现
2011/06/24 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
删除PHP数组中的重复元素的实现代码
2017/04/10 PHP
PHP 传输会话curl函数的实例详解
2017/09/12 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
Json对象替换字符串占位符实现代码
2010/11/17 Javascript
Prototype源码浅析 Enumerable部分(二)
2012/01/18 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
JS实现跟随鼠标的链接文字提示框效果
2015/08/06 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
将json转换成struts参数的方法
2016/11/08 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
jquery代码规范让代码越来越好看
2017/02/03 Javascript
使用Nodejs连接mongodb数据库的实现代码
2017/08/21 NodeJs
javascript使用正则实现去掉字符串前面的所有0
2018/07/23 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
Vue如何基于es6导入外部js文件
2020/05/15 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
python中__slots__用法实例
2015/06/04 Python
python实现字符串连接的三种方法及其效率、适用场景详解
2017/01/13 Python
Python+matplotlib实现华丽的文本框演示代码
2018/01/22 Python
Django  ORM 练习题及答案
2019/07/19 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
怎么写好自荐书
2014/03/02 职场文书
创先争优宣传标语
2014/10/08 职场文书
2015员工年度考核评语
2015/03/25 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
先进教师个人主要事迹材料
2015/11/03 职场文书
2016年小学“感恩教师”主题队日活动总结
2016/04/01 职场文书
《围炉夜话》110句人生箴言,精辟有内涵,引人深思
2019/10/23 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server