6

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

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

听起来很简单，但我无法让它工作。该网站的脚本不再工作（至少不在此处）http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html -> 不工作。

第二个选项是旧选项：

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

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

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

编辑：

我使用了 Battlehorse 的代码和 EriC 的代码。

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

4

4 回答 4

8

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

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


为了在服务器端保存图像，这篇文章可能有助于在服务器端保存 PNG 图像

更新
将图像发布到 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();

保存.php

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

    // Save to your DB.
?>
于 2012-12-11T16:40:01.430 回答
3

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

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

我希望能帮助你。

于 2013-05-14T21:57:45.840 回答
0

这不是一个真正的答案，但将来可能是一个答案，如果您只是想要恢复该功能，这是必要的。以下 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

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

于 2013-06-27T14:34:54.573 回答
0

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

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

<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
不要忘记在您的代码中包含 jquery。

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

隐藏的.php 文件 

<?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));

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

于 2015-03-26T08:23:24.327 回答