Comment obtenir un redimensionnement fluide des images à l'aide de JavaScript Canvas ?

Redimensionner en douceur les images avec JavaScript Canvas

Bien que le canevas JavaScript offre la possibilité de redimensionner les images, obtenir une fluidité peut être un défi. Voici une solution pour résoudre ce problème :

Réduction progressive pour des résultats plus fluides

La plupart des navigateurs utilisent une interpolation linéaire pour le redimensionnement des images, ce qui entraîne un manque de fluidité. Pour obtenir de meilleurs résultats, utilisez la réduction, une technique qui consiste à redimensionner l'image par incréments plus petits. Cela se rapproche de l'algorithme bi-cubique, qui utilise une grille de 4x4 pixels pour l'interpolation.

Implémentation

Considérez le code suivant :

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

En mettant en œuvre cette approche par étapes, vous pouvez améliorer efficacement la fluidité des images redimensionnées à l'aide du canevas JavaScript.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!