Résoudre les problèmes de lissage lors du redimensionnement d'images à l'aide de Canvas en JavaScript

Le redimensionnement d'images à l'aide de Canvas en JavaScript peut parfois entraîner des bords irréguliers ou un flou visibles. Pour obtenir des redimensionnements fluides, une technique connue sous le nom de down-stepping peut être utilisée.

Dans la plupart des navigateurs, l'interpolation linéaire est utilisée par défaut pour le redimensionnement. L'interpolation bi-cubique, qui produit des résultats plus fluides, implique l'utilisation d'un plus grand voisinage de pixels. Cependant, les navigateurs n'implémentent généralement pas directement l'interpolation bi-cubique.

L'approche descendante consiste à redimensionner l'image à plusieurs reprises, en utilisant à chaque fois un facteur d'échelle plus petit. Cela imite le comportement de l'interpolation bi-cubique tout en utilisant l'interpolation linéaire dans le navigateur sous-jacent.

L'extrait de code suivant montre comment implémenter la réduction :

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

Ce code crée un canevas temporaire, oc, et redimensionne l'image de manière itérative, pour finalement la dessiner sur le canevas final. Chaque étape de redimensionnement utilise une interpolation linéaire, mais en les combinant, l'effet global se rapproche d'une interpolation bi-cubique.

La propriété imageSmoothingQuality peut également être utilisée pour contrôler la qualité du lissage dans Chrome, offrant ainsi un moyen plus direct d'obtenir une fluidité. , mais il n'est pas encore pris en charge dans tous les navigateurs.