javascript - 将 svg <image> 转换为 canvas 到 png/Jpeg 不起作用

Question

我是 Stackoverflow 的新手，也是编程的新手。

在我的项目中，我们动态生成差异图表..

我的要求是为仪表图表添加导出为 jpeg 功能。 作为我项目的一部分，我们添加了用于动态生成每个图表的下载按钮。当用户单击下载按钮时，它会显示 JPEG 图像图标，当用户单击该 JPEG 图像图标时，必须下载图像..

我的图表代码是:

<div id="podContent_0" class="widget-body chart">
<div id="gaugeCount_0" align="center" style="overflow: hidden;">
<div id="glossyGauge0" style="float: left;padding-right: 5px;" widgetid="glossyGauge0">
<div class="dojoxGaugeContent" style="width: 150px; height: 150px;">
<svg overflow="hidden" width="150" height="150">
........
........
</svg>
</div>
</div>
<div id="glossyGauge1" style="float: left;padding-right: 5px;" widgetid="glossyGauge1">
<div class="dojoxGaugeContent" style="width: 150px; height: 150px;">
<svg overflow="hidden" width="150" height="150">
........
........
</svg>
</div>
</div>
<div id="glossyGauge2" style="float: left;padding-right: 5px;" widgetid="glossyGauge2">
<div class="dojoxGaugeContent" style="width: 150px; height: 150px;">
<svg overflow="hidden" width="150" height="150">
........
........
</svg>
</div>
</div>
</div>
</div>

所以我的图表代码包含 svg 标签。我是这个 SVG 新手..

我已使用 canvg 来实现此功能

但是出现如下错误:错误:元素“parsererror”尚未实现。 canvg.js:2619

我的代码是:

我创建了一个 Canvas

<canvas id="myCanvas" width="400px" height="200px"></canvas>

和

var svg = document.getElementById('#podContent_'+i).innerHTML.trim();
var canvas = document.getElementById("myCanvas");
canvg(canvas, svg, { renderCallback: function () {
  var img = canvas.toDataURL("image/png");
  window.open(img);
});

但最后我得到了一个空白图像，错误提示:

错误:元素“parsererror”尚未实现。 canvg.js:2619

请任何人帮助我......

提前致谢......

Answer 1

您的 SVG 内容虽然可以被浏览器理解，但可能无法被 canvg 解析。

当您使用像这样的极其简单的 SVG 时，您的示例是否按预期工作，或者是否也会引发解析器错误？

<svg >
   <circle cx="75" cy="75" r="25"  stroke="black"  />
</svg>