Beranda>Tutorial Desain Web>tutorial HTML

Contoh kode untuk kompresi gambar menggunakan kanvas

Penulis：Eve Cole Waktu Pembaruan：2025-02-01 10:36:02

Saat melakukan pengenalan kartu ID dalam proyek, pengkodean gambar dalam format base64 perlu ditransmisikan, tetapi foto yang diambil dengan ponsel terlalu besar, dan mengonversinya ke base64 sangatlah buruk, jadi saya menemukan solusinya.

Poin pengetahuan yang terlibat

  • Acara onchange dipicu setelah file diunggah.
  • Gunakan atribut files untuk mendapatkan objek file yang diunggah
  • readAsDataURL digunakan untuk mengonversi ke pengkodean base64
  • Bedakan antara kanvas kanvas dan lingkungan lukisan:
    • Kanvas: Sesuai dengan cvs dalam kode, Anda dapat mengatur lebar dan tinggi kanvas;
    • Lingkungan pengecatan: sesuai dengan ctx dalam kode, Anda dapat mengatur fillStyle, fillRect, dll.;
  • Gunakan metode drawImage() yang disertakan dengan kanvas untuk menggambar ke kanvas.
  • Jika Anda ingin mendapatkan base64 dari gambar terkompresi, Anda dapat menggunakan metode toDataURL() yang disertakan dengan kanvas.
Kode lengkap 

 <!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 -Konten yang kompatibel=ie=Edge> <title>Dokumen</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> // Unggah fungsi gambar loadImg(me) { biarkan img = document.querySelector('img'); biarkan cvs = dokumen.querySelector('kanvas'); me.files[0]; // Dapatkan objek file // Hanya kompres gambar yang diunggah jika lebih besar dari 500KB if (file && (file.size / 1024 > 500)) { let reader = new FileReader(); .readAsDataURL( file); // Konversi ke pengkodean base64 reader.onload = function (e) { biarkan naturalBase64 = e.target.result; Pengkodean, ini adalah gambar asli img.src = naturalBase64; img.onload = function() { let rasio = img.naturalWidth / img.naturalHeight // Dapatkan rasio gambar asli, untuk mengompresinya dalam rasio yang sama cvs. lebar = 400; cvs .tinggi = cvs.lebar / rasio; misalkan ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // Menggambar di atas kanvas // Base64 dari gambar baru setelah kompresi let zipBase64 = cvs.toDataURL(); </tubuh></html>

rendering

Tentang ukuran gambar terkompresi

Berikut adalah metode out-of-the-box. baseStr adalah pengkodean Base64 lengkap, yang mencakup

base64

Kode: 

 fungsi 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; - (strLen / 8) * 2; console.log(ukuran file: + (Ukuran file / 1024).toFixed(1) + 'KB');}

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.

Artikel Terkait