Cara menggunakan html2canvas untuk mengubah kode html menjadi gambar

html2canvas adalah perpustakaan sumber terbuka yang sangat terkenal untuk mengambil tangkapan layar dari halaman web browser.

Penggunaan html2canvas sangat sederhana. Cukup meneruskan elemen DOM dan kemudian mendapatkan kanvas melalui callback:

1.html2canvas menghasilkan konten gambar kanvas dengan menguraikan gaya elemen sebenarnya, sehingga memiliki persyaratan untuk tata letak aktual dan tampilan visual elemen. Jika Anda ingin mengambil tangkapan layar lengkap, yang terbaik adalah memisahkan elemen dari aliran dokumen (seperti position:absolute)

2. Gambar kanvas yang dihasilkan secara default sangat buram pada perangkat retina. Memprosesnya menjadi gambar 2x dapat mengatasi masalah ini:

 var w = $(#code).width(); var h = $(#code).height();//Atur lebar dan tinggi kanvas menjadi 2 kali lebar dan tinggi wadah var canvas = document .createElement(kanvas ); kanvas.lebar = w * 2; kanvas.tinggi = h * 2; kanvas.gaya.lebar = w + px; kanvas.gaya.tinggi = h + var konteks = canvas.getContext(2d);//Kemudian skalakan kanvas dan gandakan gambar untuk menggambar di kanvas konteks.scale(2,2); kanvas) { ... } });

1.struktur kode HTML

 <section class=share_popup id=html2canvas> <p>Penggunaan html2canvas sangat sederhana, cukup meneruskan elemen DOM dan kemudian mendapatkan kanvas melalui callback</p> <p><img src=1.jpg >< /p> <p>Penggunaan html2canvas sangat sederhana, cukup meneruskan elemen DOM dan kemudian mendapatkan kanvas melalui callback</p> </section>

Struktur kode 2.js

 var str = $('#html2canvas'); //console.log(str); html2canvas([str.get(0)], { dirender: fungsi (kanvas) { var gambar = kanvas.toDataURL(gambar/png) ; var pHtml = <img src=+gambar+ />; $('#html2kanvas').html(pHtml);

Di atas adalah pengenalan editor tentang cara menggunakan html2canvas untuk mengubah kode html menjadi gambar. Saya harap ini dapat membantu Anda. Jika Anda memiliki pertanyaan, silakan tinggalkan pesan kepada saya dan editor akan membalas Anda tepat waktu. Saya juga ingin mengucapkan terima kasih kepada semua orang atas dukungan Anda terhadap situs seni bela diri VeVb!