Js verwendet Canvas zum Komprimieren von Bildern, um die Methode zu erläutern

Der folgende Editor bringt Ihnen einen Artikel über die Verwendung von Js zur Implementierung der Bildkomprimierungsfunktion mithilfe von Canvas. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Folgen wir dem Editor und schauen wir uns das aktuelle APP-Projekt an. Da die mit Mobiltelefonen aufgenommenen Bilder normalerweise relativ groß sind, ist das Hochladen sehr langsam. Aus diesem Grund müssen Bilder komprimiert werden, um die Upload-Funktion zu optimieren. Das Folgende ist die spezifische Implementierung:

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 das in JPEG konvertierte Bild. Das Folgende ist der eigentliche Aufruf:

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

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 der Bildquellenzuweisung muss im Bild innerhalb der Onload-Methode platziert werden. Denn erst nachdem das Bild geladen wurde, 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.

Das obige ist der detaillierte Inhalt vonJs verwendet Canvas zum Komprimieren von Bildern, um die Methode zu erläutern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!