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

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

ピクセル アートの領域では、鮮明なエッジを維持しながら画像をより大きなサイズに拡大することは、チャレンジ。スケーリング アルゴリズムでは、不要なアンチエイリアスが発生し、シャープな線がぼやけ、望ましい美観が損なわれることがよくあります。

この問題に対処するために、次のようないくつかの方法が検討されています。

CSS テクニック

CSS、JavaScript、HTML を使用した最初の試みは効果がないことが判明し、アンチエイリアスにより画像がぼやけてしまいました。ただし、新しい CSS プロパティが解決策として登場しました:

image-rendering: pixelated;

このプロパティはアンチエイリアスを無効にし、画像に鮮明なピクセル化された外観を与えます。 Chrome、Firefox、さらには IE7 ～ 8 などの最新のブラウザでもうまく機能します。

キャンバス アプローチ

画像レンダリングをサポートしていないブラウザの場合、より複雑なCanvas APIを利用したアプローチも可能です。以下は、ソース画像からピクセルをコピーし、指定した係数で拡大縮小する JavaScript コード スニペットです。

var img = new Image();
img.src = ...;
img.onload = function() {

    // Define scaling factor
    var scale = 8;

    // Create an off-screen canvas to hold the source image
    var src_canvas = document.createElement('canvas');
    src_canvas.width = this.width;
    src_canvas.height = this.height;

    // Draw the source image to the off-screen canvas
    var src_ctx = src_canvas.getContext('2d');
    src_ctx.drawImage(this, 0, 0);

    // Get pixel data from the source canvas
    var src_data = src_ctx.getImageData(0, 0, this.width, this.height).data;

    // Create an on-screen canvas to display the scaled image
    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');

    // Copy pixels from the source canvas to the on-screen canvas while scaling
    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);
        }
    }
};

このメソッドは、ピクセルに合わせた完璧な拡大縮小を提供し、画像の元の鮮明なエッジを保持します。

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