Js+Canvas effectue la compression d'image

Cette fois, je vais vous apporter Js+Canvas pour faire une compression d'image. Quelles sont les précautions pour faire une compression d'image avec Js+Canvas Ce qui suit est un cas pratique. . Levez-vous et jetez un œil.

/* 
 * 图片压缩
 * 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");            
   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. Voici 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 doivent être placés dans la méthode onload de l'image. 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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

angularJS+Ionic pour le téléchargement d'images sur terminal mobile (avec code)

Implémentation de Particles.js Animation d'arrière-plan dynamique de particules

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!