不借助 Javascript，利用 SVG 快速构建马赛克效果

我之前在公众号上转发了我朋友Vajoy的一篇文章——用CSS对图像马赛克进行风格化。

核心是使用了CSS中一个很有意思的属性——image-，可以用来设置图片缩放算法。

什么是图像-？

CSS 属性 image- 用于设置图像缩放算法。它适用于元素本身、元素其他属性中的图像以及子元素。

语法比较简单：

{
    image-rendering: auto;              // 默认值，使用双线性（bilinear）算法进行重新采样（高质量）
    image-rendering: smooth;         // 使用能最大化图像客观观感的算法来缩放图像。让照片更“平滑”
    image-rendering: crisp-edges;  // 使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放
    image-rendering: pixelated;      // 放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的
}

其中image-:比较有趣，可以拼接出低精度的图片。

例如，假设我们有一个 300px x 300px 的图像，让我们将其转换为 30px x 30px：

让我们把变形后的图片放大到 300px x 300px：

在此基础上，我们可以给这张图片设置image-:，就可以得到一个马赛克图片：

img {
    width: 300px;

    height: 300px;
    image-rendering: pixelated
}

image- : 实现马赛克效果的局限性

好的，那为什么要先缩小再放大，再用image-:呢？我们来做个对比，直接设置 image-: 为原图：

设置图片-：直接设置成原图只会让图片更有趣的锯齿感，不会直接产生马赛克效果。

这也符合 image-: 的描述。放大图像时，使用最近邻算法，因此图像看起来是由大块像素组成的。

我们只能使用image-:根据放大后的模糊图像得到马赛克图像！

使用 CSS 缩小图片然后放大？

那么，假设我们只有一张清晰的原图，想用CSS来做马赛克效果，可行吗？按照这个思路，我们可以想到：

我们可以用 CSS 把图片缩小再放大，然后用 image-: 吗？

没有。网络上的图片就像一个智能对象——你可以任意改变它的大小（比如放大很多倍让它变得模糊），但是当你最终把图片改回原来的大小时，图片又会恢复到原来的大小外观（没有任何失真）。

所以，如果你想在只有一张原始图像的情况下得到一张模糊的图像，你就不得不求助于 ，这有点麻烦。我们只是想要一个马赛克效果。

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

这可以引出今天的主角，SVG滤镜，使用几层SVG滤镜的叠加，其实很容易实现一个马赛克效果滤镜。

此外，SVG 过滤器可以通过 CSS 轻松引入。

代码其实很简单。 SVG定义了一个滤镜，利用多层滤镜的叠加效果达到马赛克效果。然后，可以通过 CSS 引入将其应用到任何元素上：

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

这样，我们就得到了马赛克效果：

如果你只是想使用这个效果，你甚至不需要了解整个 SVG 是做什么的。当然，如果你是一个把问题问到底的人，那么你需要有一定的SVG基础。推荐大家可以看看我对SVG滤镜的介绍：

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

当然，CSS/SVG滤镜实现马赛克的局限性在于，如果不想将原图展示给用户，那么直接在客户端使用这种方式就相当于直接暴露原图.

因为CSS/SVG过滤方式是在前端拼接图片，需要原图。

当然，利用以上两种技术实现图片拼接，我们还是可以用它来做一些简单的交互效果，像这样：

p>

以上DEMO和SVG滤镜的所有代码，你可以在这两个DEMO中找到：

终于

好了，本文到此结束，希望对你有所帮助

分类：

技术要点：

相关文章：