Сохранить диаграммы Google как изображение

Поэтому после нескольких часов поиска в Интернете, поиска в Интернете и переполнения я не могу найти решение моей проблемы.

У меня есть линейная диаграмма из графиков 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.

Когда вы посещаете сайт, вставьте его в консоль (перезаписывая неисправную функцию).

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

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

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

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

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

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

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