Js+Canvas führt eine Bildkomprimierung durch

Dieses Mal bringe ich Ihnen Js+Canvas, um die Bildkomprimierung durchzuführen. Was sind die Vorsichtsmaßnahmen für die Bildkomprimierung mit Js+Canvas? Das Folgende ist ein praktischer Fall . Stehen Sie auf und schauen Sie nach.

/* 
 * 图片压缩
 * 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;
 }

Das Obige ist eine Bildkomprimierungsfunktion, die Bilddaten im Base64-Format zurückgibt. Je größer der Wert des Komprimierungsverhältnisses (zwischen 0 und 1) ist, desto höher ist die Bildqualität. Es wird empfohlen, das Bild nicht in das PNG-Format zu konvertieren, da die Base64-Datei des Bildes viel länger ist als die von JPEG. Hier ist der eigentliche Aufruf:

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;
}

Hinweis: Der Aufruf der Komprimierungsmethode und die Bild-Quellenzuweisung müssen in der Onload-Methode des Bildes platziert werden. Denn erst nachdem das Bild geladen ist, kann es komprimiert und zur Zuweisung in Base64 konvertiert werden. Wenn es außerhalb der Onload-Methode platziert wird, ist der Komprimierungscode möglicherweise ungültig oder es wird möglicherweise ein rein schwarzes Bild generiert.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

angularJS+Ionic für das Hochladen von Bildern auf mobile Endgeräte (mit Code)

Particles.js-Implementierung Partikeldynamische Hintergrundanimation

Das obige ist der detaillierte Inhalt vonJs+Canvas führt eine Bildkomprimierung durch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!