Question

已解决（有点）：问题似乎不是由于代码中的任何内容造成的。因为它在任何Web浏览器中运行良好。这个问题与我在电子外壳中运行它的事实有关。至于为什么那不起作用，我不知道。

我的问题不是如何将SVG保存为PNG，而是为什么这个库不能用于非常具体的情况。该库适用于将我的许多图表转换为PNG，但有一个图表似乎没有成功保存PNG。这是代码的一部分，似乎是发生问题的中心。

//Create image object
var image = new Image();


image.src = uri;
  image.onload = function() {
      var canvas = document.createElement('canvas');
      canvas.width = image.width;
      canvas.height = image.height;
      var context = canvas.getContext('2d');
      context.drawImage(image, 0, 0);
      var a = document.createElement('a');
      a.download = name;
      a.href = canvas.toDataURL('image/png');
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    };

变量uri的值似乎在所有情况下都是正确的，包括那些最终不会保存的值。我知道这是因为我已将URI变量值保存到文本文件中。然后使用可以查看此类图像格式的在线资源。

我还检查过a.download = name;和a.href = canvas.toDataURL('image/png');是否正确。它们在所有情况下都是如此。

我所拥有的最后一条信息是，在弹出的保存窗口中不起作用的情况下，文件名为＆＃34; download＆＃34;而不是值a.download = name。

这让我相信，无论发生什么错误都超出了这段代码的范围，也许在a.click();被调用时发生的任何事情都会出错，但我不知道如何调试它。

这是有效图像的SVG标记：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="3680" height="2080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 920 520">
<defs>
    <style type="text/css"><![CDATA[]]>
    </style>
</defs>
<g transform="translate(40,40)">
    <line class="xaxis" x1="0" y1="460" x2="880" y2="460" stroke="gray"></line>
    ...
    ...
    ...
 </g>
 </svg>

这是在不起作用的情况下的SVG标记：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="2080" height="2080" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 520 520">
<defs>
    <style type="text/css"><![CDATA[]]>
    </style>
</defs>
<g transform="translate(40,40)">
    <circle cx="201.5" cy="201.5" r="203" stroke="black" stroke-width="0.25" fill="none"></circle>
    ...
    ...
</g>
</svg>

将SVG保存到PNG的问题

0 个答案: