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 相关文章推荐
根据分辨率不同,调用不同的css文件
Jul 07 Javascript
jQuery .tmpl(), .template()学习资料小结
Jul 18 Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 Javascript
javascript制作的cookie封装及使用指南
Jan 02 Javascript
jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
Dec 31 Javascript
Ajax高级笔记 JavaScript高级程序设计笔记
Jun 22 Javascript
javaScript和jQuery自动加载简单代码实现方法
Nov 24 jQuery
工作中常用到的ES6语法
Sep 04 Javascript
vue element动态渲染、移除表单并添加验证的实现
Jan 16 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
vant组件中 dialog的确认按钮的回调事件操作
Nov 04 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 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
全国FM电台频率大全 - 1 北京市
2020/03/11 无线电
php实现学生管理系统
2020/03/21 PHP
ThinkPHP实现登录退出功能
2017/06/29 PHP
PHP消息队列实现及应用详解【队列处理订单系统和配送系统】
2019/05/20 PHP
PHP使用CURL实现下载文件功能示例
2019/06/03 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
IE与FireFox的兼容性问题分析
2007/04/22 Javascript
ExtJS 2.0实用简明教程 之Border区域布局
2009/04/29 Javascript
关于ExtJS4.1:快捷键支持的问题
2013/04/24 Javascript
JQuery验证jsp页面属性是否为空(实例代码)
2013/11/08 Javascript
jQuery实现鼠标经过图片预览大图效果
2014/04/10 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
2016/03/28 Javascript
全面解析Bootstrap中transition、affix的使用方法
2016/05/30 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
用node和express连接mysql实现登录注册的实现代码
2017/07/05 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
Node.js 在本地生成日志文件的方法
2020/02/07 Javascript
web.py中调用文件夹内模板的方法
2014/08/26 Python
Python利用公共键如何对字典列表进行排序详解
2018/05/19 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
如何利用python制作时间戳转换工具详解
2018/09/12 Python
解析Python的缩进规则的使用
2019/01/16 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
pytorch加载自定义网络权重的实现
2020/01/07 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
Python格式化输出--%s,%d,%f的代码解析
2020/04/29 Python
HTML5 本地存储实现购物车功能
2017/09/07 HTML / CSS
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
英国日常交易网站:Wowcher
2018/09/04 全球购物
英国礼品和生活方式品牌:Treat Republic
2020/11/21 全球购物
日语专业毕业生自荐信
2013/11/11 职场文书
表扬信格式
2014/01/12 职场文书
销售经理竞聘书
2014/03/31 职场文书
产品售后服务承诺书
2014/05/21 职场文书
小学教师教学随笔
2015/08/14 职场文书