對于模糊圖片這個效果的實現(xiàn)，其實css3中的filter屬性也能夠?qū)崿F(xiàn)，但是這個屬性的兼容性不是很好，所以我們通常不用這種方法實現(xiàn)，而使用canvas配合JS實現(xiàn)。

<span?style="white-space:pre">??</span>//高斯模糊??參數(shù)說明:width:canvas對象或者是數(shù)據(jù)體對象的寬，height:canvas或者是數(shù)據(jù)體對象的高，??

????//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;??a=j+row;??

????????????????????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;??

????}??

?

轉(zhuǎn)載于:https://www.cnblogs.com/ckAng/p/9334216.html

總結(jié)

以上是生活随笔為你收集整理的canvas高斯模糊算法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。