Menggunakan html2canvas untuk mengimplementasikan tangkapan layar browser harus diterapkan di lingkungan server.
memengaruhihtml2canvas dapat mengambil screenshot di sisi browser melalui JS murni, namun akurasi screenshot perlu ditingkatkan, dan beberapa css tidak dapat dikenali, sehingga gaya layar asli tidak dapat ditampilkan dengan sempurna di kanvas.
/*Tidak mungkin untuk menghilangkan luapan multi-baris, ini hanya dapat disembunyikan*/ .book_inf{ position: relative; overflow: tersembunyi; text-overflow: ellipsis display: -webkit-box; : 2; - orientasi kotak webkit: vertikal; Browser yang didukung /*Parameter: * #screenshots ID elemen tangkapan layar yang diperlukan, fungsi yang akan dijalankan setelah mengambil tangkapan layar, * warna latar item konfigurasi backgroundColor * kanvas adalah kanvas terakhir yang dikembalikan setelah mengambil tangkapan layar */fungsi screenshotsImg(){ html2canvas (document.querySelector( #screenshot),{ backgroundColor: 'transparent',//Atur latar belakang menjadi transparan}).then(canvas => { canvasTurnImg(canvas) //Metode konversi format gambar tersimpan}); } Item konfigurasi yang tersedia| Nama parameter | jenis | nilai bawaan | menggambarkan |
|---|---|---|---|
| izinkanTaint | boolean | PALSU | Apakah akan mengizinkan gambar lintas asal mencemari kanvas---mengizinkan gambar lintas asal |
| latar belakang | rangkaian | #fff | Warna latar belakang kanvas, jika tidak ada yang ditentukan di DOM. Setel tidak terdefinisi untuk transparan---warna latar belakang kanvas, jika putih default tidak disetel, ini jebakan, saya mengubahnya menjadi warna latar belakang. |
| tinggi | nomor | batal | Tentukan tinggi kanvas dalam piksel. Jika nol, render dengan tinggi penuh jendela.---pengaturan tinggi kanvas |
| rendering surat | boolean | PALSU | Apakah akan merender setiap huruf secara terpisah. Diperlukan jika spasi huruf digunakan.---Berguna saat spasi huruf diatur |
| pencatatan | boolean | PALSU | Apakah akan mencatat peristiwa di konsol.---Informasi keluaran di console.log() |
| proksi | rangkaian | belum diartikan | Url ke proxy yang akan digunakan untuk memuat gambar lintas asal. Jika dibiarkan kosong, gambar lintas asal tidak akan dimuat.---Alamat proxy |
| uji noda | boolean | BENAR | Apakah akan menguji setiap gambar jika itu mencemari kanvas sebelum menggambarnya---apakah akan menguji gambar sebelum dirender |
| batas waktu | nomor | 0 | Batas waktu untuk memuat gambar, dalam milidetik. Menyetelnya ke 0 tidak akan menghasilkan batas waktu.---Penundaan pemuatan gambar, penundaan default adalah 0, dalam milidetik |
| lebar | nomor | batal | Tentukan lebar kanvas dalam piksel. Jika nol, render dengan lebar penuh jendela.---lebar kanvas |
| gunakanCORS | boolean | PALSU | Apakah akan mencoba memuat gambar lintas asal saat CORS disajikan, sebelum kembali ke proksi--proksi lintas asal |
1. Ekstrak metadata gambar langsung dari kanvas
// Ekspor gambar ke format png var type = 'png'; var imgData = canvas.toDataURL(type);
2. Ubah tipe mime menjadi image/octet-stream untuk memaksa browser mengunduh secara langsung.
/** * Dapatkan mimeType * @param {String} ketikkan tipe mime yang lama * @kembalikan tipe mime yang baru */var _fixType = function(type) { type = type.toLowerCase().replace(/jpg/i , 'jpeg'); var r = type.match(/png|jpeg|bmp|gif/)[0]; return 'image/' + r;}; data, ganti mime typeimgData = imgData.replace(_fixType(type),'image/octet-stream');3. Unduh gambar ke lokal
/** * Simpan file secara lokal * @param {String} data Data gambar yang akan disimpan secara lokal * @param {String} nama file nama file */var saveFile = function(data, nama file){ var save_link = document.createElementNS ('http ://www.w3.org/1999/xhtml', 'a'); save_link.href = data; save_link.download = nama file; document.createEvent('MouseEvents'); event.initMouseEvent('klik', benar, salah, jendela, 0, 0, 0, 0, 0, salah, salah, salah, salah, 0, simpan_link.dispatchEvent( acara);}; // Nama file yang diunduh var nama file = 'baidufe_' + (Tanggal baru()).getTime() + '.' downloadsaveFile(imgData,namafile);Kasus
Kasus
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.