Muat naik mampatan imej pada pelayar html5 kanvas mudah alih_html5 kemahiran tutorial-Tutorial H5-php.cn

Muat naik mampatan imej pada pelayar html5 kanvas mudah alih_html5 kemahiran tutorial

WBOY

Lepaskan： 2016-05-16 15:45:33

asal

2240 orang telah melayarinya

Apabila mereka bentuk fungsi muat naik avatar pada terminal mudah alih baru-baru ini, ia pada asalnya dimuat naik terus melalui formData dengan Walau bagaimanapun, penggunaan sebenar ialah: untuk gambar yang terlalu besar (foto yang diambil oleh telefon bimbit piksel tinggi) dsb.) Masa muat naik yang terlalu lama akan menyebabkan muat naik gagal, dan memuat naik saiz asal imej setiap kali (mampatan pemprosesan latar belakang) akan sangat mempengaruhi pengalaman pengguna, jadi saya mengkaji kaedah memampatkan imej melalui kanvas dan memuat naiknya Berikut adalah beberapa idea dan Pemikiran:

1. Kesukaran di sini ialah: disebabkan oleh mekanisme perlindungan penyemak imbas, laluan imej fail tempatan tidak boleh diperoleh secara langsung, jadi imej tempatan perlu disusun ke dalam format base64 dan kemudian dimuat naik , kodnya adalah seperti berikut:

Kod JavaScriptSalin kandungan ke papan keratan

var hasil = document.getElementById("/* Blok paparan mesej ralat */"); 🎜>
var input = document.getElementById("/* Muat naik teg fail */"); >
jika(jenis FileReader === 'undefined'){ result.innerHTML =
"
Maaf, penyemak imbas anda tidak menyokong FileReader
"; input.setAttribute(
,'dilumpuhkan'); }lain
input.addEventListener('ubah'
salah); }
bacaFail(){
var fail =
fail[0] jika(!/image/w /.test(file.type)){
makluman("Sila pastikan fail daripada jenis imej");
kembali
; } var
baharu
pembaca.readAsDataURL(fail); reader.onload = fungsi(e){
}
}
2. Pemprosesan imej dalam kanvas
Kod JavaScript

var c=document.getElementById("/* Id teg kanvas */"); >
var cct=c.getContext("2d");
img=baharu Imej(); img.src=/* Mendapat alamat pengekodan imej */
var
var
dic = tinggi / lebar; c.width = 200;
c.tinggi = 200 * dic; cxt.clearRect(0,0,200,200*dic); cxt.drawImage(img,0,0,200,200*dic)
var
finalURL = c.toDataURL();
// URL akhir yang diperolehi ialah pengekodan imej termampat, yang boleh digunakan untuk memuat naik atau terus menjana teg img
Beberapa perkara yang perlu diperhatikan di sini ialah: 1. Akan berlaku ralat semasa menyahpepijat secara setempat Sebabnya ialah masalah merentas domain dan perlu dinyahpepijat di bahagian pelayan
3. Apabila menggunakan AJAX untuk memuat naik pengekodan imej, tanda tambah dalam pengekodan akan ditukar menjadi ruang, menyebabkan kompilasi latar belakang gagal; 4. Kaedah memilih dan memuat naik kawasan imej masih dalam peringkat percubaan, dan saya akan menambah pengalaman saya nanti. Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang. Teks asal: