Не могу скачать мой svg для png

Question

Может ли кто-нибудь сказать мне, почему мой svg для png не загружается? Что я делаю не так? Я не могу найти решение о том, как загрузить svg в png. Это мои библиотеки или мой код?

function save(){ 
 
    $("#editor_save").click(function() { 
 
     // the canvg call that takes the svg xml and converts it to a canvas 
 
     canvg('canvas', $("#editor").html()); 
 

 
     // the canvas calls to output a png 
 
     var canvas = document.getElementById("canvas"); 
 
     var img = canvas.toDataURL("image/png"); 
 
     // do what you want with the base64, write to screen, post to server, etc... 
 
    }); 
 
}

<script src="canvg-master/canvg.js"></script> 
 
<div id="editor" class="chart"> 
 
    <svg width="100" height="100"> 
 
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="red" /> 
 
    </svg><br /> 
 
    <button id="editor_save" onclick="save">Save</button> 
 
</div>

Answer 1

Вы имеете целый ряд вопросов:

• canvg как предполагает его название работы на холсте, вы даже вызов getElementById("canvas") в код, который вы» ve скопирован с this answer, но, несмотря на то, что у вас на самом деле нет элемента холста в разметке вашего вопроса
• Вы используете .html(), чтобы получить данные из d IV, но DIV не просто Г в нем, он также имеет <br /> и кнопку
• вы обернутый код, который вы скопировали в воротах функции, но функция сохранения не вызывается из любой
• вы не включили правильные сценарии холста правильно
• вы не включенные JQuery, но вы с помощью этой библиотеки

В моем исправленном коде я оставил холст DIV видны, чтобы вы сп увидеть его работу. Обычно холст будет display:none, хотя вы бы сделали что-то еще с объектом img.

$("#editor_save").click(function() { 
 

 
// the canvg call that takes the svg xml and converts it to a canvas 
 
    canvg('canvas', $("#svg")[0].outerHTML); 
 

 
// the canvas calls to output a png 
 
var canvas = document.getElementById("canvas"); 
 
var img = canvas.toDataURL("image/png"); 
 
// do what you want with the base64, write to screen, post to server, etc... 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="http://canvg.github.io/canvg/rgbcolor.js"></script> 
 
<script src="http://canvg.github.io/canvg/StackBlur.js"></script> 
 
<script src="http://canvg.github.io/canvg/canvg.js"></script> 
 
<div id="editor" class="chart"> 
 
<svg id="svg" width="100" height="100"> 
 
    <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="red" /> 
 
</svg> 
 
<br /> 
 
<button id="editor_save">Save</button> 
 
</div> 
 
<div> 
 
    <canvas id="canvas" width="1000px" height="600px"></canvas> 
 
</div>