画像を拡大縮小するときにアンチエイリアスを無効にする方法

画像の拡大縮小時にアンチエイリアスを無効にする

背景

画像を拡大するとき、アンチエイリアスは多くの場合、ピクセル間の滑らかな遷移を作成し、ギザギザのエッジを減らすために使用されます。 。ただし、場合によっては、特にピクセル アートやブロック状のグラフィックスを扱う場合、ハード エッジを保持することが望ましい場合があります。

CSS ソリューション

従来、CSS にはアンチエイリアスを無効にするための特定のフラグがありませんでした。ただし、いくつかのベンダー固有のプロパティでこの機能を提供できます。

• image-rendering: -moz-crisp-edges; (Firefox)
• 画像レンダリング: -o-crisp-edges; (Opera)
• 画像レンダリング: -webkit-optimize-contrast; (Chrome および Safari)
• -ms-interpolation-mode: 最近傍; (IE8 )

これらのプロパティを画像に適用すると、シャープなエッジが優先され、アンチエイリアスの効果が軽減されます。

実装

すべての背景画像のアンチエイリアスを無効にするにはCSS スタイルシートでは、次を使用しますcode:

img {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

非 CSS ソリューション

CSS は最も簡単なソリューションを提供しますが、背景画像では常に機能するとは限りません。このような場合は、JavaScript や画像編集ツールなどの代替方法を検討できます。

• HTMLCanvasElement: imageSmoothingEnabled パラメーターを false に設定してdrawImage() メソッドを使用します。
• ImageMagick: -filter NearestNeighbor オプションを画像。

以上が画像を拡大縮小するときにアンチエイリアスを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。