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

但最后我得到一个BLANK IMAGE错误地说：

错误：元素'parsererror'尚未实现。 canvg.js：2619

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

提前致谢........

Answer 1

有可能您的浏览器无法理解您的SVG内容，而canvg无法对其进行解析。

当您使用极其简单的SVG时，您的示例是否按预期工作，或者是否也会抛出parsererror？

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

感谢：canvg doesn't work with svg already placed in body?

Answer 3

试试这个：

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

XML Parser不喜欢 和带有 的GWT图表格式编号标签（例如1000正在写入svg元素，如下所示：1 000）

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

3 个答案: