前端处理图片模糊

前端处理图片模糊

方案一：css3滤镜处理

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

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

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

<style>
    .blur { 
        -webkit-filter: blur(50px);
        -moz-filter: blur(50px); 
        -ms-filter: blur(50px); 
        filter: blur(50px);
    }
</style>

注：

1. IE 没有实现CSS3 的filter ，因为它们本来就有自己的filter 滤镜实现。IE 中的filter 实现了和CSS3 中 filter 类似的方法，但是filter 方法的调用却与CSS3 中的filter 方法不太一样。CSS3 中的filter 比IE 更切合的方式实现了这些方法，添加上IE 中的高斯模糊实现：

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

​ IE10、IE11是不支持CSS 中 filter 的语法的。

2.容器外范围变模糊：给父容器加overflow:hidden；

​ 周边泛白：给目标添加 transform: scale(1.2); 放大为原来的1.2倍，泛白的部分就可以隐藏起来看不见了。

方案二：HTML5 之 canvas

canvas 中有一个getImageData() 方法，可以获取图片上的像素点信息，还有一个方法putImageData() 可以将图像的像素点信息修改后写入到canvas 上，canvas 也提供了方法toDataURL() 将图像信息导出成路径供其它用处（譬如作为其他元素的背景）

我们要使用的是高斯模糊的JS插件——StackBlur.js

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

function stackBlurImage( imageID, canvasID, radius, blurAlphaChannel )

​ imageID 是html 页面中要高斯模糊的原图片标签ID，

​ canvasID 是canvas 画图的ID，

​ radius 是要高斯模糊的半径，

​ blurAlphaChannel 将其设置为true

图像作为源:

 StackBlur.image(sourceImage, targetCanvas, radius, blurAlphaChannel);

• **sourceImage：**HTMLImageElement或者它的id
• **targetCanvas：**HTMLCanvasElement或者它的id
• **radius：**模糊半径
• blurAlphaChannel： 如果你想模糊一个 RGBA 的图像，就将其设置为true（可选，默认 =false）

RGBA Canvas 作为源:

StackBlur.canvasRGBA(targetCanvas, top_x, top_y, width, height, radius);

• targetCanvas: HTMLCanvasElement
• top_x: 要模糊的矩形的左上角的水平坐标
• top_y: 要模糊的矩形的左上角的垂直坐标
• width: 要模糊的矩形宽度
• height: 要模糊的矩形高度
• radius: 模糊半径

RGB Canvas 作为源:

StackBlur.canvasRGB(targetCanvas, top_x, top_y, width, height, radius);

• targetCanvas: HTMLCanvasElement
• top_x: 要模糊的矩形的左上角的水平坐标
• top_y: 要模糊的矩形的左上角的垂直坐标
• width: 要模糊的矩形宽度
• height: 要模糊的矩形高度
• radius: 模糊半径

RGBA ImageData 作为源:

StackBlur.imageDataRGBA(imageData, top_x, top_y, width, height, radius);

• imageData: canvas 的ImageData
• **top_x：**要模糊的矩形的左上角的水平坐标
• top_y: 要模糊的矩形的左上角的垂直坐标
• width: 要模糊的矩形宽度
• height: 要模糊的矩形高度
• radius: 模糊半径

RGB ImageData 作为源:

StackBlur.imageDataRGB(imageData, top_x, top_y, width, height, radius);

• imageData: canvas 的ImageData
• **top_x：**要模糊的矩形的左上角的水平坐标
• top_y: 要模糊的矩形的左上角的垂直坐标
• width: 要模糊的矩形宽度
• height: 要模糊的矩形高度
• radius: 模糊半径

​ 将canvas 画图作为其他元素的背景：使用canvas 绘制背景图

​ 马赛克图片处理插件：canvas 生成马赛克图片

​ 高斯模糊算法——高斯模糊算法

​ 局部实现高斯模糊 ——https://www.jb51.net/article/151506.html

方案三：SVG高斯模糊

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

根据 SVG 的教程 中的介绍，SVG 滤镜主要使用了 和 标记。保存一个名为 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="xxx.jpg" x="0" y="0" height="191" width="265" filter="url(#blur)" /> 
</svg>

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

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

这样就达到了我们的目的——高斯模糊图片