SVG を使用して画像モザイク効果を実現する方法について話しましょう

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

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

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

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

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

構文は比較的単純です:

{
    image-rendering: auto;              // 默认值，使用双线性（bilinear）算法进行重新采样（高质量）
    image-rendering: smooth;         // 使用能最大化图像客观观感的算法来缩放图像。让照片更“平滑”
    image-rendering: crisp-edges;  // 使用可有效保留对比度和图像中的边缘的算法来对图像进行缩放
    image-rendering: pixelated;      // 放大图像时, 使用最近邻居算法，因此，图像看着像是由大块像素组成的
}

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

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

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

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

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

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

##image-rendering:pixelated

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

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

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

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

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

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

のように見えます。

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

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

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

そして、SVG フィルターは CSS フィルターを通じて簡単に導入できます。 コードは実際には非常に単純です。SVG はフィルターを定義し、複数のフィルター層の重ね合わせ効果を使用してモザイク効果を実現します。その後、CSS フィルターを通じて導入され、任意の要素に適用できます:

<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);
}

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

あなたは具体的に何をしましたか? もちろん、あなたが質問をする人であれば、SVG の基礎を持っている必要があります。SVG フィルタに関するこれらの紹介を読むことをお勧めします。私のもの： ＃＃＃＃＃＃＃＃＃＃＃＃面白い！強力な SVG フィルター

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

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

#SVGピクセル フィルター

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

以上がSVG を使用して画像モザイク効果を実現する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。