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!