【CSS3】滤镜+【html5】画布实现图片模糊效果

前一阵子在做虾米音乐播放器的时候偶然发现页面背景颜色和歌曲专辑封面很相像，请教老师才知道这是通过模糊效果实现的。

现在做个小小的总结，实现方法大致有如下三种：

1.CSS3 blur滤镜实现
2.CSS3 SVG滤镜实现
3.html5 canvas+js模糊函数(高斯模糊算法)实现

前2种方法实现起来比较简单:
(1)在img标签中添加类名"blur"。
(2)在css样式中添加如下代码:
                                         -webkit-filter: blur(10px); /* Chrome, Opera */
                                         -moz-filter: blur(10px);
                                         -ms-filter: blur(10px);    
                                          filter: blur(10px);
    
                                          filter: progid XImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE7~IE9 *经本人亲测IE6暂不支持，IE9模糊效果不明显/
因火狐暂不支持CSS3 filter,于是SVG派上用场,从第二步开始:  (2)CSS添加如下代码:filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */
(3)新建后缀名为.svg的文件，添加代码:

http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd "> http://www.w3.org/2000/svg " xmlns:xlink=" http://www.w3.org/1999/xlink " xmlns:ev=" http://www.w3.org/2001/xml-events " baseProfile="full">  
至此，前2种方法除了IE6,10,11不支持，其他主流浏览器都已经支持了！
但是，通过CSS滤镜实现的模糊效果会有个小缺陷，中间模糊两边留白，如图:

canvas:"是时候表演真正的技术了！"
实现步骤如下：
(1)在文档中添加canvas标签
(2)下载高斯模糊函数库： http://www.quasimondo.com/StackBlurForCanvas/StackBlur.js 并在head中引用
(3)在自己的JS中调用函数  stackBlurImage( sourceImageID, targetCanvasID, radius, blurAlphaChannel );
sourceImageID:源图片 ID
targetCanvasID:目标画布ID
radius:模糊半径
blurAlphaChannel:alpha通道是否开启,默认false
效果图:

PS：由于某种不可抗因素，加载本地图片效果会出不来，所以只能在公网上调试