css - 可以使用 SVG 滤镜对图像进行像素化吗？

Question

注意:我无法使用 JavaScript，因为这是针对 CSS Zen Garden 之类的挑战。请不要推荐 JS 库。

我有两个想法尚未取得进展:

1. 使用 SVG 滤镜对 dang 图像进行像素化；我一直在玩<feMorphology operator="erode"/>然后提高对比度，但看起来很糟糕。

2. 将图像过滤得更小，然后使用 CSS 和 image-rendering 将其放大。都是 block 状的。最困难的部分是步骤A；我找不到任何缩放输入的过滤操作。

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

Answer 1

如果你有正确的“神奇”位移贴图，你就可以对图像进行像素化。请随意使用下面引用的一个(由 Zoltan Fegyver 提供)。

更新:更改了示例代码，将位移贴图图像内联为数据:URI(感谢代码 IllidanS4。)

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

更新2:您可能需要调整 feImage 和 feGaussianBlur 的大小，以避免 feTile 中出现添加伪影的错误。例如 - 这似乎效果更好:

<feGaussianBlur stdDeviation="8" in="SourceGraphic" result="smoothed" />
 <feImage width="15.4" height="15.4" 

<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>