Comment réduire la taille d'images de haute qualité à l'aide de HTML5 Canvas ?

Comment réduire des images de haute qualité via HTML5 Canvas ?

Les méthodes traditionnelles utilisant l'interpolation entraîneront une qualité d'image réduite. Pour obtenir la meilleure qualité, suivez ces étapes :

1. Désactivez l'interpolation :

canvas, img {
    image-rendering: optimizeQuality;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

2. 🎜>

Réduisez l'image en plusieurs étapes au lieu de toutes en une seule fois.

• Par exemple, réduisez l'image à 50 % de sa taille, puis réduisez-la progressivement jusqu'à la taille cible.

3. Utilisez un algorithme au niveau des pixels (algorithme de non-interpolation) :

L'algorithme d'interpolation rendra l'image floue, tandis que l'algorithme au niveau des pixels considérera chacun la contribution des pixels sources aux pixels cibles.

• Envisagez d'utiliser un algorithme développé par GameAlchemist qui offre une meilleure qualité lors de la réduction par étapes.

Exemple de code :

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!