将 Google 图表另存为图像 [英] Save Google charts as a image

问题描述

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

So after hours of websearching, googling and overflowing i can't find the solution to my problem.

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

I got a linechart from Google charts. I want to convert it to PNG, save it on the server en insert it into a MySQL database.

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

Sounds simple, but i cant get it to work. The script from this website isnt working anymore (atleast not here) http://www.battlehorse.net/page/topics/charts/save_google_charts_as_image.html -> Not working.

第二个选项是旧选项:

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

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

I cant use that because its not supported anymore and cant get some decent quality out of it.

这里有人可以提供很好的教程或帮助解决我的问题吗?

Is there anybody here that can give a good tutorial or help for my problem?

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

I used the code from Battlehorse combined with the code from EriC.

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

So now i got this working to show the chart as an image in a DIV i want to save this image on the server and update the mysql to use it in the future to use it in PDF files.

推荐答案

当您访问站点时，将其粘贴到控制台中(覆盖故障功能).

When you visit the site, paste this in the console (overwriting the malfunctioning function).

  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.

In JS it was searching for an iframe bla bla to get the svg.

要自动保存图像，您可以让该方法以编程方式调用.

To automatically save the image, you can just let the method being invoked programmatically.

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

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

    }, false );

对于在服务器端保存图像，这篇文章可能会有所帮助 在服务器端保存 PNG 图像

更新
将图片发布到 PHP (index.js)

Update
Posting images to 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.
?>

这篇关于将 Google 图表另存为图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！