Saya ingin mengubah SVG menjadi gambar bitmap (seperti JPEG, PNG, dll.) Melalui JavaScript.
javascript
svg
Zain
sumber
sumber
Jawaban:
Berikut ini cara melakukannya melalui JavaScript:
sumber
toImage()
dan jugadownload()
untuk gambar yang diunduh otomatis.solusi jbeard4 bekerja dengan baik.
Saya menggunakan Raphael SketchPad untuk membuat SVG. Tautkan ke file di langkah 1.
Untuk tombol Simpan (id svg adalah "editor", id kanvas adalah "kanvas"):
sumber
<svg>...</svg
tetapi fungsi jquery html () tidak menambahkan tag svg, jadi kode ini berfungsi untuk saya tetapi saya perlu mengedit canvg langsung kecanvg('canvas', '<svg>'+$("#editor").html()+'</svg>');
$(selector).html()
orang tua dari elemen svg Anda , itu akan berhasilhtml()
pembungkus, atau membuatsvg
tag induk secara manual - yang bahkan mungkin memiliki atribut yang Anda tinggalkan dengan peretasan ini. Cukup gunakan$(svg_elem)[0].outerHTML
memberi Anda sumber penuh svg dan isinya. Hanya mengatakan ...Ini tampaknya berfungsi di sebagian besar browser:
sumber
.msToBlob()
Solusi untuk mengkonversi SVG ke gumpalan URL dan gumpalan URL ke gambar png
sumber
Saya menulis Kelas ES6 ini yang melakukan Pekerjaan.
Inilah cara Anda menggunakannya
Jika Anda menginginkan versi JavaScript vanilla, Anda bisa menuju ke situs web Babel dan mengubah kode di sana.
sumber
Inilah solusi sisi server berdasarkan PhantomJS. Anda dapat menggunakan JSONP untuk melakukan panggilan lintas domain ke layanan gambar:
https://github.com/vidalab/banquo-server
Sebagai contoh:
http: // [host] /api/https%3A%2F%2Fvida.io%2Fdocuments%2FWgBMc4zDWF7YpqXGR/viewport_width=980&viewport_height=900&delay=5000&selector=%23canvas
Kemudian Anda dapat menampilkan gambar dengan tag img:
Ini berfungsi di seluruh browser.
sumber
ubah
svg
untuk mencocokkan elemen Andasumber
Uncaught TypeError: Failed to execute 'serializeToString' on 'XMLSerializer': parameter 1 is not of type 'Node'.
Svg
untukpng
dapat dikonversi tergantung pada kondisi:svg
dalam format jalur SVG (string) :new Path2D()
dan tetapkansvg
sebagai parametercanvas.toDataURL()
sebagaisrc
.contoh:
Perhatikan bahwa
Path2D
tidak didukung diie
dan sebagian didukung di tepi. Polyfill memecahkan itu: https://github.com/nilzona/path2d-polyfillsvg
gumpalan dan gambar di atas kanvas menggunakan.drawImage()
:Deskripsi yang bagus: http://ramblings.mcpher.com/Home/excelquirks/gassnips/svgtopng
Perhatikan bahwa dalam contoh Anda akan mendapatkan pengecualian pada tahap canvas.toDataURL (); Itu karena IE memiliki batasan keamanan yang terlalu tinggi dan memperlakukan kanvas sebagai hanya baca setelah menggambar di sana. Semua browser lain hanya membatasi jika gambar asal lintas.
canvg
perpustakaan JavaScript. Ini adalah perpustakaan yang terpisah tetapi memiliki fungsi yang berguna.Suka:
sumber
Baru-baru ini saya menemukan beberapa pustaka penelusuran gambar untuk JavaScript yang memang mampu membangun perkiraan yang dapat diterima terhadap bitmap, baik ukuran dan kualitasnya. Saya sedang mengembangkan perpustakaan JavaScript dan CLI ini:
https://www.npmjs.com/package/svg-png-converter
Yang menyediakan API terpadu untuk semuanya, mendukung browser dan node, tidak tergantung pada DOM, dan alat baris perintah.
Untuk mengkonversi gambar logo / kartun / seperti itu melakukan pekerjaan dengan sangat baik. Untuk foto / realisme beberapa penyesuaian diperlukan karena ukuran output dapat tumbuh banyak.
Ini memiliki taman bermain meskipun saat ini saya sedang mengerjakan yang lebih baik, lebih mudah digunakan, karena lebih banyak fitur telah ditambahkan:
https://cancerberosgx.github.io/demos/svg-png-converter/playground/#
sumber