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 面向对象 重载
May 13 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 Javascript
高效的jquery数字滚动特效
Dec 17 Javascript
JavaScript中Object.prototype.toString方法的原理
Feb 24 Javascript
BootStrap的弹出框(Popover)支持鼠标移到弹出层上弹窗层不隐藏的原因及解决办法
Apr 03 Javascript
AngularJS基础 ng-open 指令简单实例
Aug 02 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
JS解决position:sticky的兼容性问题的方法
Oct 17 Javascript
详解js中Array的方法及技巧
Sep 12 Javascript
JavaScript深入V8引擎以及编写优化代码的5个技巧
Jun 24 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
解决GD中文乱码问题
2007/02/14 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
php实现的微信红包算法分析(非官方)
2015/09/25 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
PHP 实现的将图片转换为TXT
2015/10/21 PHP
非常有用的40款jQuery 插件推荐(系列二)
2011/12/25 Javascript
Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
2012/02/13 Javascript
js确定对象类型方法
2012/03/30 Javascript
js 字符串转换成数字的三种方法
2013/03/23 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
Prototype框架详解
2015/11/25 Javascript
Web前端开发工具——bower依赖包管理工具
2016/03/29 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
2016/06/03 Javascript
jQuery实现边框动态效果的实例代码
2016/09/23 Javascript
JSON 数据详解及实例代码分析
2017/01/20 Javascript
JS实现DOM删除节点操作示例
2018/04/04 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
jquery实现点击左右按钮切换图片
2021/01/27 jQuery
python简单文本处理的方法
2015/07/10 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
django query模块
2019/04/20 Python
浅谈Selenium 控制浏览器的常用方法
2020/12/04 Python
十佳班主任事迹材料
2014/01/18 职场文书
大班亲子运动会方案
2014/06/10 职场文书
师范类求职信
2014/06/21 职场文书
2014年社区国庆节活动方案
2014/09/16 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
安全学习心得体会范文
2016/01/18 职场文书
php 文件上传至OSS及删除远程阿里云OSS文件
2021/07/04 PHP
MySQL 表锁定 LOCK和UNLOCK TABLES的 SQL语法
2022/04/18 MySQL
利用Java连接Hadoop进行编程
2022/06/28 Java/Android