JavaScript を使用せずに SVG を使用して畫像モザイク効果を?qū)g現(xiàn)するにはどうすればよいですか?以下の記事で詳しく解説していますので、お役に立てれば幸いです。

以前、公開アカウントで友人の Vajoy による記事を転送しました - CSS を上手に使って畫像モザイクを様式化する 。

中心となるのは、CSS で興味深いプロパティ --image-rendering を使用することです。これは、畫像のスケーリング アルゴリズムを設(shè)定するために使用できます。 [推奨される學(xué)習(xí): css ビデオ チュートリアル ]

畫像レンダリングとは何ですか?

CSS プロパティ image-rendering は、畫像スケーリング アルゴリズムを設(shè)定するために使用されます。これは、要素自體、要素の他の屬性の畫像、および子要素に適用されます。

構(gòu)文は比較的単純です:

{
????image-rendering:?auto;??????????????//?默認(rèn)值，使用雙線性（bilinear）算法進(jìn)行重新采樣（高質(zhì)量）
????image-rendering:?smooth;?????????//?使用能最大化圖像客觀觀感的算法來縮放圖像。讓照片更“平滑”
????image-rendering:?crisp-edges;??//?使用可有效保留對(duì)比度和圖像中的邊緣的算法來對(duì)圖像進(jìn)行縮放
????image-rendering:?pixelated;??????//?放大圖像時(shí),?使用最近鄰居算法，因此，圖像看著像是由大塊像素組成的
}

その中でも、image-rendering:pixelated はより興味深いもので、低精度の畫像をモザイク化できます。

たとえば、300px x 300px の畫像があり、それを 30px x 30px に変換するとします。

# 歪んだ畫像を 300px x 300px

に拡大しましょう:

##これをもとに、この畫像の設(shè)定を行います

image-rendering:pixelated、モザイク畫像を取得できます:

<img src="pic.jpeg?30x30" />

img?{
????width:?300px;
????height:?300px;
????image-rendering:?pixelated
}

##image-rendering:pixelated

モザイク効果を?qū)g現(xiàn)する際の制限<strong></strong>OK、それでは、なぜ最初に縮小してから拡大し、その後で image-rendering:Pixelated を使用する必要があるのでしょうか?比較を行って、image-rendering:pixelated

を元の畫像に直接設(shè)定してみましょう:

image-rendering を元の畫像に直接設(shè)定します:Pixelated

は畫像をさらにギザギザにするだけで、モザイク効果を直接生成しません。

これは、

image-rendering:Pixelated の説明とも一致します。 畫像を拡大する場(chǎng)合、最近傍アルゴリズムが使用されるため、畫像は次のように構(gòu)成されているように見えます。ピクセルの大きなブロック

。

拡大されぼやけた畫像に基づいてのみ、image-rendering:pixelated を使用してモザイク畫像を取得できます。

CSS を使用して畫像を縮小してから拡大しますか?

それでは、明確な元の畫像しかなく、CSS を使用してモザイク効果を取得したいとします。それは実現(xiàn)可能でしょうか?このアイデアに従って、次のように考えることができます。

CSS を使用して畫像を縮小してから拡大し、その後 image-rendering:pixelated

を使用できますか? ＃＃＃＃＃＃＃＃＃いいえ。 WEB 上の寫真は Photoshop のスマート オブジェクトのようなものです。サイズは自由に変更できます (たとえば、何度も拡大してぼやけるなど)。ただし、最終的に寫真を元のサイズに戻すと、寫真は元のサイズに戻ります。元のサイズです。(歪みなしで)

のように見えます。

そのため、元の畫像が 1 枚しかないときにぼやけた畫像を取得したい場(chǎng)合は、Canvas を使用する必要があり、少し面倒です。モザイク効果が欲しいだけです。

モザイク効果を?qū)g現(xiàn)するための SVG フィルター オーバーレイ

これは、SVG フィルターの複數(shù)のレイヤーを使用する、今日の主役である

SVG フィルター

につながります。実はモザイク効果フィルターはとても簡(jiǎn)単に実現(xiàn)できます。

そして、SVG フィルターは CSS フィルターを通じて簡(jiǎn)単に導(dǎo)入できます。 コードは実際には非常に単純です。SVG はフィルターを定義し、複數(shù)のフィルター層の重ね合わせ効果を使用してモザイク効果を?qū)g現(xiàn)します。その後、CSS フィルターを通じて導(dǎo)入され、任意の要素に適用できます:

<img src="任意無需縮放的原圖.png" alt="">
<svg>
??<filter id="pixelate" x="0" y="0">
????<feFlood x="4" y="4" height="2" width="2"/>
????<feComposite width="8" height="8"/>
????<feTile result="a"/>
????<feComposite in="SourceGraphic" in2="a" operator="in"/>
????<feMorphology operator="dilate"radius="5"/>
??</filter>
</svg>

img?{
????width:?300px;
????height:?300px;
????filter:?url(#pixelate);
}

このようにして、モザイク効果が得られます。

この効果を使用したいだけの場(chǎng)合は、全體を理解する必要さえありません。 SVG

あなたは具體的に何をしましたか? もちろん、あなたが質(zhì)問をする人であれば、SVG の基礎(chǔ)を持っている必要があります。SVG フィルタに関するこれらの紹介を読むことをお?jiǎng)幛幛筏蓼埂Ｋ饯韦猡危?＃＃＃＃＃＃＃＃＃＃＃＃面白い！強(qiáng)力な SVG フィルター

• 興味深い!不規(guī)則な境界線の生成スキーム
• 衝撃的! SVG フィルターを使用して絵文字を作成できますか?
モザイクを?qū)g裝するための CSS/SVG の制限

もちろん、モザイクを?qū)g裝するための CSS/SVG フィルターの制限は次のとおりです。ユーザーが元の畫像を表示できる場(chǎng)合、このメソッドをクライアント上で直接使用することは、元の畫像を直接公開することと同じです。

CSS/SVGフィルター方式はフロントエンドで畫像にモザイクをかけるため、元の畫像が必要となります。

もちろん、上記の 2 つの畫像モザイク技術(shù)を使用して、次のような単純なインタラクティブ効果を作成することもできます。上記のデモと SVG フィルターのすべてのコードは、次の 2 つのデモで見つけることができます:

CodePen デモ - 畫像レンダリング ピクセル化アプリケーション

#SVGピクセル フィルター

元のアドレス: https://www.cnblogs.com/coco1s/p/16134088.html
• 著者: ChokCoco
• (學(xué)習(xí)ビデオ共有: Web フロントエンド
)

以上がSVG を使用して畫像モザイク効果を?qū)g現(xiàn)する方法について話しましょうの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。