javascript - 将 SVG 导出为 PNG chop Canvas

Question

这个问题已经有答案了:

奥 git _a (2 个回答)

已关闭 3 年前。

我想转换屏幕上的 SVG 并在按下按钮时将其下载为 png 文件。我发现一篇文章( Image being clipped when copied to HTML canvas using drawImage )除了一些奇怪的原因外，它的工作原理是，当我拥有的 SVG 为 800 x 300 时，它会将输出 chop 为 300 x 150。

你能帮我将 Canvas 大小设置为我的 SVG 大小，以便可以在不 chop 的情况下导出它吗？

我将原始链接插入到我在原始帖子中使用的 Save inline SVG as JPEG/PNG/SVG 的 jfiddle。

在 HTML 部分，我将 svg 替换为我的 svg，如下所示:

<svg id="mysvg" width="800" height="300"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
   <text x="50" y="60" fill="black" 
      font-family="Arial, Helvetica, sans-serif" 
      font-size="28">Revenue and Expenses</text>
   <line x1="150" y1="80" x2="150" y2="320" 
      style="stroke:rgb(155, 144, 144);stroke-width:5" />

  <script type="application/ecmascript"> 
    <![CDATA[
      var mysvg = document.getElementById("mysvg");

      var chartStart = [152, 84, 152]
      var chartWidth = [100,64,36]
      var chartNames = ["$7,110 Revenue", "$4,539 Expenses","$2,571 Profit"]
      var chartColor = ["#28CE6D","#DF3456","#4DC7EC"]
      var num = chartNames.length;

      while (num-- > 0)
      {
       var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
        rect.setAttribute("x", chartStart[num]);
        rect.setAttribute("y", [num] * 70 + 100);
        rect.setAttribute("width", chartWidth[num]);
        rect.setAttribute("height", "50");
        rect.setAttribute("style", "fill:" + chartColor[num] + ";stroke:black;stroke-width:0;opacity:1");

     var label = document.createElementNS("http://www.w3.org/2000/svg", "text");
         label.setAttribute("x", "280");
         label.setAttribute("y", [num] *70 + 130);
         label.setAttribute("style", "fill:black");
         label.setAttribute("font-family", "Arial, Helvetica, sans-serif");
         label.setAttribute("font-size","18");
     var txt = document.createTextNode(chartNames[num]);
         label.appendChild(txt);

         mysvg.appendChild(rect);
         mysvg.appendChild(label);
       } 
  ]]>
   </script>
 </svg>

我得到的图像是:

http://jsfiddle.net/LznLjxq7/

我期望的图像是:

更新

我在添加的评论中尝试了悉尼的建议

<svg id="mysvg" viewbox="0 0 800 300"

在阅读 Mozilla 文章后，将 Javascript 行更改为 Sydney 行的修改版本:

ctx.drawImage(this, 0, 0, this.width, this.height);

但这会产生完整图像，而不是 chop 图像，但尺寸为 300 x 150，这已将其缩放为质量非常低的图像。

如何使输出为 800 x 300，而不是仅控制用于创建图像的输入的大小？谢谢

Answer 1

这似乎只是正确设置 Canvas 宽度和高度的问题。我尝试了您的 setHeight() 和 setWidth() 方法，它们对我不起作用，但内联宽度和高度解决了问题，无需任何其他添加!

<svg id="mysvg" width="800" height="300"
  xmlns="http://www.w3.org/2000/svg" version="1.1">
<!-- stuff -->
</svg>
<canvas width="800" height="300" id="canvas"></canvas>