杰晶网络

js canvas画布实现高斯模糊效果
网络编程 2025/10/28 佚名
3 2

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

标签：
js,canvas,高斯模糊
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“js canvas画布实现高斯模糊效果”
暂无“js canvas画布实现高斯模糊效果”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/10/28

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网