SVG快速構(gòu)建馬賽克效果

第SVG快速構(gòu)建馬賽克效果目錄前言何為image-rendering？image-rendering:pixelated實現(xiàn)馬賽克效果的局限性利用CSS再圖片縮小后再放大？SVG濾鏡疊加實現(xiàn)馬賽克效果CSS/SVG實現(xiàn)馬賽克的局限性最后

前言

之前好友Vajoy的一篇文章--巧用CSS把圖片馬賽克風格化。

核心是利用了CSS中一個很有意思的屬性--image-rendering，它可以用于設置圖像縮放算法。

何為image-rendering？

CSS屬性image-rendering用于設置圖像縮放算法。它適用于元素本身，適用于元素其他屬性中的圖像，也應用于子元素。

語法比較簡單：

{

image-rendering:auto;//默認值，使用雙線性（bilinear）算法進行重新采樣（高質(zhì)量）

image-rendering:smooth;//使用能最大化圖像客觀觀感的算法來縮放圖像。讓照片更“平滑”

image-rendering:crisp-edges;//使用可有效保留對比度和圖像中的邊緣的算法來對圖像進行縮放

image-rendering:pixelated;//放大圖像時,使用最近鄰居算法，因此，圖像看著像是由大塊像素組成的

其中，image-rendering:pixelated比較有意思，可以將一張低精度圖像馬賽克化。

譬如，假設我們有一張300pxx300px的圖像，我們讓他轉(zhuǎn)換成30pxx30px：

我們再把失真后的圖片，放大到300pxx300px：

在此基礎上，我們給這張圖片設置image-rendering:pixelated，就能得到一張被馬賽克化圖片：

imgsrc="pic.jpeg30x30"/

img{

width:300px;

height:300px;

image-rendering:pixelated

image-rendering:pixelated實現(xiàn)馬賽克效果的局限性

OK，那么為什么需要先縮小再放大，然后才運用image-rendering:pixelated呢？我們來做個對比，直接給原圖設置image-rendering:pixelated：

直接給原圖設置image-rendering:pixelated只會讓圖片變得更加有鋸齒感，而不會直接產(chǎn)生馬賽克的效果。

這也和image-rendering:pixelated的描述吻合，放大圖像時,使用最近鄰居算法，因此，圖像看著像是由大塊像素組成的。

我們只有基于放大模糊后的圖像，才能利用image-rendering:pixelated得到一張被馬賽克的圖片！

利用CSS再圖片縮小后再放大？

那么，假設我們只有一張清晰的原圖，又想利用CSS得到一個馬賽克效果，可行么？順著這個思路，我們可以想到：

能否利用CSS將圖片縮小后再放大，再運用image-rendering:pixelated呢？

不行。WEB上的圖片像極了Photoshop里的智能對象你可以任意修改它的尺寸（例如放大很多倍讓其變模糊），但最后再把圖片改回原本的大小時，圖片會變回原來的樣子（沒有任何失真）。

所以，要想在只有一張原圖的情況下，得到一張模糊的圖像，就不得不求助于Canvas，這樣一來就稍顯麻煩了。我們只是想要個馬賽克效果而已。

SVG濾鏡疊加實現(xiàn)馬賽克效果

這就可以引出今天的主角了，SVG濾鏡，使用幾層SVG濾鏡的疊加，其實可以非常輕松的實現(xiàn)一個馬賽克效果濾鏡。

并且，SVG濾鏡可以通過CSSfilter，輕松的引入。

代碼其實也非常的簡單，SVG定義一個濾鏡，利用多層濾鏡的疊加效果實現(xiàn)一個馬賽克效果，然后，通過CSSfilter引入，可以運用在任何元素上：

imgsrc="任意無需縮放的原圖.png"alt=""

svg

filterid="pixelate"x="0"y="0"

feFloodx="4"y="4"height="2"width="2"/

feCompositewidth="8"height="8"/

feTileresult="a"/

feCompositein="SourceGraphic"in2="a"operator="in"/

feMorphologyoperator="dilate"radius="5"/

/filter

/svg

img{

width:300px;

height:300px;

filter:url(#pixelate);

這樣，我們就得到了一個馬賽克效果：

如果你只是想使用這個效果，你甚至不需要去理解整個SVGfilter到底做了什么事情，當然，如果你是一個一問到底的人，那么需要有一定的SVG基礎，建議可以看看我的這幾篇關于SVG濾鏡的介紹：

強大的SVG濾鏡

不規(guī)則邊框的生成方案

巧用SVG濾鏡還能制作表情包？

CSS/SVG實現(xiàn)馬賽克的局限性

當然，CSS/SVG濾鏡實現(xiàn)馬賽克的局限性在于，如果你是不想給用戶看到原圖的，那么在客戶端直接使用這個方式相當于直接把原圖的暴露了。

因為CSS/SVG濾鏡的方式是在前端進行圖片馬賽克化的，而且需要原圖。

當然，利用上述的兩個實現(xiàn)圖片馬賽克技巧，我們還是可以用于制作一些簡單的交互效果的，像是這樣：

上述的DEMO和SVG濾鏡的全部代碼，你都可以在這兩個