Beheben von Glättungsproblemen bei der Größenänderung von Bildern mithilfe der Leinwand in JavaScript

Die Größenänderung von Bildern mithilfe der Leinwand in JavaScript kann manchmal zu auffälligen gezackten Kanten oder Unschärfen führen. Um eine reibungslose Größenänderung zu erreichen, kann eine Technik namens „Down-Stepping“ eingesetzt werden.

In den meisten Browsern wird standardmäßig lineare Interpolation zur Größenänderung verwendet. Bei der bikubischen Interpolation, die glattere Ergebnisse liefert, wird eine größere Pixelumgebung verwendet. Browser implementieren die bikubische Interpolation jedoch normalerweise nicht direkt.

Beim Downstepping-Ansatz wird die Bildgröße wiederholt geändert, wobei jedes Mal ein kleinerer Skalierungsfaktor verwendet wird. Dadurch wird das Verhalten der bikubischen Interpolation nachgeahmt, während weiterhin die lineare Interpolation im zugrunde liegenden Browser verwendet wird.

Der folgende Codeausschnitt zeigt, wie Downstepping implementiert wird:

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {

    // set size proportional to image
    canvas.height = canvas.width * (img.height / img.width);

    // step 1 - resize to 50%
    var oc = document.createElement('canvas'),
        octx = oc.getContext('2d');

    oc.width = img.width * 0.5;
    oc.height = img.height * 0.5;
    octx.drawImage(img, 0, 0, oc.width, oc.height);

    // step 2
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // step 3, resize to final size
    ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);
}
img.src = "//i.imgur.com/SHo6Fub.jpg";

Dieser Code erstellt eine temporäre Leinwand, oc, und ändert iterativ die Größe des Bildes, um es schließlich auf die endgültige Leinwand zu zeichnen. Bei jedem Größenänderungsschritt wird eine lineare Interpolation verwendet, durch deren Kombination nähert sich der Gesamteffekt jedoch einer bikubischen Interpolation an.

Die imageSmoothingQuality-Eigenschaft kann auch verwendet werden, um die Glättungsqualität in Chrome zu steuern, was eine direktere Möglichkeit zur Erzielung von Glätte bietet , wird aber noch nicht in allen Browsern unterstützt.