javascript - Quel est le principe de compression d'images sur Canvas?

Question

La méthode toDataURL dans canvas peut spécifier le format et la qualité de compression de l'image après compression, par exemple, la compresser au format webp :

canvas.toDataURL('image/webp',quality);

toDataURLL'image est encodée en base64 et le fichier source encodé est 33 % plus grand qu'avant l'encodage, reportez-vous à l'adresse, mais le paramètre de qualité peut spécifier la qualité de compression. Plus la qualité de compression est proche de 0, plus l'image est élevée. compression.

Question 1 : En utilisant l'encodage base64 pour agrandir le fichier source de l'image, la base64 peut-elle compresser l'image ?

Question 2 : L'encodage de petites images en base64 est-il uniquement destiné à réduire les requêtes http ?

Question 3 : Quel est le principe de compression d'images à l'aide de la méthode toDataURL dans canvas ? À quoi sert exactement le paramètre qualité ?

Answer 1

base64 convertit uniquement le code binaire correspondant à l'image selon la règle selon laquelle six bits correspondent à un caractère. Après transcodage, le fichier est plus volumineux que le fichier image d'origine. Cependant, pour les petites images, les octets supplémentaires transmis après la conversion sont bien moins coûteux que l'établissement d'une connexion http supplémentaire. Base64 est donc utilisé pour transcoder les petites images afin d'améliorer la vitesse de chargement des pages.
Quant au principe de compression d'image, pour faire simple, la différence de couleur sur une image est réduite grâce à des algorithmes, sacrifiant ainsi la qualité de l'image. Par exemple, les informations de couleur de quatre pixels avec des couleurs similaires occupent environ 16 octets avant compression, après compression, elles peuvent être réduites de près de 4 fois lorsqu'elles sont converties en une seule couleur. La qualité est utilisée pour contrôler la force de la différence de couleur. Plus la valeur est petite, plus la force est grande. Deux pixels avec une grande différence de couleur seront également traités. Naturellement, plus le fichier sera petit après avoir été compressé, plus la qualité de l'image sera mauvaise. le sera

Answer 2

1. Non

2. est

3. Contrôlez la qualité du format d'encodage de l'image. Par exemple, webp peut effectuer une compression avec perte. Plus la qualité est élevée, plus la perte est faible et plus la taille du fichier est grande.