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

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

！doctype html html lang=' zh ' head meta charset=' UTF-8 ' meta name=' viewport ' content=' width=设备宽度，用户可缩放=否，初始比例=1.0,最大比例=1.0,最小比例=1.0 ' meta http-equiv=' X-UA-Compatible '内容=' ie=edge '标题画布画布的高斯模糊效果/title/headdycanvas id=' canvas '/canvas/body script var canvas=document。getelementbyid(' canvas ')；var CTX=画布。get context(' 2d ')；让img=new Image()；//这里直接修改图片的路径img。src=' 636753681750720000/Block/preview。jpg '；img.onload=function () { //设置帆布的宽高帆布。高度=img。身高；帆布。宽度=img。宽度；//将图像绘制到帆布上面ctx.drawImage(img，0，0，img.width，img。高度)；//从画布获取一半图像var data=ctx.getImageData(0，0，img.width/2，img。高度)；//将图像数据进行高斯模糊数据数据是一个数组，每四个值代表一个像素点的颜色的值，data.width data.height分别代表图像数据的宽高var emptyData=gaussBlur(数据);//将模糊的图像数据再渲染到画布上面ctx.putImageData(emptyData，0，0)；};函数高斯模糊(IMgdata){ var pixes=IMgdata。数据；var width=imgdata . width var height=imgdata . height var gaussMatrix=[]，gaussSum=0，x，y，r，g，b，a，I，j，k，lenvar半径=10;var=5；a=1 /(数学. sqrt(2 *数学).PI)*)；b=-1/(2 * sigma * sigma)；//生成高斯矩阵对于(i=0，x=-半径；x=半径；x，I){ g=a * Math。exp(b * x * x)；gaussMatrix[I]=g；gaussSum=g；} //归一化，保证高斯矩阵的值在[0,1]之间对于(i=0，len=gaussMatrix.length我透镜；I){ GaussMatrix[I]/=GaussSum；} //x方向一维高斯运算for(y=0；y高度；y){ for(x=0；x宽度；x){ r=g=b=a=0；gaussSum=0；对于(j=-半径；j=半径；j){ k=x j；if (k=0 k宽度){//确保k没超出x的范围//r、g、b、a四个一组i=(y *宽度k)* 4；r=像素[i] *高斯矩阵[j半径];g=像素[I ^ 1]*高斯矩阵[j半径];b=像素[一. ^ 2]*高斯矩阵[j半径];//a=pixes[I ^ 3]* gaussmatrix[j]；高斯求和=高斯矩阵[j半径];} } i=(y *宽度x)* 4；//除以高斯求和是为了消除处于边缘的像素，高斯运算不足的问题//控制台。log(GaussSum)像素[I]=r/GaussSum；像素[I ^ 1]=g/GaussSum；像素[I ^ 2]=b/高斯总和；//pixes[i3]=a；} } //y方向一维高斯运算for(x=0；x宽度；x){ for(y=0；y高度；y){ r=g=b=a=0；gaussSum=0；对于(j=-半径；j=半径；j){ k=y j；if (k=0 k高度){//确保k没超出y的范围i=(k *宽度x)* 4；r=像素[i] *高斯矩阵[j半径];g=像素[I ^ 1]*高斯矩阵[j半径];b=像素[一. ^ 2]*高斯矩阵[j半径];//a=pixes[I ^ 3]* gaussmatrix[j]；高斯求和=高斯矩阵[j半径];} } i=(y *宽度x)* 4；像素[I]=r/GaussSum；像素[I ^ 1]=g/GaussSum；像素[I ^ 2]=b/高斯总和；} }返回imgData}/脚本/html代码不多，大家直接复制一下，运行好了。

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