svg - 在浏览器中将 Google Geochart 转换为图像（JPEG、PNG 等）或 PDF

Question

我正在使用 Google GeoCharts (https://developers.google.com/chart/interactive/docs/gallery/geochart#Overview) 在浏览器中动态生成颜色编码的地图。geochart api 使用 javascript/svg 绘制地图......关于生成可导出图像文件的任何建议？（pdf、光栅图像等）

这可以通过谷歌地理图表完成吗？如果没有，您可以推荐其他服务吗？

*我们之前使用的是 GeoMaps，但分辨率不合适。

Answer 1

这可以通过遵循此页面上的步骤来完成。请注意，本文中的代码基于使用 iframe 的旧版 Google 可视化，并且不会像发布的那样工作。但是，您可以使用以下代码（在注释中找到）执行相同操作：

var svg = $(chartContainer).find('svg').parent().html();
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('style', 'position: absolute; ' + '');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData; 

注意：我没有创建此代码，它最初由上述网站的作者（Riccardo Govoni）创建，并由用户 Thomas 在评论部分更新。

Answer 2

这很有可能；我通过利用 Highcharts 的 SVG 到图像转换器来做到这一点。您只需在页面中找到 svg 代码并将其连同类型参数（例如 image/jpeg）、宽度和保存为的文件名一起发布到 highcharts 导出服务器。

唯一的缺点：IE 不是为 Google 可视化呈现 SVG 而是 VML。目前还没有解决方案，但似乎 Highcharts 在 IE 和 VML 到 SVG 的转换方面也有困难。所以恐怕没有运气。

<form method="post" action="http://export.highcharts.com/" id="imageGetForm">
<input type="hidden" name="filename" value="savedFromGoogleVisualization" />
<input type="hidden" name="type" id="imageGetFormTYPE" value="" />
<input type="hidden" name="width" value="900" />
<input type="hidden" name="svg" value="" id="imageGetFormSVG" />
</form>

并执行以下脚本：

var svg=document.getElementById('chart_div').getElementsByTagName('svg')[0].parentNode.innerHTML;
$('#imageGetFormTYPE').val('image/jpeg');//e.g. image/jpeg application/pdf etc
$('#imageGetFormSVG').val(svg);
$('#imageGetForm').submit();

这里的工作示例：http: //jsfiddle.net/P6XXM/