HTML Berdasarkan tangkapan layar implementasi kanvas

Saya ingat pernah berbagi pada semua orang sebelumnya, menjelaskan solusi screenshot berbasis JS. Jadi kali ini saya berencana untuk menulis ide berbagi dengan semua orang. Ini hanya demo kecil yang sangat sederhana. Menurut alamat kode PO biasa.

Rendering

Pemikiran keseluruhan

• Atur kunci pintasan start/end
• Setelah start, DOM ditarik ke kanvas untuk menutupi antarmuka DOM asli
• Tambahkan area screenshot mouse simulasi kanvas
• Tambahkan kanvas untuk menggambar antarmuka browser yang sesuai dengan area tangkapan layar mouse (dicegat dari kanvas pertama)
• Simpan gambar yang dicegat

Karena tombol pintas dapat menyebabkan konflik, tombol pintas tidak dapat membatasi jumlah tombol pintas, sehingga bentuk array pada parameter pertama dilewatkan.

 Fungsi Screenshot (QuickStartKey, EndKey) {// Kompatibilitas Pertimbangkan untuk Tidak Menggunakan ... Extended String Var KeyLength = QuickStartKey.Length var waskeytrigger = {} var cantshot = false ... q uickstartkey. Array Parameter Traversing Iskeytrigger [item] = false // Semua tombol dalam array default tidak dipicu}) $ ('html'). = Endkey) {...} lain jika (! Cantstartshot) {iskeytrigger [keycode] = true var nottrigger = objek.keys (iskeytrigger). Untuk dipicu}) if (nottrigger.length === 0) {// Tidak ada kunci pintasan yang perlu dipicu.

Jika Anda mengadopsi metode asli, Anda dapat merujuk pada pengenalan DOM di bawah MDN. Hal yang paling sulit adalah Anda perlu membuat elemen yang terlibat dalam gambar SVG yang berisi XML. Cara menghitung DOM yang ditampilkan di browser saat ini dan mengekstraknya sebenarnya yang paling membosankan. Bahkan, penulis tidak memiliki ide yang baik untuk mengimplementasikan satu secara manual =. =, Jadi saya memilih perpustakaan html2canvas ini untuk menyelesaikan ini. Metode panggilan umum adalah sebagai berikut:

 Function beginshot (cantstartshot) {if (cantstartshot) {html2canvas (document.body, {onrendered: function (canvas) {// Dapatkan gambar kanvas dengan antarmuka yang sama})}}}}

Realisasi tempat ini awalnya dimaksudkan untuk menggunakan Canvasapi asli, tetapi melibatkan masalah di dalamnya. dihapus saat memicu mousemove. Untuk mensimulasikan proses menggambar real -time. Penulis yang tidak berdaya tidak menemukan metode menggunakan Canvas Native API. Di sini penulis menggunakan perpustakaan Canvas berbasis JQ yang disebut JCanvas. Ini memenuhi kebutuhan penulis, dan realisasinya adalah sebagai berikut:

 $ ('#' +canvasid) .mousedown (function (e) {$ (# +canvasid) .removelayer (layername) // hapus lapisan layer layer sebelumnya += 1 startx = that._calculatingxy (e) .x // CHANGTASI Posisi mouse starty = that._calculatingxy (e) .y isshot = true $ (#+canvasid) .addlayer ({type: 'rectangle', // persegi panjang ... nama: layname, nama layer x: startx, y : Starty, lebar: 1, tinggi: 1})}). = that._calculatingXy (e) .y var width = movex -startx var height = movey -starty $ (#+canvasid) .addlayer ({type: 'rectangle', ... name: Lay: lay ername, fromcenter: false , X: startx, y: starty, lebar: lebar, tinggi: tinggi}) $ (#+canvasid) .drayers ();

 var canvasResult = document.getElementById ('canvasResult') var ctx = canvasResult.getContext (2d); , 0, 0, lebar, tinggi) var dataUrl = canvasResult.todataurl (gambar/png);

Di antara mereka, gambar dicegat dengan gambar, dan kemudian gambar dikonversi menjadi pengkodean base64 menggunakan metode todataurl

 Unduh fungsi (el, nama file, href) {el.attr ({'download': filename, 'href': href})} ... downloadfile ($ ('. Ok'), 'screenshot' + matematika .random ( .random () .tring ().

Di antara mereka, atribut unduhan tag A dapat diunduh secara langsung ketika pengguna mengklik.

 <Script src = https: //cdn.bootcss.com/jquery/3.2.1/jqury.min.js> </script> <skrip src = https: //cdn.bootcss.com/jcanvas/16.7.3/ jCanvas.min.js> </script> <skrip src = https: //cdn.bootcss.com/html2canvas/0.5.0-html2canvas.min.js> </script>

 Screenshot ([16, 65], 27) // Mulailah Kunci Pintasan untuk menggeser+A;

Tempat yang paling menjijikkan dalam artikel (Dom menulis dengan kanvas dan lapisan kanvas) menggunakan dua perpustakaan untuk implementasi, masing -masing. Bahwa itu masih sedikit. Esensi

Di atas adalah semua isi artikel ini.