Comment obtenir des images redimensionnées fluides avec HTML Canvas ?

Lisser les images avec Canvas

Redimensionner les images avec le canevas HTML est une tâche courante, mais obtenir une fluidité peut être un défi. Bien que les logiciels de retouche d'images comme Photoshop proposent divers algorithmes d'interpolation tels que bicubique et bilinéaire, il n'est pas clair si Canvas prend en charge ces options.

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

L'extrait de code ci-dessus redimensionne une image à l'aide de Canvas, mais l'image redimensionnée manque de fluidité.

Pour résoudre ce problème, le concept de réduction peut être utilisé. Les navigateurs utilisent généralement l'interpolation linéaire pour le redimensionnement, ce qui peut entraîner un alias. En divisant le processus de réduction d'échelle en plusieurs étapes, on peut obtenir un résultat plus proche de l'interpolation bi-cubique.

Considérez le code modifié suivant :

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

Ce code effectue plusieurs étapes de redimensionnement successivement, en réduisant progressivement la taille de l'image et en appliquant une interpolation. Le résultat est une image avec des bords plus lisses et une qualité visuelle améliorée.

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!