Javascript? ???? ?? SVG? ???? ??? ???? ??? ?? ??? ?????? ?? ??? ???? ??? ??? ??? ???, ???? ??? ??? ????!

??? ?? ??? ?? Vajoy? ?? ??? ?? ??? - Qiao CSS? ???? ??? ????? ???? ?????. Vajoy 的一篇文章 -- 巧用 CSS 把圖片馬賽克風格化。

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

何為 image-rendering？

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

語法比較簡單：

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

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

譬如，假設我們有一張 300px x 300px 的圖像，我們讓他轉(zhuǎn)換成 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> 實現(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 濾鏡可以通過 CSS filter，輕松的引入。

代碼其實也非常的簡單，SVG 定義一個濾鏡，利用多層濾鏡的疊加效果實現(xiàn)一個馬賽克效果，然后，通過 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>

??? CSS?? ???? ??? ???? ????. image- ???? ??? ?? ?? ????? ???? ? ??? ? ????. [?? ??: CSS ??? ????]??

??? ????? ??????

??CSS ?? ??? ???? ??? ?? ?? ????? ???? ? ?????. ?? ?? ??, ??? ?? ??? ?? ??? ? ?? ??? ?????. ??????? ??? ?????. ??rrreee??? ??? image-rendering: pixelated? ? ???? ???? ?? ???? ???? ??? ? ????. ?????? ?? 300px x 300px ???? ?? ?? 30px x 30px? ????? ??? ?????. ??????????? ???? 300px x 300px：????<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/2de2f4696cb5a7294956183da932aa03-1.png" class="lazy" alt="" loading="lazy">???? ?? ???? ? ???? <code>image-rendering: pixelated? ???? ???? ???? ?????: ??rrreeerrreee????

image-rendering: pixelated

???? ?? ??? ???? ???? ? ?? ???? ??? ?? ??? ???: ???? ??? ?? ?? ???? ?? image-rendering: pixelated? ?? ??? ?????. ????????image-rendering: pixelated? ?? ???? ?? ???? ???? ? ???????? ?? ???? ????. ???? ??? ?? ?????. ????? ?? image-rendering: pixelated? ??? ?????. ???? ??? ? ??? ?? ????? ????? ???? ? ???? ??? ??? ????. ?? . ???????? ??? ???? ????? ??? ???: ???? ???? ???? ???? ?? ? ????! ??

CSS? ???? ??? ?? ? ?????????

???? ??? ?? ???? ?? CSS? ???? ???? ??? ?? ??? ??? ?????. ? ????? ?? ??? ?? ??? ? ????. ????CSS? ???? ???? ?? ? ??? ?? image-rendering: pixelated? ??? ? ????? ???????. ?? ?? ??? Photoshop? ??? ??? ????. ??? ???? ??? ? ???(?? ?? ?? ? ???? ???? ??? ?) ????? ??? ?? ??? ?? ???? ??? ?? ??? ?????. ?? ?? ?? ??? ????. ??????? ?? ???? ???? ?? ??? ???? ???? Canvas? ???? ???, ??? ?? ??????. ??? ?? ???? ??? ?? ????. ??

SVG ?? ????? ???? ?? ??

????? ???? SVG ?? ?? ???? SVG ?? ??? ???? ??? ?? ?? ???? ?? ??? ?? ? ????. ??????? SVG ??? CSS ??? ?? ?? ??? ? ????. ??????? ??? ?? ?????. SVG? ??? ???? ?? ???? ?? ?? ??? ???? ???? ??? ????. ?? ?? CSS ??? ?? ???? ?? ??? ??? ? ????. ??rrreeerrreee?????? ???? ??? ???? ??? ??????: ?????? ??? ??? ???? ??? SVG <filter> ??? ??? ??? ??? ??? ????. ?? ???? ????? , ???? ??? ??? ?????. SVG? ?? ??? ???? ? SVG ??? ?? ?? ??? ?? ??? ????. ??

• ??????! ??? SVG ??
• ??????! ???? ??? ?? ??
• ??! SVG ??? ???? ????? ?? ? ????

???? ??? ?? CSS/SVG? ??

?? ???? ??? ?? CSS/SVG ??? ??? ????? ?? ???? ???? ?? ??? ? ??? ?? ????? ????. ???????? ?? ???? ?? ???? ?? ????.

CSS/SVG ?? ??? ???? ??? ???? ???? ???? ?? ???? ?????.

?? ??? ??? ? ?? ??? ???? ??? ???? ??? ?? ??? ??? ??? ?? ? ????.

?? ??? DEMO ? SVG ?? ??? ?? ??? ? ????. ? ? ?? ??:

• CodePen ?? - ??? ??? ??? ??????
• SVG Pixel Filter

?? ??: https://www.cnblogs.com/coco1s/p/16134088 .html

??: ChokCoco

(?? ?? ??: ? ?????)

? ??? SVG? ???? ??? ???? ??? ?? ??? ?? ???? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!