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

对于在服务器端保存图像，这篇文章可能会有所帮助 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();

保存.php

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

    // Save to your DB.
?>