将Google图表另存为图片

Question

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

我从Google图表中获得了一个折线图.我想将其转换为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文件中使用它.

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

为了保存图像服务器端,这篇文章可能有助于保存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();

save.php

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

    // Save to your DB.
?>