javascript - Apakah prinsip imej memampatkan kanvas?

Question

Kaedah toDataURL dalam kanvas boleh menentukan format dan kualiti pemampatan imej selepas pemampatan, contohnya, memampatkannya ke dalam format webp:

canvas.toDataURL('image/webp',quality);

toDataURLImej dikodkan menggunakan base64, dan fail sumber yang dikodkan adalah 33% lebih besar daripada sebelum pengekodan, rujuk alamat, tetapi parameter kualiti boleh menentukan kualiti pemampatan Semakin hampir kualiti pemampatan kepada 0, semakin besar imej pemampatan.

Soalan 1: Fail sumber imej dibesarkan menggunakan pengekodan base64 Bolehkah base64 memampatkan imej?

Soalan 2: Adakah pengekodan imej kecil dengan base64 hanya untuk mengurangkan permintaan http?

Soalan 3: Apakah prinsip memampatkan imej menggunakan kaedah toDataURL dalam kanvas? Apakah sebenarnya yang dilakukan oleh parameter kualiti?

Answer 1

base64 hanya menukar kod binari yang sepadan dengan imej mengikut peraturan bahawa enam bit sepadan dengan satu aksara Selepas transkod, fail lebih besar daripada fail imej asal. Walau bagaimanapun, untuk imej kecil, bait tambahan yang dihantar selepas penukaran adalah jauh lebih murah daripada mewujudkan sambungan http tambahan, jadi base64 digunakan untuk menukar kod imej kecil untuk meningkatkan kelajuan pemuatan halaman.
Bagi prinsip pemampatan imej, secara ringkasnya, perbezaan warna pada gambar dikurangkan melalui algoritma, mengorbankan kualiti gambar. Sebagai contoh, maklumat warna empat piksel dengan warna yang serupa menduduki kira-kira 16 bait sebelum pemampatan Selepas pemampatan, ia boleh dikurangkan hampir 4 kali apabila ditukar kepada satu warna. Kualiti digunakan untuk mengawal kekuatan perbezaan warna Semakin kecil nilainya, semakin besar kekuatannya. Dua piksel dengan perbezaan warna yang besar juga akan diproses akan menjadi

Answer 2

1. Tak boleh

2. ialah

3. Kawal kualiti format pengekodan imej Sebagai contoh, webp boleh melakukan pemampatan lossy, semakin kecil kehilangan dan saiz fail yang lebih besar