Baru -baru ini, untuk menyelesaikan keseluruhan catatan informasi abnormal, proyek ini telah mempelajari fungsi tangkapan layar layar penuh dari browser, sehingga pengguna dapat dengan cepat screenshot dan mengirimkannya ke administrator ketika mereka menemukan kelainan. Informasi utama yang direkam dalam catatan akhir adalah sebagai berikut.
Pengantar html2canvasDi masa lalu, kita hanya bisa mencegat gambar melalui alat tangkapan layar lainnya. Fungsi browser modern telah menjadi lebih kuat dan lebih kuat. HTML2Canvas adalah plug -in front -end, dan prinsipnya adalah untuk menggambar simpul dom di kanvas. Meskipun nyaman, ada batasan berikut:
Karena skenario penggunaan saya sederhana, itu juga ditentukan oleh diri saya sendiri, dan halaman abnormal juga ditentukan oleh diri saya sendiri, maka html2canvas sudah cukup.
Gunakan contohKutipan jQuery, html2canvas dapat digunakan, dan kodenya sederhana. Saya menggunakan versi html2canvas 0.5.0 di sini
Html2canvas (#tbl_exception), {onrendered: function (canvas) {var url = canvas.todataurl (); pngto (body);Parameter pertama adalah objek DOM ke tangkapan layar, dan parameter kedua diberikan setelah kanvas pemulihan.
| Nama | Jenis | Bawaan | Keterangan |
|---|---|---|---|
| Allowtaint | Boolean | PALSU | Apakah akan mengizinkan gambar silang asal untuk mencemari kanvas |
| latar belakang | rangkaian | #fff | Warna latar belakang kanvas, jika tidak ada yang dipisahkan dalam dom. |
| tinggi | nomor | batal | Tentukan heigt kanvas dalam piksel. |
| Letterrendering | Boolean | PALSU | Apakah akan membuat setiap huruf terpisah. |
| logging | Boolean | PALSU | Apakah akan mencatat peristiwa di konsol. |
| proxy | rangkaian | belum diartikan | URL ke proyek akan digunakan untuk memuat gambar silang-asal. |
| tainttest | Boolean | BENAR | Apakah akan menguji setiap gambar jika mencemari kanvas sebelum menggambarnya |
| Batas waktu | nomor | 0 | Batas waktu untuk memuat gambar, dalam milidetik. |
| lebar | nomor | batal | Tentukan lebar kanvas dalam piksel. |
| usecors | Boolean | PALSU | Apakah akan mencoba memuat gambar silang-asal sebagai cors servad, sebelum kembali ke proxyy |
Setelah memperkenalkannya, ketika Anda berbicara tentang masalah yang Anda temui dalam penggunaan Anda, tangkapan layar hanya dapat mencegat konten pada layar saat ini. Temukan solusinya setelah memeriksa kode sumber plug -dalam dan debugging. Kode sumber dan kode yang dimodifikasi diposting di bawah ini
Kode Sumber:
Return renderDocument (node.OwnEndocume, opsi, node.OwnEndocument.DefaultView.InnerWidth, node.OwnEndocument.DefaultView.InnerHeight, Inde X). {LOG) (Options.onrendered sudah usang, html2canvas return, adalah janji yang berisi kanvas);Ubah Kode:
// 2016-02-18 Modifikasi kode sumber untuk menyelesaikan parameter yang tidak dapat digunakan untuk menambahkan lebar kustom ke layar penuh untuk mendukung var width = options.width! = NULL? ) {LOG (Options.onrendered sudah usang, html2canvas mengembalikan janji yang berisi kanvas);Ini terutama untuk memungkinkan pengguna untuk menyesuaikan lebar dan tinggi objek DOM saat menelepon.
$ (#Btn_screen) .on (klik, fungsi () {html2canvas ($ (#tbl_exception), {height: $ (#tbl_exception) .outerheight () + 20, onrender: fuins. (Canvas) {var url = kanvas. todataurl (); // 以下代码为下载此图片功能 var triggerDownload = $ (<a>) .attr (href, url) .attr (unduh, getNowFormatDate ()+异常信息 .png) .Appendto (body); [0] .click (); MeringkaskanMelalui plug -end -in, fungsi tangkapan layar lengkap dari browser diimplementasikan. semua orang belajar.