Wie erzielt man mit HTML Canvas eine gleichmäßige Größenänderung von Bildern?

Bilder mit Canvas glätten

Die Größenänderung von Bildern mit HTML-Canvas ist eine häufige Aufgabe, aber das Erreichen einer Glätte kann eine Herausforderung sein. Während Bildbearbeitungssoftware wie Photoshop verschiedene Interpolationsalgorithmen wie bikubisch und bilinear bietet, ist unklar, ob Canvas diese Optionen unterstützt.

<code class="js">var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
canvas.width = 300;
canvas.height = 234;
ctx.drawImage(img, 0, 0, 300, 234);
document.body.appendChild(canvas);</code>

Das obige Codefragment ändert die Größe eines Bildes mithilfe von Canvas, aber dem geänderten Bild mangelt es an Glätte.

Um dieses Problem anzugehen, kann das Konzept des Down-Steppings eingesetzt werden. Browser nutzen typischerweise lineare Interpolation zur Größenänderung, was zu Aliasing führen kann. Indem man den Herunterskalierungsprozess in mehrere Schritte aufteilt, kann man ein Ergebnis erzielen, das näher an der bikubischen Interpolation liegt.

Bedenken Sie den folgenden modifizierten Code:

<code class="js">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";</code>

Dieser Code führt mehrere Größenänderungsschritte durch nacheinander, wobei die Bildgröße schrittweise verringert und eine Interpolation angewendet wird. Das Ergebnis ist ein Bild mit glatteren Kanten und verbesserter visueller Qualität.

Das obige ist der detaillierte Inhalt vonWie erzielt man mit HTML Canvas eine gleichmäßige Größenänderung von Bildern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!