将 svg <image> 转换为画布到 png/jpeg 不起作用

Question

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

在我的项目中，我们正在动态生成diff图表。

我的要求是为仪表图表添加一个导出为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的新手。

我使用canvas来实现这个功能

但得到错误，如:error:元素'parsererror'尚未实现。canvg.js: 2619

我的代码是:

我创建了一个画布

<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);
});

但最后我得到一个空白的图像错误说:

ERROR:元素'parsererror'尚未实现。canvg.js: 2619

谁来帮帮我.....

Thanks in advance........

Answer 1

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

当您使用像这样非常简单的SVG时，您的示例是否如您所期望的那样工作，或者也会抛出解析器错误?

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

Answer 2

这为我解决了这个问题:

var svg = document.querySelector('svg');
var serializer = new XMLSerializer();
var svgString = serializer.serializeToString(svg);
var canvas = document.getElementById("test");
canvg(canvas, svgString);

感谢:canvas不't工作与SVG已经放置在身体?

Answer 3

试试这个:

var svg = document.getElementById('#podContent_'+i).innerHTML.trim().replace(' ',' ');

XML解析器不喜欢 和GWT图表格式编号标签与 (例如，1000是写在svg元素像这样:1 000)