Kod idea penukaran antara kanvas svg dan gambar dalam kemahiran tutorial html5_html5

Baru-baru ini, terdapat keperluan untuk menukar sebahagian daripada kandungan halaman web kepada teks, menukar halaman web asal kepada pdf sebagai lampiran, dan menghantarnya kepada bos melalui e-mel. Memandangkan ini adalah tapak web jenis laporan, pembangunan kawalan dalam HTML5 tidak lebih daripada kanvas atau svg Di sini kami mempunyai beberapa kawalan menggunakan svg, dan svg tidak boleh dipaparkan secara normal dalam kandungan e-mel FoxMail, jadi kami mempertimbangkan untuk menukar svg kepada kanvas untuk. display. , tetapi kemudiannya mendapati bahawa kanvas tidak dapat dipaparkan secara normal Pada akhirnya, saya tidak mempunyai pilihan selain menukar tag kanvas ke dalam format imej sekali lagi, yang akhirnya menyelesaikan masalah. Berikut adalah pengenalan ringkas kepada proses pelaksanaan. Berikut ialah teg svg

var svgHtml = svgContainer.innerHTML();

Untuk menukar svg kepada kanvas anda perlu menggunakan canvg pemalam Google, yang boleh dimuat turun dari tapak web rasmi atau dipetik secara langsung dari jauh

Langkah seterusnya ialah memanggil kaedah canvg(canvasId,svgHtml) pemalam untuk menukar kepada kanvas Parameter pertama kaedah ini ialah id teg kanvas dan parameter kedua secara semula jadi adalah kandungan teg svg Dengan cara ini, svg ditukar kepada kanvas

Kemudian tukarkan kanvas menjadi gambar, yang lebih mudah

var imgSrc = document.getElementById(. canvasId).toDataUrl("image/png");//Ini sebenarnya sedang menukar Kanvas ditukarkan kepada gambar dan semua data kandungan gambar itu dikembalikan Gambar boleh dipaparkan seperti berikut: