我有一个使用Google Charts API创建的日历图表。我一直在寻找一种将图表打印为png的方法，但一直未能找到一个好的工作答案。
由于getImageURI()不是为日历图表列出的方法，所以我也不能在Google Developer上使用打印PNG图表指南。
更新：
我找到了这个教程，它对下载图像很有帮助，但问题是下载的文件的文件名是图像字节码，greenthumb在这个页面上提供的解决方案无法正常工作。使用从CanvasSaver GitHub下载的软件包，该软件包在greenthumb页面上链接到，单击保存图像按钮时下载的文件是saveme.php文件，而不是实际图像。我曾尝试在saveme.php中将obj_close();放在echo $decoded;之前，但这也无助于解决问题。
我们非常感谢所有的帮助。
这是我使用日历谷歌图表示例的最终脚本。将要下载的文件名为"calendar.png"，它是使用链接的html下载属性设置的。JS Fiddle。我仍在努力寻找一种方法，将创建的图像的背景从透明更改为白色。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script>
<script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function getImgData(chartContainer) {
var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
var svg = chartArea.innerHTML;
var doc = chartContainer.ownerDocument;
var canvas = doc.createElement('canvas');
canvas.setAttribute('width', chartArea.offsetWidth);
canvas.setAttribute('height', chartArea.offsetHeight);
canvas.setAttribute(
'style',
'position: absolute; ' +
'top: ' + (-chartArea.offsetHeight * 2) + 'px; ' +
'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
doc.body.appendChild(canvas);
canvg(canvas, svg);
var imgData = canvas.toDataURL("image/png");
canvas.parentNode.removeChild(canvas);
return imgData;
}
function saveAsImg(chartContainer) {
var imgData = getImgData(chartContainer);
var link = document.getElementById('linker');
link.href = imgData;
link.download = "calendar.png";
}
</script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {
packages: ["corechart", "treemap", "geochart", "calendar"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
//Calendar
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'date',
id: 'Date'
});
dataTable.addColumn({
type: 'number',
id: 'Won/Loss'
});
dataTable.addRows([
[new Date(2012, 3, 13), 37032],
[new Date(2012, 3, 14), 38024],
[new Date(2012, 3, 15), 38024],
[new Date(2012, 3, 16), 38108],
[new Date(2012, 3, 17), 38229],
// Many rows omitted for brevity.
[new Date(2013, 9, 4), 38177],
[new Date(2013, 9, 5), 38705],
[new Date(2013, 9, 12), 38210],
[new Date(2013, 9, 13), 38029],
[new Date(2013, 9, 19), 38823],
[new Date(2013, 9, 23), 38345],
[new Date(2013, 9, 24), 38436],
[new Date(2013, 9, 30), 38447]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<a title="Background is transparent." id="linker" onclick="saveAsImg(document.getElementById('calendar_basic'));"><button>Save as PNG Image</button></a>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>