Heim > Artikel > Web-Frontend > 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:
/* * 图片压缩 * 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!