Contoh kode untuk Canvas dan kompresi gambar

Saya telah menulis artikel tentang pemrosesan gambar Canvas sebelumnya. Hari ini kita akan berbicara tentang cara menggunakan Canvas untuk mengompres gambar.

Selanjutnya saya akan menjelaskan proses spesifik kompresi gambar Canvas dengan contoh spesifik.

1. Dapatkan file lokal

 <!--HTML--><tipe masukan=id file=pilih-img />

 // JSvar pilihImg = document.getElementById(choose-img); pilihImg.onchange = function(e){ var file = this.files[0]; urutannya, sama di bawah)};

Caranya sangat sederhana, cukup dapatkan file lokal melalui tombol bertipe file.

 <!--HTML--><div id=result></div>

 // JSvar result = document.getElementById(result); // Digunakan untuk menampilkan hasil keluaran gambar, atau pesan kesalahan if(/image/.test(file.type)){ // Menentukan apakah jenis file adalah gambar // ... }else{ result.innerHTML = '<span style=color: red;>Jenis file salah! </span>';}

 var img = new Image(), // Membuat objek gambar untuk menempatkan gambar asli reader = new FileReader();reader.readAsDataURL(file); pembaca .onload = function(){ img.src = ini.hasil; Langsung tetapkan string gambar base64 ke document.body.insertBefore(img,chooseImg) di src objek Gambar; // Sisipkan gambar keluaran sebelum tombol file img.onload = function(){ // ... }; };

 var kanvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var konteks = canvas.getContext('2d');

Catatan: Ukuran kanvas sama dengan lebar dan tinggi gambar masukan.

 konteks.drawImage(img,0,0,kanvas.lebar,kanvas.tinggi);

 <!--HTML-->Rasio kompresi gambar: <input id=rate type=number min=0 max=100 /> %

 // JSvar rate = document.getElementById(rate).value || 100; // Masukkan rasio kompresi gambar, defaultnya adalah 100% var imgUrl = canvas.toDataURL(file.type,rate/100); parameter adalah tipe gambar keluaran, dan yang kedua adalah hasil rasio kompresi.innerHTML = 'Setelah kompresi: <img src='+ imgUrl +' />'; Tampilkan gambar terkompresi di hasil img.style.display = 'none'; // Sembunyikan gambar asli

Keluarkan lagi gambar yang digambar di Canvas dalam format base64.

 <!--HTML-->Rasio kompresi gambar: <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=result></div >

 // JSvar selectImg = document.getElementById(choose-img), hasil = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0]; file.type)){ var img = Gambar baru(), pembaca = FileReader baru(); reader.readAsDataURL(file); function(){ img.src = ini.hasil; document.body.insertBefore(img,chooseImg); img.onload = function(){ var canvas = document.createElement('canvas'); ; kanvas.tinggi = img.clientHeight; var konteks = kanvas.getContext('2d'); konteks.drawImage(img,0,0,kanvas.lebar,kanvas.tinggi); var rate = document.getElementById(rate).value ||. result.innerHTML = 'Setelah kompresi: <img src='+ imgUrl +' />'; img.style.display = 'tidak ada'; }; }; } else{ result.innerHTML = '<span style=color: red;>Jenis file salah! </span>';

Setelah pengujian, ditemukan bahwa efek kompresi gambar format JPEG paling baik melalui Canvas, sedangkan efek kompresi PNG tidak terlihat jelas, dan terkadang menjadi lebih besar.

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