可以使用 SVG 过滤器对图像进行像素化吗？答案

【问题标题】：Can one pixelate images with an SVG filter?可以使用 SVG 过滤器对图像进行像素化吗？
【发布时间】：2016-09-23 21:17:52
【问题描述】：

注意：我不能使用 JavaScript，因为这是一个 CSS Zen Garden 的挑战。请不要推荐 JS 库。

我有 2 个想法没有取得进展：

使用 SVG 过滤器仅对 dang 图像进行像素化；我一直在玩<feMorphology operator="erode"/> 并在之后提高对比度，但看起来很糟糕。
将图像过滤为更小，然后使用 CSS 和image-rendering 将其放大，使其全部变为块状。困难的部分是步骤 A；我找不到任何可以缩放输入的过滤器操作。

我错过了什么吗？如何使用 SVG 滤镜获得“像素化”效果？

【问题讨论】：

我建议将您的codepen 添加为单独的答案，因为它非常好，搜索的人可以找到一个好的答案。删除我的答案。

标签： css svg svg-filters

【解决方案1】：

如果你有正确的“魔法”置换贴图，你可以像素化图像。随意使用下面引用的那个（由 Zoltan Fegyver 提供）。

更新：更改示例代码以将置换贴图图像内联为数据：URI（感谢代码 IllidanS4。）

最初的答案是将displacementMap 图像托管在不同的域上。这曾经有效 - 但浏览器实施了不允许这样做的新过滤器安全措施。对于今天的生产代码，您需要从与源图形文件相同的域提供的置换贴图图像，或者您需要内联置换贴图。

<svg x="0px" y="0px" width="810px" height="600px" viewBox="0 0 810 600" color-interpolation-filters="sRGB">
  <defs>
<filter id="pixelate" x="0%" y="0%" width="100%" height="100%">
  <!--Thanks to Zoltan Fegyver for figuring out pixelation and producing the awesome pixelation map. -->
  <feGaussianBlur stdDeviation="2" in="SourceGraphic" result="smoothed" />
  <feImage width="15" height="15" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVAgdY1ywgOEDAwKxgJhIgFQ+AP/vCNK2s+8LAAAAAElFTkSuQmCC" result="displacement-map" />
  <feTile in="displacement-map" result="pixelate-map" />
  <feDisplacementMap in="smoothed" in2="pixelate-map" xChannelSelector="R" yChannelSelector="G" scale="50" result="pre-final"/>
  <feComposite operator="in" in2="SourceGraphic"/>
</filter>
  </defs>

  <image filter="url(#pixelate)" width="810" height="600" preserveAspectRatio="xMidYMid meet" xlink:href="http://uploads2.wikiart.org/images/vincent-van-gogh/the-starry-night-1889(1).jpg"/>
</svg>

【讨论】：

嗯。在 WebKits 中可以正常工作，但在 Firefox 中只是模糊。
那是因为displacementMap使用的是跨域图片。如果您将置换贴图图像托管在与源相同的域上，它应该可以正常工作。（Firefox 已经实现了过滤器安全规范 - webkit 没有）
哦，太棒了；如果您可以将其放在其他人的答案中，我很乐意接受！
添加到答案中
您可以使用URI data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAWSURBVAgdY1ywgOEDAwKxgJhIgFQ+AP/vCNK2s+8LAAAAAElFTkSuQmCC将地图直接嵌入到图像中。