Comment le rééchantillonnage de Lanczos peut-il améliorer le redimensionnement des images du canevas HTML5 ?

Implémentation du redimensionnement d'image de haute qualité dans HTML5 Canvas

Aperçu du problème

Lorsque vous tentez de réduire la taille d'une image à l'aide de JavaScript et d'un élément de canevas, le résultat l’image présente souvent des artefacts indésirables et des pixels flous. Bien qu'il existe un prototype qui utilise le même code qu'un site Web de manipulation d'images réputé, les résultats sont toujours médiocres.

Solution

Les techniques de rééchantillonnage traditionnelles utilisées par les navigateurs et les méthodes de canevas existantes ne parviennent pas à produire des résultats élevés. -des vignettes de qualité. Pour remédier à cette lacune, nous introduisons un algorithme de rééchantillonnage basé sur lanczos et implémenté en JavaScript. Cette méthode filtre les données d'image à l'aide d'un noyau configurable, ce qui entraîne une réduction de taille visuellement attrayante.

Classe Thumbnailer

La classe Thumbnailer encapsule le processus de rééchantillonnage basé sur Lanczos. Il s'initialise avec un élément de canevas, l'image d'origine et la largeur réduite souhaitée.

En coulisses, la méthode process1 effectue une analyse ligne par ligne de l'image source, calculant des moyennes pondérées pour chaque pixel de destination. . La méthode process2 reconstruit l'image rééchantillonnée et la restitue sur l'élément canvas.

Algorithme JavaScript personnalisé

La clé de cette implémentation réside dans la fonction lanczosCreate, qui génère un noyau Lanczos pour le filtrage. Cette fonction peut être ajustée en ajustant le nombre de lobes du noyau, offrant ainsi un compromis entre performances et qualité d'image.

Extrait de code

Pour démontrer le rééchantillonnage amélioré, une section modifiée de l'original le code est fourni :

img.onload = function() {
    var canvas = document.createElement("canvas");
    new thumbnailer(canvas, img, 188, 3); // Adjust kernel lobes as desired
    document.body.appendChild(canvas);
};

Limitations et compatibilité

Malgré une qualité d'image supérieure, ce La technique de rééchantillonnage basée sur JavaScript nécessite beaucoup de calculs et peut présenter des problèmes de performances sur les appareils plus lents. De plus, il n'est pas clair si l'implémentation est couverte par la licence GPL2, car elle emprunte des concepts à Anrieff Gallery Generator.

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!