Glätten geänderter Bilder mit JavaScript Canvas

Das Ändern der Größe von Bildern mit HTML Canvas bietet eine bequeme Möglichkeit, visuelle Elemente innerhalb einer Webanwendung zu bearbeiten. Der standardmäßige Größenänderungsalgorithmus kann jedoch zu verpixelten oder gezackten Bildern führen, denen die Glätte fehlt, die in Bildbearbeitungsprogrammen zu finden ist. Dieses Problem kann durch die Integration von Bildglättungstechniken behoben werden.

Ein Ansatz zur Erzielung von Glätte ist die Herunterskalierung in Schritten. Bei dieser Methode wird die Bildgröße schrittweise in kleineren Schritten geändert. Anstatt beispielsweise die Größe des Originalbilds direkt auf 50 % zu ändern, können Sie es zunächst auf 75 %, dann auf 62,5 % usw. verkleinern. Dieser inkrementelle Ansatz reduziert die Auswirkungen der Pixelinterpolation und führt zu einem glatteren Ergebnis.

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);

// ...

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);

Eine andere Methode besteht darin, die imageSmoothingQuality-Eigenschaft festzulegen, die in modernen Browsern wie Chrome unterstützt wird. Diese Eigenschaft steuert den Interpolationsalgorithmus, der für die Größenänderung von Bildern verwendet wird. Durch die Einstellung auf „hoch“ wechseln Browser möglicherweise zu einer fortschrittlicheren bikubischen Interpolationsmethode, wodurch die Bildglätte verbessert wird.

canvas.getContext('2d', { imageSmoothingQuality: "high" });

Durch schrittweises Herunterskalieren oder Anpassen der Bildglättungsqualität können Entwickler das Erscheinungsbild geänderter Bilder mit JavaScript-Canvas verbessern und so optisch ansprechende Ergebnisse erzielen.