Contoh kode untuk html5 menggunakan kanvas untuk mengompresi gambar

Dua hari yang lalu, saya membuat fungsi untuk mengonversi gambar ke base64 untuk diunggah. Saya menemukan bahwa jika gambar base64 terlalu besar, permintaan akan menjadi sangat lambat, dan waktu akan habis, jadi saya berpikir untuk mengompresi gambar. sebelum mengunggah, lalu mengunggahnya ke latar belakang, yang dapat meningkatkan efisiensi secara signifikan. Berikut beberapa kendala yang ditemui saat menggunakan kanvas untuk mengompresi gambar. Kode lengkapnya akan diberikan di akhir artikel.

Jebakan pertama adalah ketika mengompresi gambar, lebar dan tinggi gambar itu sendiri tidak diperoleh, dan diberikan lebar dan tinggi tetap 600*480 Karena di ponsel, saat mengunggah gambar, gambar tersebut berukuran beberapa megabyte, jadi ini Tidak masalah. Masalah terjadi saat memodifikasi avatar, gambar yang diupload pada saat pengujian semuanya gambar kecil, kemudian gambar yang dikompres tidak ditampilkan secara utuh, dan sebagian besar kosong dan tinggi gambar.

Kesalahan kedua. Cara mengatasi kesalahan pertama adalah dengan mendapatkan lebar dan tinggi gambar itu sendiri setelah gambar dimuat (onload), dan kemudian menetapkannya ke kanvas jebakannya adalah pemuatan gambar tidak sinkron, ketika Anda kembali, apa yang dikembalikan mungkin tidak ditentukan alih-alih base64 terkompresi yang Anda perlukan. Solusinya disini adalah membuat Promise baru, lalu mengembalikan hasil resolusi(), dan mendapatkan hasilnya saat memanggil .then().

• toDataURL('image/png', 0.9); Mengonversi gambar yang digambar oleh kanvas menjadi base64. Parameter pertama mewakili jenis gambar, dan parameter kedua mewakili kejelasan gambar.
• Tentukan ukuran maksimum. Jika lebar dan tinggi gambar itu sendiri lebih besar dari ukuran ini, sisi terbesar akan diperkecil, dan sisi lainnya akan diatur sesuai dengan proporsi gambar, lalu diatur ke kanvas.

miniImage.js

 ekspor fungsi asinkron default miniSize(imgData, maxSize = 200*1024){ // const maxSize = 200 * 1024; if(imgData && imgData.files && imgData.files.size < maxSize) { return imgData.url; .log('----------------Gambar terkompresi------------------'); const canvas = document.createElement('canvas'); biarkan img = Gambar baru(); img.src = imgData.url; biarkan ctx = canvas.getContext('2d'); 'load', function(){ //Ukuran asli gambar let originWidth = this.width; let originHeight = this.height; // Batas ukuran maksimal let maxWidth = 400, maxHeight = 400; // Ukuran target biarkan targetWidth = originWidth, targetHeight = originHeight; // Ukuran gambar melebihi batas 400x400 if (originWidth > maxWidth || originHeight > maxHeight) { if (originWidth / originHeight > maxWidth / maxHeight) { // Lebih lebar, batasi ukuran sesuai lebar targetWidth = maxWidth; = Math.round(maxWidth * (originHeight / originWidth)); } else { targetHeight = maxHeight; targetWidth = Math.round(maxHeight * (originWidth / originHeight)); ctx.drawImage(img, 0, 0, targetWidth, targetHeight); kanvas.toDataURL('gambar/png', 0,9); tekad(base64 }, salah);

Panggilan:

tes.js

 onChangeImg = async (file, tipe, indeks) => { biarkan sebelumnya = this.props.imagePicker.files; if(type === add) { biarkan hasil = miniSize(files[files.length-1]); Gunakan .then() untuk memanggil menunggu hasil.then(res => { previous.push({url: res}); });else if(type === delete) { sebelumnya.splice(index,1); } tunggu ini.props.dispatch({ ketik: 'imagePicker/saveImage', muatan: { file: sebelumnya } }) }

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