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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
Dec 26 Javascript
JS 精确统计网站访问量的实例代码
Jul 05 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
利用CSS3在Angular中实现动画
Jan 15 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
js绑定事件和解绑事件
Apr 27 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
JavaScript实现跟随滚动缓冲运动广告框
Jul 15 Javascript
67 个节约开发时间的前端开发者的工具、库和资源
Sep 12 Javascript
Node.js中package.json中库的版本号(~和^)
Apr 02 Javascript
vue-cli webpack配置文件分析
May 20 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定时自动生成静态HTML的实现代码
2010/06/20 PHP
php自动加载的两种实现方法
2010/06/21 PHP
php 常用的系统函数
2017/02/07 PHP
php实现的双色球算法示例
2017/06/20 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
JavaScript flash复制库类 Zero Clipboard
2011/01/17 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
JavaScript实现维吉尼亚(Vigenere)密码算法实例
2013/11/22 Javascript
现如今最流行的JavaScript代码规范
2014/03/08 Javascript
用js的document.write输出的广告无阻塞加载的方法
2014/06/05 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
详解JavaScript的策略模式编程
2015/06/24 Javascript
js事件处理程序跨浏览器解决方案
2016/03/27 Javascript
jQuery实现的自适应焦点图效果完整实例
2016/08/24 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
jQuery实现右侧抽屉式在线客服功能
2017/12/25 jQuery
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
[03:22]DOTA2超级联赛专访单车:找到属于自己的英雄
2013/06/08 DOTA
[02:07]2018DOTA2亚洲邀请赛主赛事第三日五佳镜头 fy极限反杀
2018/04/06 DOTA
[01:04:49]KG vs LGD 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
python爬虫之百度API调用方法
2017/06/11 Python
Python callable()函数用法实例分析
2018/03/17 Python
pandas修改DataFrame列名的方法
2018/04/08 Python
Ubuntu下使用python读取doc和docx文档的内容方法
2018/05/08 Python
CSS3 animation实现简易幻灯片轮播特效
2016/09/27 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
Linux文件操作命令都有哪些
2015/02/27 面试题
公司成立感言
2014/01/11 职场文书
施工员岗位职责
2014/03/16 职场文书
大客户经理岗位职责
2015/04/09 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
使用feign服务调用添加Header参数
2021/06/23 Java/Android
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python