Lissage des images redimensionnées avec JavaScript Canvas

Le redimensionnement des images avec le canevas HTML offre un moyen pratique de manipuler des visuels dans une application Web. Cependant, l'algorithme de redimensionnement par défaut peut donner lieu à des images pixellisées ou irrégulières, dépourvues de la fluidité des logiciels de retouche d'images. Ce problème peut être résolu en incorporant des techniques de lissage d'image.

Une approche pour obtenir une fluidité consiste à la réduction d'échelle par étapes. Cette méthode consiste à redimensionner l'image progressivement, en utilisant des incréments plus petits. Par exemple, au lieu de redimensionner directement l'image originale à 50 %, vous pouvez d'abord la réduire à 75 %, puis à 62,5 %, et ainsi de suite. Cette approche incrémentielle réduit l'impact de l'interpolation des pixels, ce qui donne un résultat plus fluide.

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

// ...

ctx.drawImage(oc, 0, 0, oc.width * 0.5, oc.height * 0.5,
    0, 0, canvas.width, canvas.height);

Une autre méthode consiste à définir la propriété imageSmoothingQuality, qui est prise en charge dans les navigateurs modernes tels que Chrome. Cette propriété contrôle l'algorithme d'interpolation utilisé pour le redimensionnement de l'image. En le définissant sur « élevé », les navigateurs peuvent passer à une méthode d'interpolation bicubique plus avancée, améliorant ainsi la fluidité de l'image.

canvas.getContext('2d', { imageSmoothingQuality: "high" });

L'utilisation de la réduction d'échelle par étapes ou l'ajustement de la qualité du lissage de l'image permet aux développeurs d'améliorer l'apparence des images redimensionnées avec le canevas JavaScript, créant ainsi des résultats visuellement attrayants.