Question

因此，经过数小时的网络搜索，谷歌搜索和溢出，我无法找到问题的解决方案。

我从Google图表中获得了一个折线图。我想将其转换为PNG，将其保存在服务器上并将其插入MySQL数据库。

听起来很简单，但我无法让它发挥作用。来自这个网站的脚本不再工作了（至少不在这里）http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html - ＆gt;不工作。

第二个选项是旧选项：

$imageData =     file_get_contents('http://chart.apis.google.com/chart... etc');

我无法使用它，因为它不再受支持，并且无法获得一些不错的质量。

这里有人可以为我的问题提供一个很好的教程或帮助吗？

编辑：

我使用了来自战马的代码和来自EriC的代码。

所以现在我的工作是将图表显示为DIV中的图像我想将此图像保存在服务器上并更新mysql以便将来在PDF文件中使用它。

Answer 1

当您访问该网站时，请将其粘贴到控制台中（覆盖故障功能）。

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

在JS中，它正在搜索iframe bla bla来获取svg。

要自动保存图像，您只需以编程方式调用该方法即可。

document.body.addEventListener("load", function() {

        saveAsImg( document.getElementById("pie_div")); // or your ID

    }, false );

要在服务器端保存图片，此帖子可能会有所帮助save a PNG image server-side

<强>更新
将图像发布到PHP（index.js）

function saveToPHP( imgdata ) {

    var script = document.createElement("SCRIPT");

    script.setAttribute( 'type', 'text/javascript' );
    script.setAttribute( 'src', 'save.php?data=' + imgdata );

    document.head.appendChild( script );
}

function save() {

    var canvas = document.getElementById("canvas"), // Get your canvas
        imgdata = canvas.toDataURL();

    saveToPHP( imgdata );
}

function drawOnCanvas() {

    var canvas = document.getElementById("canvas"), // Get your canvas
        ctx = canvas.getContext("2d");

    ctx.strokeStyle = "#000000";
    ctx.fillStyle = "#FFFF00";
    ctx.beginPath();
    ctx.arc(100,99,50,0,Math.PI*2,true);
    ctx.closePath();
    ctx.stroke();
    ctx.fill();
}

drawOnCanvas(); // Test
save();

save.php

<?php
    // Get the request
    $data = $_GET['data'];

    // Save to your DB.
?>

Answer 2

您可以使用grChartImg库。它是一个跨浏览器解决方案，甚至支持旧版本的IE（8及更早版本）。它具有许多功能，如下载图像，上传到服务器，在对话框中显示图像等。

有关详细信息，请查看http://www.chartstoimage.eu。

我希望能帮助你。

Answer 3

这不是一个真正的答案，但可能是未来的一个，如果你只是想要这个功能，它就是必须的。以下URL显示了可视化API的所有当前问题和功能请求。

https://code.google.com/p/google-visualization-api-issues/issues/list?can=2&q=&sort=-stars+id&colspec=ID%20Type%20Status%20Priority%20Milestone%20Owner%20Summary%20Stars

此功能请求获得的星/票越多，他们查看它的机会就越高。

Answer 4

我遇到同样的问题 - 将Google图表保存为服务器上的图片。这里的答案都不适合我。最后我得到了解决方案，但有一些错误（仅在Chrome浏览器中工作）。作为基础我从这里使用脚本https://gist.github.com/mpetherb/7085315我为我的项目做了一些更改。我使用jquery将生成的图形图像导入到我的服务器。这是我要转换为图片并保存google graph example id="ex0"

的图表

转换为图像并导入服务器的脚本

＆＃13;

<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 toImg(chartContainer, imgContainer) {
var doc = chartContainer.ownerDocument;
var img = doc.createElement('img');
var myimg=img.src = getImgData(chartContainer);
//Here I am using jquery for importing decoded image to hidden.php on my server 
$.ajax({
    method: "POST",
    url: "hidden.php",
    data: { name: myimg } });
while (imgContainer.firstChild) {
imgContainer.removeChild(imgContainer.firstChild);
}
imgContainer.appendChild(img);
}
</script>

<button onclick="toImg(document.getElementById('ex0'), document.getElementById('ex0'));" 
type="button" <Convert to image and upload on server></button>
// ex0 - div id of this type of google graph. If you using another type of google graph - you should change it

＆＃13;

＆＃13; 别忘了在你的代码中加入jquery。

和php隐藏脚本，用于从jquery方法POST接收数据并将其保存在服务器上

hidden.php文件

＆＃13;

<?php
 if(isset($_POST['name']))
  {   
    $data = $_POST['name'];

    list($type, $data) = explode(';', $data);
	list(, $data)      = explode(',', $data);
	file_put_contents('graph_temp.png', base64_decode($data));

＆＃13;

我会再次注意到 - 仅适用于Chrome浏览器。 Firefox也在服务器上创建图像文件但没有任何内容（看起来像firefox不支持base64编码数据）

将Google图表另存为图片

4 个答案: