Menggunakan tangkapan layar JavaScript, saya ingin merekomendasikan dua komponen open source di sini: satu adalah Canvas2Image, yang dapat memprogram gambar kanvas dan pemrograman gambar PNG/JPEG/BMP; Tapi memilikinya sendiri tidak cukup. Kita perlu mengambil tangkapan layar dari DOM apa pun (setidaknya sebagian besar), yang membutuhkan HTML2Canvas, yang dapat mengubah objek DOM menjadi objek Canvas. Menggabungkan fungsi keduanya, Anda dapat mengambil tangkapan layar DOM pada halaman ke dalam gambar PNG atau JPEG, yang sangat keren.
Canvas2Image
Prinsipnya adalah menggunakan objek Canvas HTML5 untuk menyediakan API Todataurl ():
Salinan kode adalah sebagai berikut:
var strdatauri = ocanvas.todataurl ();
// mengembalikan "data: gambar/png; base64, ivborw0kggoaaaansuheugaaaamgaaadicayaaact ..."
Hasilnya adalah Base64-encoded (pada kenyataannya, gambar juga dapat ditulis ke halaman dengan cara ini dalam bentuk string), jadi kita juga membutuhkan lib yang dikodekan base64.
Namun, ada banyak cacat saat ini. Misalnya, Opera dan Safari hanya mendukung PNG, sementara Firefox jauh lebih mendukung.
Ada dua cara untuk menulis gambar ke halaman. Salah satunya adalah menghasilkan objek gambar untuk ditulis ke pohon dom halaman, yang juga merupakan metode pendukung yang lebih baik:
Salinan kode adalah sebagai berikut:
// Mengembalikan elemen <mmg> yang berisi gambar PNG yang dikonversi
var oimgpng = canvas2image.saveaspng (ocanvas, true);
Tetapi jika Anda melakukan fungsi tangkapan layar JavaScript, Anda mungkin ingin secara otomatis membuka kotak dialog "Simpan" untuk menyimpan file setelah tangkapan layar:
Salinan kode adalah sebagai berikut:
Canvas2image.saveaspng (ocanvas);
// akan meminta pengguna untuk menyimpan gambar sebagai PNG.
Memanggil metode ini akan menghasilkan aliran data dengan mimetype "gambar/oktet-stream" ke browser, tetapi dialog "simpan" tidak dapat mengenali nama sufiks yang sesuai dari gambar. File yang disimpan default disebut "xxx.part" di bawah Firefox. Ini sangat disayangkan, tetapi tampaknya tidak ada solusi yang baik.
html2canvas
Ini bertindak pada proses pemuatan DOM, mengumpulkan informasi di dalamnya, dan kemudian menggambar gambar Canvas. Dengan kata lain, itu tidak benar-benar memotong pohon DOM yang ditampilkan menjadi gambar kanvas, tetapi malah menggambar ulang gambar kanvas berdasarkan pohon DOM. Oleh karena itu, banyak gaya CSS tidak dapat diidentifikasi secara akurat dan tidak dapat dipantulkan secara akurat pada gambar.
Ada banyak batasan lain, seperti:
● JavaScript harus memiliki domain yang sama. Untuk situasi lintas domain, Anda perlu menggunakan server proxy (ada parameter dalam API yang dapat ditentukan), dan hal yang sama berlaku untuk gambar;
● Pohon DOM dalam bingkai tidak dapat ditarik secara akurat;
● Karena Anda ingin menggambar diagram kanvas, browser seperti IE8 perlu menggunakan pustaka pihak ketiga seperti FlashCanvas.
Halaman ini dapat menguji efek menggunakannya ke tangkapan layar di setiap situs web, dan efeknya cukup bagus:
Contoh Penggunaan API:
Salinan kode adalah sebagai berikut:
html2canvas (
[dom1, dom2],
{
logging: false,
Usecors: Salah,
Proxy: Salah,
Onrendered: Function (Canvas) {
// Canvas adalah objek kanvas yang ditarik
}
}
);
Untuk jenis perpustakaan kelas yang relatif niche ini, dokumentasinya sangat buruk, termasuk definisi API, yang mengharuskan membaca kode sumber dan ditulis dengan jelas dalam kode.
Selain itu, ada juga plug-in jQuery dalam paket unduhan situs ini, yang telah merangkum API ini dan dapat diabaikan.