Kann man Bilder mit einem SVG-Filter verpixeln?

Question

Hinweis: Ich kann kein JavaScript verwenden, da dies für eine CSS Zen Garden-Art der Herausforderung ist. Bitte schlagen Sie keine JS-Bibliothek vor.

Ich habe 2 Ideen, die ich nicht voran machen auf:

1. ein SVG-Filter verwenden, um nur die dang Bild pixelate; Ich habe mit <feMorphology operator="erode"/> gespielt und den Kontrast nach oben gestanzt, aber es sieht schlecht aus.

2. Filtern Sie das Bild, um kleiner zu sein, dann skalieren Sie es mit CSS und image-rendering, um alle blocky zu sein. Der schwierige Teil ist Schritt A; Ich kann keine Filteroperationen finden, die die Eingabe skalieren.

Fehle ich etwas? Wie kann ich mit einem SVG-Filter einen "pixeligen" Effekt erzielen?

Answer 1

Sie können Bilder pixeln, wenn Sie die richtige "magische" displacementMap haben. Fühlen Sie sich frei, das unten erwähnte zu verwenden (mit freundlicher Genehmigung von Zoltan Fegyver). Beachten Sie, dass der folgende Beispielcode ein Displacementmap-Image enthält, das auf einer anderen Domain gehostet wird. Dies funktioniert bei Firefox nicht - für Produktionscode benötigen Sie das Displacement-Map-Image, das von der gleichen Domain wie die Quellgrafik-Datei geliefert wird.

(Firefox ist zunächst die Sicherheitsmaßnahmen von der bevorstehenden Filter 1.0-Spezifikation zu implementieren)

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