無法將我的 svg 下載到 png

Question

誰能告訴我為什么我的 svg to 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")但盡管您的問題標記中實際上沒有畫布元素
• 您正在使用 .html() 從 div 獲取數據，但 div 中不僅有 svg，它還具有<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>