不借助 Javascript，如何利用 SVG 實(shí)現(xiàn)圖片馬賽克效果？下面本篇文章就來(lái)帶大家詳細(xì)了解一下，希望對(duì)大家有所幫助！

之前在公眾號(hào)轉(zhuǎn)發(fā)了好友 Vajoy 的一篇文章 -- 巧用 CSS 把圖片馬賽克風(fēng)格化。

核心是利用了 CSS 中一個(gè)很有意思的屬性 -- image-rendering，它可以用于設(shè)置圖像縮放算法?！就扑]學(xué)習(xí)：css視頻教程】

何為 image-rendering？

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

語(yǔ)法比較簡(jiǎn)單：

{
????image-rendering:?auto;??????????????//?默認(rèn)值，使用雙線性（bilinear）算法進(jìn)行重新采樣（高質(zhì)量）
????image-rendering:?smooth;?????????//?使用能最大化圖像客觀觀感的算法來(lái)縮放圖像。讓照片更“平滑”
????image-rendering:?crisp-edges;??//?使用可有效保留對(duì)比度和圖像中的邊緣的算法來(lái)對(duì)圖像進(jìn)行縮放
????image-rendering:?pixelated;??????//?放大圖像時(shí),?使用最近鄰居算法，因此，圖像看著像是由大塊像素組成的
}

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

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

我們?cè)侔咽д婧蟮膱D片，放大到 300px x 300px：

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

<img src="pic.jpeg?30x30" />

img?{
????width:?300px;
????height:?300px;
????image-rendering:?pixelated
}

<strong>image-rendering: pixelated</strong> 實(shí)現(xiàn)馬賽克效果的局限性

OK，那么為什么需要先縮小再放大，然后才運(yùn)用 image-rendering: pixelated 呢？我們來(lái)做個(gè)對(duì)比，直接給原圖設(shè)置 image-rendering: pixelated：

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

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

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

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

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

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

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

所以，要想在只有一張?jiān)瓐D的情況下，得到一張模糊的圖像，就不得不求助于 Canvas，這樣一來(lái)就稍顯麻煩了。我們只是想要個(gè)馬賽克效果而已。

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

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

并且，SVG 濾鏡可以通過(guò) CSS filter，輕松的引入。

代碼其實(shí)也非常的簡(jiǎn)單，SVG 定義一個(gè)濾鏡，利用多層濾鏡的疊加效果實(shí)現(xiàn)一個(gè)馬賽克效果，然后，通過(guò) CSS filter 引入，可以運(yùn)用在任何元素上：

<img src="任意無(wú)需縮放的原圖.png" alt="">
<svg>
??<filter id="pixelate" x="0" y="0">
????<feFlood x="4" y="4" height="2" width="2"/>
????<feComposite width="8" height="8"/>
????<feTile result="a"/>
????<feComposite in="SourceGraphic" in2="a" operator="in"/>
????<feMorphology operator="dilate"radius="5"/>
??</filter>
</svg>

img?{
????width:?300px;
????height:?300px;
????filter:?url(#pixelate);
}

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

如果你只是想使用這個(gè)效果，你甚至不需要去理解整個(gè) SVG <filter> 到底做了什么事情，當(dāng)然，如果你是一個(gè)一問(wèn)到底的人，那么需要有一定的 SVG 基礎(chǔ)，建議可以看看我的這幾篇關(guān)于 SVG 濾鏡的介紹：

• 有意思！強(qiáng)大的 SVG 濾鏡
• 有意思！不規(guī)則邊框的生成方案
• 震驚！巧用 SVG 濾鏡還能制作表情包？

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

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

因?yàn)?CSS/SVG 濾鏡的方式是在前端進(jìn)行圖片馬賽克化的，而且需要原圖。

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

上述的 DEMO 和 SVG 濾鏡的全部代碼，你都可以在這兩個(gè) DEMO 中找到：

• CodePen Demo - image-rendering ?pixelated application
• SVG Pixel Filter

原文地址：https://www.cnblogs.com/coco1s/p/16134088.html

作者：ChokCoco

（學(xué)習(xí)視頻分享：web前端）

以上是聊聊如何利用 SVG 實(shí)現(xiàn)圖片馬賽克效果的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！