Wie erreicht man mit JavaScript Canvas eine reibungslose Größenänderung von Bildern?

Reibungslose Größenänderung von Bildern mit JavaScript Canvas

Während JavaScript Canvas die Möglichkeit bietet, die Größe von Bildern zu ändern, kann es eine Herausforderung sein, eine glattere Größe zu erreichen. Hier ist eine Lösung, um dieses Problem zu beheben:

Downstepping für glattere Ergebnisse

Die meisten Browser verwenden lineare Interpolation zur Bildgrößenänderung, was zu einem Mangel an Glätte führt. Um bessere Ergebnisse zu erzielen, verwenden Sie Downstepping, eine Technik, bei der die Bildgröße in kleineren Schritten geändert wird. Dies entspricht in etwa dem bikubischen Algorithmus, der ein 4x4-Pixel-Raster zur Interpolation verwendet.

Implementierung

Beachten Sie den folgenden Code:

<code class="js">var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var img = new Image();

img.onload = function () {

    // Step 1 - Shrink the image to half its size
    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 - Further reduce the image by half
    octx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5);

    // Step 3 - Resize the image back to its intended dimensions
    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>

Durch die Implementierung dieses schrittweisen Ansatzes können Sie die Glätte von in der Größe geänderten Bildern mithilfe von JavaScript Canvas effektiv verbessern.

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