Heim > Web-Frontend > CSS-Tutorial > Hauptteil

Wie strecke ich Bilder ohne Antialiasing im Browser?

DDD
Freigeben: 2024-11-03 13:25:03
Original
241 Leute haben es durchsucht

How to Stretch Images Without Antialiasing in the Browser?

Bilder ohne Antialiasing im Browser strecken

Bilder ohne Antialiasing strecken ist eine häufige Herausforderung für Webentwickler, insbesondere beim Umgang mit Pixelkunst . Traditionell wurden zum Strecken von Bildern Methoden wie CSS, JavaScript und HTML verwendet, die jedoch aufgrund von Antialiasing häufig zu unerwünschter Unschärfe führen.

CSS und moderne Browser

In den letzten Versionen von Chrome und Firefox wurde eine neue CSS-Eigenschaft namens Image-Rendering eingeführt. Indem Sie diese Eigenschaft auf „pixeliert“ setzen, ist es möglich, Antialiasing beim Strecken von Bildern zu deaktivieren. Allerdings ist diese Methode noch nicht zuverlässig, da Chrome und FF die Unterstützung dafür eingestellt haben.

Canvas-basierte Lösung

Die Canvas-API bietet eine Lösung zum Strecken von Bildern ohne Antialiasing. Der folgende Code zeigt, wie man ein skaliertes Bild auf einer Leinwand erstellt:

<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>
Nach dem Login kopieren

Dieser Code kopiert Pixeldaten von einem Quellbild auf eine skalierte Ziel-Leinwand und streckt das Bild effektiv ohne Antialiasing.

Das obige ist der detaillierte Inhalt vonWie strecke ich Bilder ohne Antialiasing im Browser?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage