0

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

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

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

我的图表代码是：

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

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

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

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

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

4

3 回答 3

1

这为我解决了它：

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

感谢： canvg 不适用于已放置在正文中的 svg？

于 2015-03-11T14:11:09.153 回答
1

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

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

<svg >
   <circle cx="75" cy="75" r="25"  stroke="black"  />
</svg>
于 2013-06-13T14:32:36.090 回答
0

尝试这个 ：

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

XML Parser 不喜欢&nbsp;和 GWT 图表格式数字标签&nbsp;（例如1000，像这样写在 svg 元素中1&nbsp;000：）

于 2014-09-25T08:27:01.707 回答