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

2019-11-19 12:27:43

字体：大中小

来源：转载

供稿：网友

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

<!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实现画图、滤镜效果

下一篇：video.js 一个页面同时播放多个视频的实例代码