Question

注意：我不能使用JavaScript，因为这是针对CSS Zen Garden的挑战。请不要建议JS库。

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

使用SVG滤镜只是对dang图像进行像素化处理;我一直在和<feMorphology operator="erode"/>一起玩，并在之后打破对比，但看起来很糟糕。
将图像过滤为较小，然后使用CSS和image-rendering将其缩小为全部块状。困难的部分是步骤A;我找不到任何缩放输入的过滤操作。

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

Answer 1

如果你有正确的“魔法”displaMap，你可以像素化图像。随意使用下面提到的那个（由Zoltan Fegyver提供）。请注意，下面的示例代码具有托管在其他域上的置映贴图图像。这对Firefox不起作用 - 因此对于生产代码，您需要从与源图形文件相同的域提供的置换贴图图像。

（Firefox首先实施即将推出的Filters 1.0规范中的安全措施）

<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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32648/pixelate-map-5.png" 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滤镜对像素进行像素化处理吗？

1 个答案: