不能下載我的png

Question

誰能告訴我爲什麼我的svg不能下載？我究竟做錯了什麼？我似乎無法找到如何將我的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")通話已從this answer複製，但儘管您實際上並沒有在您的問題標記中使用畫布元素
• 您正在使用.html（）從d iv但div並不只有svg，它還有一個<br />和按鈕
• 您已將您已複製的代碼包裝在保存功能中，但保存功能未從任何地方調用
• 你不包含正確的帆布腳本正常
• 你不包括jQuery的已經但是你使用該庫

在我糾正代碼中，我已經離開了畫布DIV可見，所以你看到cn的它的工作。雖然Te canvas通常會是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>