Как cохранить svg в png/jpg/bmp c помощью javascript?
Ответ
Добавим в <body></body> блок <div id="paper"></div>, в котором будет находиться svg, и скрытый блок <canvas id="cnv" style="display:none;"></canvas>. Для примера нарисуем прямоугольник 
с помощью raphaeljs <script src="raphael-min.js"></script>:
|
1 2 3 4 5 6 7 8 9 |
var paper=Raphael("paper",700,400); // фон paper.rect(0, 0, 700, 400).attr({ fill: "#fff", stroke: "#000", "stroke-width": 3 }); // прямоугольник var rect=paper.rect(250,100,50,80,8).attr("fill","green"); |
Наша задача сохранить полученный svg в формате png/jpg/bmp. Для этого подключаем вспомогательные библиотеки canvg, canvas2img, jquery:
<script src="jquery-1.11.3.min.js"></script>
<script src="canvas2image-master/canvas2image.js"></script>
<script src="canvg-master/rgbcolor.js"></script>
<script src="canvg-master/StackBlur.js"></script>
<script src="canvg-master/canvg.js"></script>
И вызываем код для сохранения в файл:
|
1 2 3 4 5 |
canvg('cnv', document.getElementById("paper").innerHTML); var c = document.getElementById("cnv"); Canvas2Image.saveAsPNG(c); //Canvas2Image.saveAsJPEG(c); //Canvas2Image.saveAsBMP(c); |