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

DDD
リリース: 2024-11-03 13:25:03
オリジナル
216 人が閲覧しました

How to Stretch Images Without Antialiasing in the Browser?

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

アンチエイリアスを使用せずに画像をストレッチすることは、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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート