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实现)MapBar中坐标的加密和解密的脚本
May 16 Javascript
JavaScript 闭包在封装函数时的简单分析
Nov 28 Javascript
jquery重复提交请求的原因浅析
May 23 Javascript
基于jquery实现无限级树形菜单
Mar 22 Javascript
浅谈javascript:两种注释,声明变量,定义函数
Oct 05 Javascript
jQuery 插件封装的方法
Nov 16 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
Bootstrap选项卡学习笔记分享
Feb 13 Javascript
jQuery插件FusionCharts实现的2D饼状图效果【附demo源码下载】
Mar 03 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 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多进程编程实例
2014/10/15 PHP
php结合安卓客户端实现查询交互实例
2015/05/05 PHP
php使用Jpgraph绘制柱形图的方法
2015/06/10 PHP
jQuery向下滚动即时加载内容实现的瀑布流效果
2016/01/07 PHP
PHP array_key_exists检查键名或索引是否存在于数组中的实现方法
2016/06/13 PHP
PHP PDOStatement::fetchAll讲解
2019/01/31 PHP
PHP反射学习入门示例
2019/06/14 PHP
node.js中的path.normalize方法使用说明
2014/12/08 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
jquery判断iPhone、Android设备类型
2016/09/14 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
一道面试题引发的对javascript类型转换的思考
2017/03/06 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
Vue 页面状态保持页面间数据传输的一种方法(推荐)
2018/11/01 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
微信小程序开发搜索功能实现(前端+后端+数据库)
2020/03/04 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
快速入门python学习笔记
2017/12/06 Python
Python与人工神经网络:使用神经网络识别手写图像介绍
2017/12/19 Python
django2 快速安装指南分享
2018/01/05 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
Python新手学习标准库模块命名
2020/05/29 Python
python pandas dataframe 去重函数的具体使用
2020/07/20 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
Ejb技术面试题
2015/04/29 面试题
交通事故协议书范本
2014/11/18 职场文书
廉洁自律证明
2015/06/24 职场文书
餐馆开业致辞
2015/08/01 职场文书
2015中秋祝酒词
2015/08/12 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python