canvas高斯模糊算法

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

<span?style="white-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;??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;??
????}??

?