Comment lisser des images redimensionnées avec JavaScript Canvas ?

Lissage des images redimensionnées avec JavaScript Canvas

Le redimensionnement des images avec un 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é est 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.

<code class="javascript">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);</code>

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 réglant sur "élevé", les navigateurs peuvent passer à une méthode d'interpolation bicubique plus avancée, améliorant ainsi la fluidité de l'image.

<code class="javascript">canvas.getContext('2d', { imageSmoothingQuality: "high" });</code>

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. images avec un canevas JavaScript, créant des résultats visuellement attrayants.

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!