2016-05-26 6 views
1

注:私はJavaScriptを使用できません。これは、CSS Zen Gardenの挑戦のためのものです。 JSライブラリを提案しないでください。SVGフィルタで画像をピクセル化できますか?

私は上の前進をしていないよ2つのアイデアがあります:

  1. だけ一顧の画像をピクセル化するSVGフィルタを使用します。私は<feMorphology operator="erode"/>で遊んでいて、後にコントラストを打ちましたが、それは悪く見えます。

  2. 画像をフィルタリングし、CSSとimage-renderingを使用して拡大縮小してください。難しい部分はステップAです。入力を拡大/縮小するフィルタ操作が見つかりません。

私に何か不足していますか? SVGフィルタを使用して「ピクセル化」エフェクトを取得するにはどうすればよいですか?

答えて

5

右の「マジック」ディスプレースメントマップがある場合は、画像をピクセル化することができます。下に参照されているものを自由に使用してください(Zoltan Fegyverの礼儀です)。以下のサンプルコードでは、別のドメインにホストされたディスプレースメントマップイメージがあることに注意してください。これはFirefoxでは機能しません。プロダクションコードの場合は、ソースグラフィックのファイルと同じドメインから配信されたディスプレースメントマップイメージが必要です。

(Firefoxは今後のフィルター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>

+0

フム。 WebKitsではうまく動作しますが、Firefoxでは単なるぼかしです。 – Tigt

+0

これは、displacementMapがクロスドメインイメージを使用しているからです。ソースと同じドメインでdisplacementMapイメージをホストすると、うまく動作するはずです。 (Firefoxはフィルタセキュリティ仕様を実装しています - Webkitはありません) –

+0

ああ、それは素晴らしいです。それを他の人のための答えに入れることができれば、私はうれしく受け入れます! – Tigt

関連する問題