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

Question

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

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

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

我错过了什么吗？如何使用 SVG 滤镜获得 "pixelated" 效果？

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

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

Can one pixelate images with an SVG filter?

css

svg

svg-filters