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

Salin kod

Kodnya adalah seperti berikut:

teg svg dan kandungan:

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:

Salin kod

Kod Seperti berikut:

Ini ialah kaedah pelaksanaan daripada svg->canvas->imej Ini masih sangat berguna Ya, kerana pelayar yang berbeza mempunyai sokongan yang berbeza untuk svg dan kanvas, sekurang-kurangnya kawalan kami akan sentiasa ada cara untuk memaparkan dengan betul, walaupun kita hanya boleh menggunakan imej pada akhirnya.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn