Wie strecke ich Bilder ohne Antialiasing im 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>

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!