关于前端:不借助-Javascript利用-SVG-快速构建马赛克效果

之前在公众号转发了好友 Vajoy 的一篇文章 — 巧用 CSS 把图片马赛克风格化。

外围是利用了 CSS 中一个很有意思的属性 — image-rendering，它能够用于设置图像缩放算法。

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
}

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 滤镜的介绍：

有意思！弱小的 SVG 滤镜
有意思！不规则边框的生成计划
震惊！巧用 SVG 滤镜还能制作表情包？

当然，CSS/SVG 滤镜实现马赛克的局限性在于，如果你是不想给用户看到原图的，那么在客户端间接应用这个形式相当于间接把原图的裸露了。

因为 CSS/SVG 滤镜的形式是在前端进行图片马赛克化的，而且须要原图。

当然，利用上述的两个实现图片马赛克技巧，咱们还是能够用于制作一些简略的交互成果的，像是这样：

上述的 DEMO 和 SVG 滤镜的全副代码，你都能够在这两个 DEMO 中找到：

CodePen Demo – image-rendering pixelated application
SVG Pixel Filter

好了，本文到此结束，心愿对你有帮忙 :)

想 Get 到最有意思的 CSS 资讯，千万不要错过我的公众号 — iCSS 前端趣闻 😄

更多精彩 CSS 技术文章汇总在我的 Github — iCSS，继续更新，欢送点个 star 订阅珍藏。

如果还有什么疑难或者倡议，能够多多交换，原创文章，文笔无限，满腹经纶，文中若有不正之处，万望告知。

关于前端:不借助-Javascript利用-SVG-快速构建马赛克效果

何为 image-rendering？

image-rendering: pixelated 实现马赛克成果的局限性

利用 CSS 再图片放大后再放大？

SVG 滤镜叠加实现马赛克成果

CSS/SVG 实现马赛克的局限性

最初