将Google图表保存为图片 [英] Save Google charts as a image

问题描述

所以经过几个小时的网络搜索，谷歌和溢出我找不到我的问题的解决方案。

我从谷歌图表得到一个线图。我想将其转换为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'）; 
  

我不能使用它，因为它不再支持，不能得到一些体面的质量。 p>

这里有没有人能给我一个很好的教程或帮助我的问题？

编辑：

我使用来自Battlehorse的代码和来自EriC的代码。

现在我得到这个工作来显示图表DIV中的一个图像我想在服务器上保存这个图像，并更新mysql，以便将来使用它在PDF文件中使用它。

解决方案

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

  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。 / p>

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

  document.body.addEventListener（load，function（）{
 
 saveAsImg（document.getElementById（pie_div））; // 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），//获取画布
 imgdata = canvas .toDataURL（）; 
 
 saveToPHP（imgdata）; 
} 
 
 function drawOnCanvas（）{
 
 var canvas = document.getElementById（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 
 //获取请求
 $ data = $ _GET ['data']; 
 
 //保存到您的数据库。 
？> 
  

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

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.

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.

Second option is the old option:

$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?

EDIT:

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

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

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

For saving images serverside, this post could be helpful save a PNG image server-side

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

save.php

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

    // Save to your DB.
?>

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