百度怎么进入官方网站,重庆世界500强企业,高级软件开发工程师证书含金量,新手怎么做网站推广对于模糊图片这个效果的实现#xff0c;其实css3中的filter属性也能够实现#xff0c;但是这个属性的兼容性不是很好#xff0c;所以我们通常不用这种方法实现#xff0c;而使用canvas配合JS实现。 span stylewhite-space:pre /span//高斯模糊…对于模糊图片这个效果的实现其实css3中的filter属性也能够实现但是这个属性的兼容性不是很好所以我们通常不用这种方法实现而使用canvas配合JS实现。 span stylewhite-space:pre /span//高斯模糊 参数说明:width:canvas对象或者是数据体对象的宽height:canvas或者是数据体对象的高 //radius:模糊取值半径(默认为3)sigma:方差取值(默认为1) /** * [Gaussian_blur description] * param {[type]} data [description] * param {[type]} width [description] * param {[type]} height [description] * param {[type]} radius [description] * param {[type]} sigma [description] */ function Gaussian_blur(data, width, height, radius, sigma) { var gaussMatrix [], gaussSum 0, x, y, r, g, b, a, i, j, k, len; radius Math.floor(radius) || 3; sigma sigma || radius / 3; 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; ajrow; if (k 0 k width) { //确保 k 没超出 x 的范围 i (y * width k) * 4; r data[i] * gaussMatrix[j radius]; g data[i 1] * gaussMatrix[j radius]; b data[i 2] * gaussMatrix[j radius]; gaussSum gaussMatrix[j radius]; } } i (y * width x) * 4; data[i] r / gaussSum; data[i 1] g / gaussSum; data[i 2] b / gaussSum; } } //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 data[i] * gaussMatrix[j radius]; g data[i 1] * gaussMatrix[j radius]; b data[i 2] * gaussMatrix[j radius]; gaussSum gaussMatrix[j radius]; } } i (y * width x) * 4; data[i] r / gaussSum; data[i 1] g / gaussSum; data[i 2] b / gaussSum; } } return data; } 转载于:https://www.cnblogs.com/ckAng/p/9334216.html