Comment obtenir un redimensionnement fluide des images avec JavaScript Canvas ?

Redimensionnement fluide des images avec JavaScript Canvas

Lors du redimensionnement d'images à l'aide de Canvas, il est courant de rencontrer des problèmes de fluidité. Contrairement aux logiciels comme Photoshop ou aux navigateurs qui utilisent des algorithmes tels que bicubique ou bilinéaire, Canvas n'a pas de fonctionnalités de lissage intégrées.

Pour obtenir un redimensionnement fluide, vous pouvez utiliser la réduction. Alors que les navigateurs ont généralement recours à l'interpolation linéaire lors du redimensionnement de l'image, la réduction utilise l'interpolation bilinéaire pour produire des résultats plus raffinés. En décomposant le processus en plusieurs étapes, vous pouvez approximer les résultats bi-cubiques.

Considérez l'extrait de code 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 = "image.jpg";</code>

La première étape réduit l'image à 50 % de son image d'origine. taille. La deuxième étape réduit à nouveau l'image intermédiaire, ce qui entraîne une réduction finale de 25 %. Enfin, la troisième étape ajuste l'image à la taille souhaitée.

En répétant le processus de réduction d'échelle plusieurs fois, vous vous rapprochez efficacement de la technique d'interpolation bi-cubique plus fluide. Cette approche confère à Canvas la possibilité de redimensionner les images avec une fluidité améliorée, se rapprochant de la qualité observée dans les logiciels et les navigateurs.

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!