ブラウザでアンチエイリアシングを行わずに画像を引き伸ばすにはどうすればよいですか?

ブラウザでアンチエイリアスを使用せずに画像をストレッチする

アンチエイリアスを使用せずに画像をストレッチすることは、Web 開発者、特にピクセル アートを扱う場合に直面する一般的な課題です。 。従来、画像を拡大するには CSS、JavaScript、HTML などの方法が使用されてきましたが、アンチエイリアスによる望ましくないぼやけが生じることがよくあります。

CSS および最新のブラウザ

Chrome と Firefox の最近のバージョンでは、image-rendering と呼ばれる新しい CSS プロパティが導入されました。このプロパティをピクセル化に設定すると、画像を引き伸ばすときにアンチエイリアスを無効にすることができます。ただし、Chrome と FF ではサポートが終了しているため、この方法はまだ信頼できません。

キャンバスベースのソリューション

Canvas API は、画像をストレッチするためのソリューションを提供します。アンチエイリアスなしで。以下のコードは、キャンバス上にスケーリングされたイメージを作成する方法を示しています。

<code class="javascript">var img = new Image();
img.onload = function() {

    var scale = 8;

    var src_canvas = document.createElement('canvas');
    src_canvas.width = this.width;
    src_canvas.height = this.height;

    var src_ctx = src_canvas.getContext('2d');
    src_ctx.drawImage(this, 0, 0);
    var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;

    var dst_canvas = document.getElementById('canvas');
    dst_canvas.width = this.width * scale;
    dst_canvas.height = this.height * scale;
    var dst_ctx = dst_canvas.getContext('2d');

    var offset = 0;
    for (var y = 0; y < this.height; ++y) {
        for (var x = 0; x < this.width; ++x) {
            var r = src_data[offset++];
            var g = src_data[offset++];
            var b = src_data[offset++];
            var a = src_data[offset++] / 100.0;
            dst_ctx.fillStyle = 'rgba(' + [r, g, b, a].join(',') + ')';
            dst_ctx.fillRect(x * scale, y * scale, scale, scale);
        }
    }
};</code>

このコードは、ピクセル データをソース イメージからスケーリングされた宛先キャンバスにコピーし、アンチエイリアスなしで効果的にイメージを引き伸ばします。

以上がブラウザでアンチエイリアシングを行わずに画像を引き伸ばすにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。