Сохраните диаграммы 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'); 

Я не могу использовать это, потому что его больше не поддерживается и не могу получить достойное качество из него.

Есть ли здесь кто-нибудь, кто может дать хороший учебник или помочь в решении моей проблемы?

EDIT:

я использовал код из Battlehorse в сочетании с кодом из Эрика.

Итак, теперь я получил эту работу, чтобы показать диаграмму как изображение в 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); 

Для сохранения изображения ServerSide, этот пост может быть полезным save a PNG image server-side

Update
Публикация изображений в 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. 
?> 

Answer 2

Вы можете использовать библиотеку grChartImg. Это кросс-браузерное решение и поддерживает даже старые версии IE (8 и ранее). У него есть много функций, таких как загрузка изображения, загрузка на сервер, отображение изображения в диалоговом окне и т. Д.

Для получения дополнительной информации см. http://www.chartstoimage.eu ,

Я надеюсь вам помочь.

Answer 3

На самом деле это не ответ, но может быть один в будущем, и это просто, если вы просто хотите вернуть эту функцию. Следующий 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

Чем больше звезд/голосов этот запрос функция получает, тем выше вероятность, что они будут смотреть на него.

Answer 4

У меня такая же проблема. Сохраните диаграммы Google как изображение на сервере. Ни один из ответов здесь не работает для меня. Наконец, я получаю решение, но с некоторыми ошибками (работает только в браузере Chrome). В качестве базы я использовал скрипт отсюда https://gist.github.com/mpetherb/7085315 Я внес некоторые изменения для своего проекта. Я использую jquery для импорта сгенерированного графического изображения на свой сервер. Это график, который я хочу, чтобы преобразовать в изображение и сохранить google graph example 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 и сохранить его на сервере

hidden.php файл

<?php 
 
if(isset($_POST['name'])) 
 
    { 
 
    $data = $_POST['name']; 
 

 
    list($type, $data) = explode(';', $data); 
 
\t list(, $data)  = explode(',', $data); 
 
\t file_put_contents('graph_temp.png', base64_decode($data));

Замечу еще раз - работает только в браузере Chrome. Firefox также создает файл изображения на сервере, но без какого-либо контента (похоже, что firefox не поддерживает кодированные данные base64)