欢迎来到[自学php网] ①群 AG亚游集团

AG亚游集团 > 网站前端 > javascript >

js canvas画布实现高斯模糊效果

来源:未知 ?? 时间:2018-11-28 17:05?作者:小飞侠

[导读] 最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果。在实现局部模糊效果前,首先能够实现全部模糊。经过和度娘的一番较劲后,找到了一个不错的案例,然后...

最近项目中有一个需求是实现图片的局部模糊效果,看上去一个挺难的效果。在实现局部模糊效果前,首先能够实现全部模糊。经过和度娘的一番较劲后,找到了一个不错的案例,然后在他的基础上,经过一番修改,和备注,实现了当前的案例:

<!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一下,运行好了。

最新文章

点击排行

自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习

京ICP备14009008号@版权所有AG亚游集团

网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com

迪米特洛夫将参加今年女王杯 盼在温网取佳绩 新京报:收费公路改革前些年推进缓慢 障碍在哪? 男子驾套牌摩托被查冲关未果 推搡殴打交警被拘 罗永浩“打脸史”:另类的企业家成长之路 济南军区海军工程指挥部原主任朱京武涉贪被逮捕 虎扑不搞体育来搞吴亦凡?最新进展来了 英外交大臣:中国发展壮大对世界是机遇而非威胁 爱笑的男人运气不会差 还是东部比较好混 超级后发制人!索尼公开赛伍德兰德戏剧性进前十 业绩回暖仍难掩压力 酒类垂直电商受困双重挤压 国务院机构改革方案出炉:组建自然资源部 中国海军055大驱建造进入爆发之年 今年有望下水3艘
媒体:空姐被害后 女生换完头像坐滴滴就安全吗? 沃尔夫:印度力量有5个潜在买家 梅奔不在其中 沪台体育交流 世界冠军王仪涵点拨台北小球员 名宿:温格是阿森纳的传奇 但他真应该离开了 真队魂!把比赛带回五棵松?他说到做到! 去年中国游客在澳大利亚消费517亿 综述:上证50护盘A股 中国存托凭证(CDR)将很快推… 绝境之下看C罗!连续12场破门 打拜仁只能靠他 金斯米尔赛汤普森争卫冕 刘钰阎菁领衔中国军团 U17世界杯-中国女篮57分惨败美国女篮晋级16强 谷歌面临欧盟史上最大罚单: 垄断已成习惯? 全国两会来了 广东代表委员都关注哪些环保话题?
巴黎大佬:输给皇马让人失望 想办法再补强球队 再赢1场山东主帅喊出横扫:争取3-0拿下江苏! 上港发布主场战泰达海报 抵达战场为球队加油呐喊 安倍遭新打击 外媒:日本经济9个季度以来首次萎缩 特斯拉,盛世下的危机 经济适用房被抢占 天津通报7名干部不作为不担当 全国人大代表叶诗文:建议修改体育法 法拉利计划推全电动超级跑车 目标超越特斯拉 新京报:过期药品回收 得有长效规范 小投资暴利 有什么好的发展项目 90后如何白手起家 90后怎么赚钱白手起家 AG亚游集团