Startseite>Webdesign-Tutorial>HTML-Tutorial

Beispielcode für die Bildkomprimierung mit Canvas

Autor：Eve Cole Aktualisierungszeit：2025-02-01 10:36:02

Bei der ID-Kartenerkennung im Projekt muss die Base64-Formatkodierung des Bildes übertragen werden, aber die mit dem Mobiltelefon aufgenommenen Fotos sind zu groß und die Konvertierung in Base64 ist einfach schrecklich, also habe ich eine Lösung gefunden.

Beteiligte Wissenspunkte

  • Das onchange-Ereignis wird ausgelöst, nachdem die Datei hochgeladen wurde.
  • Verwenden Sie das Dateiattribut, um das hochgeladene Dateiobjekt abzurufen
  • readAsDataURL wird zur Konvertierung in die Base64-Kodierung verwendet
  • Unterscheiden Sie zwischen Leinwand und Malumgebung:
    • Leinwand: Entsprechend den Lebensläufen im Code können Sie die Breite und Höhe der Leinwand festlegen.
    • Malumgebung: Entsprechend ctx im Code können Sie fillStyle, fillRect usw. festlegen.
  • Verwenden Sie die im Lieferumfang von Canvas enthaltene Methode drawImage(), um Bilder auf die Leinwand zu zeichnen.
  • Wenn Sie die Base64 des komprimierten Bildes erhalten möchten, können Sie die mit Canvas gelieferte toDataURL()-Methode verwenden.
Vollständiger Code 

 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Kompatibler Inhalt=ie=edge> <title>Dokument</title></head><body> <input type=file onchange=loadImg(this)> <hr> <div>800×449, 544KB</div> <img src= <hr> <div>400×224, 157KB</div> <canvas></canvas> <script> // Bild hochladen Funktion loadImg(me) { let img = document.querySelector('img'); let cvs = document.querySelector('canvas'); me.files[0]; // Das Dateiobjekt abrufen // Das hochgeladene Bild nur komprimieren, wenn es größer als 500 KB ist if (file && (file.size / 1024 > 500)) { let reader = new FileReader(); .readAsDataURL( file); // In Base64-Kodierung konvertieren reader.onload = function (e) { let naturalBase64 = e.target.result; Codierung, das ist das Originalbild img.src = naturalBase64; img.onload = function () { let ratio = img.naturalWidth / img.naturalHeight; // Holen Sie sich das Originalbildverhältnis, um es im gleichen Verhältnis zu komprimieren. width = 400; cvs .height = cvs.width / ratio let ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // Auf Leinwand zeichnen // Base64 des neuen Bildes nach der Komprimierung let zipBase64 = cvs.toDataURL(); } } } } </script> </body></html>

Darstellungen

Informationen zur komprimierten Bildgröße

Hier ist eine sofort einsatzbereite Methode, bei der es sich um eine vollständige Base64-Codierung handelt

base64

Code: 

 function calcBase(baseStr){ var tag = 'base64,'; baseStr = baseStr.substring(baseStr.indexOf(tag)+tag.length); var eqTagIndex = baseStr.indexOf('='); 1?baseStr.substring(0,eqTagIndex):baseStr; var strLen = baseStr.length; var fileSize = strLen - (strLen / 8) * 2; console.log(Dateigröße: + (fileSize / 1024).toFixed(1) + 'KB');}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.

Ähnliche Artikel