Wie kann ich die Größe von Bildern auf einer HTML5-Leinwand ändern, ohne an Qualität zu verlieren?

So ändern Sie die Größe eines Bildes in einer HTML5-Leinwand

Bei der Größenänderung eines Bildes mit JavaScript und einer HTML5-Leinwand kommt es beim Verkleinern des Bildes häufig zu einer schlechten Bildqualität. Dieses Problem tritt auf, weil der standardmäßige Größenänderungsalgorithmus in den meisten Browsern die Nearest Neighbor-Interpolation verwendet, was zu verpixelten Ergebnissen führt.

Um eine bessere Größenänderungsqualität zu erzielen, können Sie einen fortschrittlicheren Algorithmus wie Lanczos-Resampling implementieren, der die Bildqualität beibehält Schärfe und Glätte.

Hier ist eine JavaScript-Implementierung des Lanczos-Resampling-Algorithmus zur Bildgrößenänderung in einem Leinwand:

function thumbnailer(elem, img, sx, lobes) {
    // ... (code remains the same as in the reference answer)
}

Mit diesem Algorithmus können Sie die Größe von Bildern in hervorragender Qualität ändern und das pixelige Erscheinungsbild vermeiden. Zum Beispiel:

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); // You can adjust the lobes parameter for different levels of sharpness
    document.body.appendChild(canvas);
};

Durch die Verwendung dieses Codes können Browser qualitativ hochwertige Bilder mit veränderter Größe erzeugen, was ein besseres Benutzererlebnis gewährleistet und die Integrität Ihrer visuellen Darstellungen bewahrt.

Das obige ist der detaillierte Inhalt vonWie kann ich die Größe von Bildern auf einer HTML5-Leinwand ändern, ohne an Qualität zu verlieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!