Javascript 我如何将谷歌图表转换成图像并保存她？

首先，对不起，如果我的英语不是很好

我有一些谷歌图表（使用API），我想把它们转换成图像

为此，我使用以下代码：

var chart_div = document.getElementById('chart_div');
var chart = new google.visualization.ColumnChart(chart_div);

// Wait for the chart to finish drawing before calling the getImageURI() method.
google.visualization.events.addListener(chart, 'ready', function () {
    chart_div.innerHTML = '<img src="' + chart.getImageURI() + '">';
    console.log(chart_div.innerHTML);
});

chart.draw(dataAge, optionsAge);

var chart\u div=document.getElementById（'chart\u div'）；
var chart=新的google.visualization.ColumnChart（chart\u div）；
//在调用getImageURI（）方法之前，请等待图表完成绘制。
google.visualization.events.addListener（图表'ready'，函数（）{
chart_div.innerHTML=''；
log（chart\u div.innerHTML）；
});
图表绘制（数据页、选项页）；

问题是，我必须要放一个div

<div id='chart_div'></div>

谢谢你看到我的形象

---

我的问题是如何在服务器上保存该图像？当然，在我保存了她之后，我想用她使用jsp文件和xsl制作一个PDF文档并删除图像。

编写javascript方法，您必须在点击按钮（或任何事件）时调用该方法。在javascript方法中，使用jquery get或post方法并将图像数据发送到服务器。图像数据可以初始化为全局变量，然后使用调用方法发送。这种类型的代码与IE和Firefox不兼容，可以与Chrome和Opera配合使用。 我找不到一个具体的代码解决方案，但我使用了另一种方法，它与所有浏览器兼容。 对于这一点，我认为在主页上的容器中有一个DIV内的图像和神秘

<div style="display:none;">
<img id="chartImg" />
</div>

然后通过openWin函数，我认为在这个图像中有一个pop和write，一个图形，可以在derecgo botonn鼠标上复制并保存为PNG

google.visualization.events.addListener(chart, 'ready', function () {
    var imgUri = chart.getImageURI();
    // do something with the image URI, like:
  document.getElementById('chartImg').src = imgUri;
});

函数openWin（）{code> var divText=document.getElementById（“chartImg”）.outerHTML； var myWindow=window.open（''，''，宽度=500，高度=500'）； var doc=myWindow.document； 文件写入（“”）； 文件写入（文本）； 写文件（“这是‘我的窗口’

”； doc.close（）； } 在JSFIDLE中，有一个要修改的示例

---

最近我读了所有关于将谷歌图表保存到磁盘上的图像文件的问题，但没有一个解决方案能满足我的需要。所以我开始尝试使用一种模拟web浏览器的程序，结果完全符合我的需要。 这就是问题的答案：

1） 创建一个包含所有需要的页面，运行google图表，使用服务器端语言或不创建最终代码和所有其他内容

2） 下载phantomjs（免费软件），这是webbrowser模拟器

3） PhantomJ使用一个脚本来说明它将做什么，这种情况下的完美脚本是：

save.js

function openWin() {  
   var divText = document.getElementById("chartImg").outerHTML;   
    var myWindow = window.open('', '', 'width=500,height=500');
   var doc = myWindow.document;
   doc.write('<img' + ' id="graficar" ' +' />');
   doc.write(divText);
   doc.write("<p>This is 'myWindow'</p>");
   doc.close();
}

• 请注意，viewportSize是浏览器视图的虚拟大小

4） 运行C:\blabla\phantomjs.exe save.js

工作得很有魅力

5） 在我的例子中，我计划每5分钟运行一次，并在解决方案的其他位置使用此映像

var page = require('webpage').create();
page.viewportSize = { width: 360, height: 150 };
page.open('http://your-webserver.com/yourgooglechart.html', function() {
  page.render('image_to_save.png');
  phantom.exit();
});