不借助 Javascript，如何利用 SVG 實現圖片馬賽克效果？下面這篇文章就來帶大家詳細了解一下，希望對大家有幫助！
之前在公眾號轉發了好友 Vajoy 的一篇文章 -- 巧用 CSS 把圖片馬賽克風格化。
核心是利用了 CSS 中一個很有趣的屬性 -- image-rendering，它可以用來設定圖片縮放演算法。 【推薦學習：css影片教學】
CSS 屬性 image-rendering 用於設定影像縮放演算法。它適用於元素本身，適用於元素其他屬性中的圖像，也應用於子元素。
語法比較簡單：
{
image-rendering: auto; // 默认值，使用双线性（bilinear）算法进行重新采样（高质量）
image-rendering: smooth; // 使用能最大化图像客观观感的算法来缩放图像。让照片更“平滑”
image-rendering: crisp-edges; // 使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放
image-rendering: pixelated; // 放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的
}其中，image-rendering: pixelated 比較有意思，可以將一張低精度影像馬賽克化。
譬如，假設我們有一張300px x 300px 的圖像，我們讓他轉換成30px x 30px：
我們再把失真後的圖片，放大到300px x 300px：
在此基礎上，我們給這張圖片設置image-rendering: pixelated，就能得到一張被馬賽克化圖片：
<img src="pic.jpeg?30x30" />
img {
width: 300px;
height: 300px;
image-rendering: pixelated
}
<strong>image-rendering: pixelated</strong> 實現馬賽克效果的限制
OK，那麼為什麼需要先縮小再放大，然後才運用image-rendering: pixelated 呢？我們來做個對比，直接給原圖設定image-rendering: pixelated：
直接給原圖設定image-rendering: pixelated 只會讓圖片更有鋸齒感，而不會直接產生馬賽克的效果。
這也和image-rendering: pixelated 的描述吻合，放大影像時, 使用最近鄰居演算法，因此，影像看著像是由大塊像素組成的。
我們只有基於放大模糊後的圖像，才能利用 image-rendering: pixelated 得到一張被馬賽克的圖片！
那麼，假設我們只有一張清晰的原圖，又想利用 CSS 得到一個馬賽克效果，可行麼？順著這個思路，我們可以想到：
能否利用 CSS 縮小圖片後再放大，再運用 image-rendering: pixelated 呢？
不行。 WEB 上的圖片像極了Photoshop 裡的智慧型物件－ 你可以任意修改它的尺寸（例如放大很多倍讓其模糊），但最後再把圖片改回原本的大小時，圖片會變回原來的樣子（沒有任何失真）。
所以，要想在只有一張原圖的情況下，得到一張模糊的圖像，就不得不求助於 Canvas，這樣一來就稍顯麻煩了。我們只是想要個馬賽克效果而已。
這就可以引出今天的主角了，SVG 濾鏡，使用幾層SVG 濾鏡的疊加，其實可以非常輕鬆的實現一個馬賽克效果濾鏡。
並且，SVG 濾鏡可以透過 CSS filter，輕鬆的引入。
程式碼其實也非常的簡單，SVG 定義一個濾鏡，利用多層濾鏡的疊加效果實現一個馬賽克效果，然後，透過CSS filter 引入，可以運用在任何元素上：
<img src="任意无需缩放的原图.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);
}這樣，我們就得到了一個馬賽克效果：
如果你只是想使用這個效果，你甚至不需要去理解整個SVG <filter> ; 到底做了什麼事情，當然，如果你是一個一問到底的人，那麼需要有一定的SVG 基礎，建議可以看看我的這幾篇關於SVG 濾鏡的介紹：
當然，CSS/SVG 濾鏡實現馬賽克的限制在於，如果你不想給使用者看到原圖的，那麼在客戶端直接使用這個方式相當於直接把原圖的暴露了。
因為 CSS/SVG 濾鏡的方式是在前端進行圖片馬賽克化的，而且需要原始圖片。
當然，利用上述的兩個實作圖片馬賽克技巧，我們還是可以用來製作一些簡單的互動效果的，像是這樣：
#上述的DEMO 和SVG 濾鏡的全部程式碼，你都可以在這兩個DEMO 中找到：
原文網址：https://www.cnblogs.com/coco1s/p/16134088.html
#作者：ChokCoco
（學習影片分享：web前端）
以上是聊聊如何利用 SVG 實現圖片馬賽克效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
