因此,经过数小时的网络搜索、谷歌搜索和溢出,我找不到解决我问题的方法。
我从 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 );
对于在服务器端保存图像,这篇文章可能会有所帮助 save a PNG image server-side
更新
将图像发布到 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.
?>
关于php - 将 Google 图表另存为图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13824096/