JavaScript melaksanakan kemahiran fungsi_javascript tangkapan skrin halaman web

Menggunakan JavaScript untuk mengambil tangkapan skrin, di sini saya ingin mengesyorkan dua komponen sumber terbuka: satu ialah Canvas2Image, yang boleh memprogram lukisan Kanvas ke dalam imej PNG/JPEG/BMP tetapi ia tidak mencukupi sahaja, kita perlu memberi Untuk mengambil tangkapan skrin mana-mana DOM (sekurang-kurangnya kebanyakannya), anda memerlukan html2canvas, yang boleh menukar objek DOM menjadi objek kanvas. Menggabungkan fungsi kedua-duanya, anda boleh tangkapan skrin DOM pada halaman ke dalam imej PNG atau JPEG, yang sangat keren.

Imej Kanvas2

Prinsipnya ialah menggunakan objek kanvas HTML5 untuk menyediakan API toDataURL():

Salin kod Kod adalah seperti berikut:

var strDataURI = oCanvas.toDataURL(); // mengembalikan "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

Hasil sedemikian adalah base64 dikodkan (sebenarnya, imej juga boleh ditulis ke halaman dalam bentuk rentetan dengan cara ini), jadi kami juga memerlukan pengekodan dan penyahkodan base64 lib.

Walau bagaimanapun, terdapat banyak kelemahan semasa Contohnya, Opera dan Safari pada masa ini hanya menyokong PNG, manakala FireFox mempunyai sokongan yang lebih baik.

Terdapat dua cara untuk menjana imej dan menulisnya ke dalam halaman Satu ialah menjana objek imej dan menulisnya ke dalam pepohon DOM halaman Ini juga merupakan cara yang lebih menyokong:

Salin kod Kod adalah seperti berikut:

// mengembalikan elemen yang mengandungi imej PNG yang ditukar
var oImgPNG = Canvas2Image.saveAsPNG(oCanvas, true);

Tetapi jika anda membuat fungsi tangkapan skrin JavaScript, anda mungkin mahu membuka kotak dialog "Simpan" secara automatik untuk menyimpan fail selepas mengambil tangkapan skrin:

Salin kod Kod adalah seperti berikut:

Canvas2Image.saveAsPNG(oCanvas);
// akan menggesa pengguna untuk menyimpan imej sebagai PNG.

Memanggil kaedah ini akan menghasilkan strim data dengan mimeType "image/octet-stream" ke penyemak imbas, tetapi kotak dialog "Save" tidak dapat mengecam nama akhiran yang sesuai bagi imej tersebut Fail lalai yang disimpan di bawah FireFox ialah "xxx.part" Ini memalukan, tetapi nampaknya tiada penyelesaian.

html2kanvas

Ia bertindak pada proses pemuatan DOM, mengumpul maklumat dan kemudian melukis imej kanvas Dalam erti kata lain, ia sebenarnya tidak memotong pokok DOM yang dipaparkan kepada imej kanvas, tetapi melukis semula kanvas berdasarkan pokok DOM. gambar. Oleh itu, banyak gaya CSS tidak dapat dikenali dengan tepat dan tidak dapat digambarkan dengan tepat pada imej.

Terdapat banyak sekatan lain, seperti:

●Javascript mesti berada dalam domain yang sama Untuk situasi merentas domain, pelayan proksi perlu digunakan (terdapat parameter dalam API yang boleh dinyatakan begitu juga untuk imej; ●Pokok DOM dalam bingkai tidak boleh dilukis dengan tepat; ●Oleh kerana lukisan itu adalah kanvas, penyemak imbas seperti IE8 perlu menggunakan perpustakaan pihak ketiga seperti

FlashCanvas
.
Halaman ini boleh menguji kesan pelbagai tapak web menggunakannya untuk mengambil tangkapan skrin, dan kesannya agak baik:

Contoh penggunaan API:

Salin kod Kod adalah seperti berikut: html2kanvas(

[dom1, dom2],

{
        pengelogan: palsu,
useCORS: palsu,
​​​​proksi:​palsu,
onrendered: function(kanvas){
// Kanvas ialah objek yang dilukis
}
}
);



Untuk perpustakaan kelas khusus ini, dokumentasinya sangat lemah, termasuk definisi API Anda perlu membaca kod sumber dan kod itu ditulis dengan jelas.

Selain itu, terdapat pemalam JQuery dalam pakej muat turun tapak ini, yang merangkumi API ini dan boleh diabaikan.