Web前端之高斯模糊图片记

题记 前端需求之高斯模糊图片

   最近工作中有一个需求，客户提交图片，服务器根据图片生成内容，并将内容显示，要求高斯模糊处理用户的图片并作为作品展示的背景，类似于苹果设备上的高斯模糊背景。用户提交的图片分网络图片地址、终端设备上传两种。要求兼容各大浏览器。

解决方案一：CSS3滤镜

   在CSS3 中规定了一个新的图形特效：filter ，可以对元素进行模糊、锐化或者元素变色。 filter 目的是用来调整图片、背景和边界的渲染。

   在CSS3 中已经实现了filter 的一些预定义函数，MDN 中介绍如下：

filter: url("filters.svg#filter-id");
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Apply multiple filters */
filter: contrast(175%) brightness(3%);

/* Global values */
filter: inherit;
filter: initial;
filter: unset;

详见：MDN中对 filter 的介绍 

其中blur() 正是对元素进行高斯模糊，顺便添加了brightness() 函数增加前景背景明暗对比度。

  -webkit-filter: blur(10px) brightness(.5); /* Chrome, Opera */
     -moz-filter: blur(10px) brightness(.5); 
      -ms-filter: blur(10px) brightness(.5);    
          filter: blur(10px) brightness(.5);

background-image: url(/*用户图片地址*/);

 

在谷歌浏览器、火狐浏览器、Edge 浏览器中展示，效果不错，但是在IE 中不行。

CSS3 filter 的浏览器兼容列表如下：

IE的CSS filter

   IE 没有实现CSS3 的filter ，因为它们本来就有自己的filter 滤镜实现。IE 中的filter 实现了和CSS3 中 filter 类似的方法，但是filter 方法的调用却与CSS3 中的filter 方法大相径庭。Microsoft 早在 IE 4.0 中就开始了filter 的支持，很明显CSS3 中的filter 借鉴了IE 的思想却用了比IE 更切合的方式实现了这些方法，为IE 点赞。关于IE 中的CSS-filter 的知识详见关于IE中CSS-filter滤镜小知识介绍。于是添加上IE 中的高斯模糊实现：

filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */

   到这里发现并没有万事大吉，大家会发现IE filter 代码中的注释是IE6~IE9。IE10、IE11是不支持CSS 中 filter 的语法的，想来可能是Microsoft 想在IE 10 后支持CSS3 中的filter 却发现与之前的实现有冲突，然后不得不舍弃，最终也没拿出方案吧。所以只得寻找新的方案。

解决方案二：HTML5 之 canvas

   canvas 中有一个getImageData() 方法，可以获取图片上的像素点信息，还有一个方法putImageData() 可以将图像的像素点信息修改后写入到canvas 上，canvas 也提供了方法toDataURL() 将图像信息导出成路径供其它用处（譬如作为其他元素的背景），将canvas 画图作为其他元素的背景可查看使用canvas 绘制背景图-Jerry Qu 的介绍。我们获取图片的信息后对图片信息进行转化后写回canvas ，就能得到想要的效果。当然，使用不同的算法会得到不同的结果，canvas 生成马赛克图片 介绍了不同的图片处理插件，有兴趣的可以在上面详细了解。我们要使用的是高斯模糊的插件，对高斯模糊算法，阮老师的一篇译文——高斯模糊算法 介绍的很不错，主要涉及正态分布。不过我们现成的实现，在网上找到这个JS插件——StackBlur.js，Demo地址：http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html 。

   该插件可以实现高斯模糊效果，主要使用里面的方法

function stackBlurImage( imageID, canvasID, radius, blurAlphaChannel )

 

其中， imageID 是html 页面中要高斯模糊的原图片标签ID，canvasID 是canvas 画图的ID，radius 是要高斯模糊的半径，blurAlphaChannel 涉及半透明（未详细研究）。

   于是敲定解决方案：在html 页面中插入隐藏标签<img />和隐藏的标签<canvas></canvas>，使用插件中方法设置作品展示的背景。方案敲定开始编码，写完后上传了一张图片，服务器保存后将图片地址保存后返回图片地址，前端处理。测试，通过，完美兼容各大浏览器。

   问题出现在项目改造，使用独立的图片服务器后，图片服务器和Web 服务器在不同的域下，所以在运行 stackBlurImage() 是浏览器报出了如下错误：

Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

造成这个问题的原因是图片跨域，在canvas 修改图片信息的时候，像其他数据一样，图片信息的访问也有域的限制，跨域图片的详细介绍可参见MDN 上的讲解：CORS enable image  。跨域限制是html 规范上要求的，各个浏览器是否实现虽有差别，但至少Chrome 上是不行的（存在其他浏览器并未对canvas 中的这一点做限制），看到一些博客介绍修改浏览器设置也可以突破这个限制，但显然这不是产品级的解决方案。

   存在这个问题的不仅仅是因为文件服务器独立出来，如果用户提交的是第三方网站的图片地址，一样存在这个问题，只是当时未发现而已。于是考虑使用JS 将图片下载到本地再使用，可是JS 也有跨域的限制，仍然不可行。

尝试解决方案三：CSS3 之 transform

   CSS3 提供了很多变换，其中 transform 就可以对元素进行旋转（rotate）、位移（translate）、缩放（scale）、倾斜（skew）等2D3D转换（MDN讲解：transform），当然，这些转换斗是以 matrix(矩阵) 为基础方法在坐标系统中对可视化模型的坐标空间进行操作。既然如此，若有合适的矩阵是否能达到元素“高斯模糊的效果”呢？于是对 matrix(矩阵) 进行探究。

   matrix(矩阵) 主要原理是对元素点集合的各个点坐标进行线性代数转换，以达到元素变形的目的。CSS3 transform 的2D转换 matrix() 方法写法如下：

transform: matrix(a,b,c,d,e,f);

这六个参数对应的矩阵就是:

坐标转换的过程如下：

3*3矩阵每一行的第1个值与后面1*3的第1个值相乘，第2个值与第2个相乘，第3个与第3个，然后相加。2D转换使用了3*3矩阵，3D 转换多了一个Z轴，使用的是4*4矩阵。两种转换的本质是一样的，只是复杂度不同。上面这一段介绍来自张旭鑫的博客，理解CSS3 transform中的Matrix(矩阵) 。他的另一篇博客对 3D 转换进行了详细而又个性的介绍，好吧，CSS3 3D transform变换，不过如此 。感谢大神们的分享。

也就是说 transform 转换的实质是对坐标点的变化，并不能对图片的像素点数据进行操作，能进行各种变形，却改变不了元素的本质，高斯模糊改变了图片的像素点，transform 并不能解决我们的问题。

解决方案四：SVG高斯模糊

   SVG 是用XML格式定义在Web 平台上的矢量图，它是一个开放标准，它将图像信息以XML 文本形式进行保存和传输，SVG 里也提供了滤镜来该表元素的显示，其中包括高斯模糊。我们先来看看SVG 的浏览器兼容性：

回顾我们使用的过的解决办法，方案二有同源策略的限制，方案三不可用，方案一兼容了除IE10+外的主流浏览器，如果我们使用SVG滤镜将IE10+ 的坑填上，便得到一个完美的解决方案。根据 SVG 的教程 中的介绍，SVG 滤镜主要使用了<defs> 和<filter> 标记。保存一个名为 blur.svg 的SVG 文件，文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" 
     xmlns="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">
     <defs>
        <filter id="blur">
            <feGaussianBlur stdDeviation="10" />
        </filter>
    </defs>
    <image xlink:href="mm1.jpg" x="0" y="0" height="191" width="265" filter="url(#blur)" />
</svg>

红色部位的代码便提供了一个高斯模糊滤镜（模糊半径为10），<image> 标记提供了要模糊的图片，属性 xlink:href 是图片的地址，属性 filter 根据ID 应用了红色代码定义的滤镜，然后SVG 作为背景图片载入：

.blur {
    background-image: url(blur.svg);
}

 

这样就达到了我们的目的——高斯模糊图片，但仍然存在一个问题，以上的SVG 文件单独于html 页面，需要额外的维护，要命的是图片的地址很难改变，于是我们把以上 SVG 标签的内容作为内联元素放在了 html 页面中，并和作品展示的容器同级。然后将他们的父元素 position 设为 relative ，作品容器背景色设为透明。对 <svg> 标签应用以下样式作为作品容器的背景，

width: 120%;
height: 120%;
position:absolute;
top:-10%;
left:-10%;

 

最后是使用 JS 调节 <svg> 标签中的 <iamge> 宽高属性以完美展示。

至此，问题得以解决。