Js utilise Canvas pour compresser les images afin d'expliquer la méthode

L'éditeur suivant vous proposera un article utilisant Js pour implémenter la fonction de compression d'image à l'aide de Canvas. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur et jetons un coup d'œil.

Le projet APP sur lequel j'ai récemment travaillé consiste à prendre des photos et à télécharger des photos avec des téléphones portables. Étant donné que les photos prises par les téléphones mobiles sont généralement relativement volumineuses, le téléchargement sera très lent. Pour cette raison, les images doivent être compressées pour optimiser la fonction de téléchargement. Voici l'implémentation spécifique :

/* 
 * 图片压缩
 * img    原始图片
 * width   压缩后的宽度
 * height  压缩后的高度
 * ratio   压缩比率 
 */
 function compress(img, width, height, ratio) {        
   var canvas, ctx, img64;
        
   canvas = document.createElement('canvas');        
   canvas.width = width;
   canvas.height = height;
        
   ctx = canvas.getContext("2d");        
   ctx.drawImage(img, 0, 0, width, height);
        
   img64 = canvas.toDataURL("image/jpeg", ratio);
        
   return img64;
 }

Ce qui précède est une fonction de compression d'image qui renvoie des données d'image au format base64. Plus la valeur du taux de compression est élevée (entre 0 et 1), plus la qualité de l'image est élevée. Il est recommandé de ne pas convertir l'image au format png, car la base64 de l'image sera beaucoup plus longue que l'image convertie en jpeg. Ce qui suit est l'appel réel :

var image = new Image();
image.src = "/img/test.jpg";
      
image.onload = function(){
  var img64 = compress(image, 500, 400, 0.7);
  document.getElementById("test").src = img64;
}

Remarque : L'appel à la méthode de compression et l'affectation du src de l'image doit être placé dans l’image à l’intérieur de la méthode onload. Parce que ce n'est qu'une fois l'image chargée qu'elle peut être compressée et convertie en base64 pour être affectée. S'il est placé en dehors de la méthode onload, le code de compression peut être invalide ou une image noire pure peut être générée.

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!