Javascript google图表日历的getimageuri（）替代方案
我使用Javascript google图表日历的getimageuri（）替代方案,javascript,image,canvas,google-visualization,Javascript,Image,Canvas,Google Visualization,我使用谷歌图表API创建了日历图表。我一直在寻找一种将图表打印为png的方法，但一直没有找到一个好的工作答案 由于getImageURI（）不是日历图表列出的方法，因此我也不能在Google Developer上使用打印PNG图表指南 更新： 我能够找到在下载图像时有帮助的方法，但问题是下载的文件名是图像字节码，提供的解决方案无法正常工作。使用从CanvasSaver GitHub下载的程序包（该程序包在greenthumb页面上链接到），单击save image按钮下载的文件是saveme.p
谷歌图表APIpnggetImageURI（）saveme.phpobj_关闭（）在echo$解码之前saveme.php中的code>，但这也无助于解决问题
非常感谢您的帮助。这是最后一个脚本，它为我提供了一个示例日历谷歌图表。将要下载的文件名为“calendar.png”，它是使用链接的html下载属性设置的。我仍在努力寻找一种方法，将创建的图像背景从透明改为白色
<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>
函数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(
“风格”，
'位置：绝对；'+
'顶部：'+（-chartArea.offsetHeight*2）+'px；'+
'左：'+（-chartArea.offsetWidth*2）+'px；'；
doc.body.appendChild（画布）；
canvg（canvas，svg）；
var imgData=canvas.toDataURL（“image/png”）；
canvas.parentNode.removeChild（canvas）；
返回imgData；
}
函数saveAsImg（chartContainer）{
var imgData=getImgData（chartContainer）；
var link=document.getElementById（'linker'）；
link.href=imgData；
link.download=“calendar.png”；
}
加载（“可视化”，“1”{
软件包：[“核心图表”、“树形图”、“地质艺术”、“日历”]
});
setOnLoadCallback（drawChart）；
函数绘图图（）{
//历法
var dataTable=new google.visualization.dataTable（）；
dataTable.addColumn({
键入：“日期”，
id:'日期'
});
dataTable.addColumn({
键入：“编号”，
id:“赢/输”
});
dataTable.addRows([
[新日期（2012年3月13日），37032]，
[新日期（2012年3月14日），38024]，
[新日期（2012年3月15日），38024]，
[新日期（2012年3月16日），38108]，
[新日期（2012年3月17日），38229]，
//为简洁起见，省略了许多行。
[新日期（2013年9月4日），38177]，
[新日期（2013年9月5日），38705]，
[新日期（2013年9月12日），38210]，
[新日期（2013年9月13日），38029]，
[新日期（2013年9月19日），38823]，
[新日期（2013年9月23日），38345]，
[新日期（2013年9月24日），38436]，
[新日期（2013年9月30日），38447]
]);
var chart=new google.visualization.Calendar（document.getElementById（'Calendar_basic'）；
变量选项={
标题：“红袜队出席人数”，
身高：350，
};
图表绘制（数据表、选项）；
}
另存为PNG图像
不幸的是，google charts目前只允许使用getImageURI（）打印核心图表和地质艺术。您知道其他替代方法吗？也许使用JS/jQuery？不确定，也许这有帮助：看起来很有希望。如果成功的话，我会发帖的。谢谢。当我在提供的JSFIDLE引用中单击“另存为PNG按钮”时，生成的图像显示为空白。这很奇怪，我只是尝试了一下，我可以很好地看到图像。你在另一台电脑上试用过吗？刚刚意识到：它在Firefox（43.0.4）中不起作用，但在Chrome中起作用。