問題描述

因此，經過數小時的網絡搜索、谷歌搜索和大量搜索，我找不到解決問題的方法.

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 圖表另存為圖像的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！