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

Поэтому после нескольких часов поиска в Интернете, поиска в 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.

Источник

4 ответа

Решение

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

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

я надеюсь помочь тебе

Источник

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

файл hidden.php

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

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

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

Источник

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

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

Источник
Другие вопросы по тегам