HTML5：将图表保存为服务器上的图像

谁知道rgraph和HTML5？（http://www.rgraph.net）HTML5：将图表保存为服务器上的图像

我的图表的代码是以下，我的问题是，我不能保存在服务器上的画布（图像），即使他们的建议。

<html> 
<head> 
<meta http-equiv="X-UA-Compatible" content="chrome=1"> 

<title>Title</title> 

<meta name="keywords" content="rgraph javascript charts html5 canvas basic example" /> 
<meta name="description" content="A basic example of an RGraph chart for implementation help" /> 
<meta name="googlebot" content="NOODP"> 

<!-- Place this tag in your head or just before your close body tag --> 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 

<script src="../libraries/RGraph.common.core.js" ></script> 
<script src="../libraries/RGraph.common.context.js" ></script> 
<script src="../libraries/RGraph.common.annotate.js" ></script> 
<script src="../RGraph.common.tooltips.js" ></script> 
<script src="../libraries/RGraph.common.zoom.js" ></script> 
<script src="../libraries/RGraph.common.effects.js" ></script> 

<script src="../libraries/RGraph.common.key.js" ></script> 
<script src="../libraries/RGraph.line.js" ></script> 
<script src="../libraries/RGraph.common.key.js" ></script> 
<!--[if lt IE 9]><script src="../excanvas/excanvas.original.js"></script><![endif]--> 
<script src="../libraries/jquery.min.js" ></script> 

<script> 
    window.onload = function() 
    { 
     var line1 = new RGraph.Line('line1', [3,56,22,7,84,8,34,1,1], [3,4,45,0,5,97,46,29,7]); 
     line1.Set('chart.background.grid', true); 
     line1.Set('chart.linewidth', 3); 
     line1.Set('chart.gutter.left', 35); 
     line1.Set('chart.hmargin', 5); 

     if (!document.all || RGraph.isIE9up()) { 
      line1.Set('chart.shadow', true); 
     } 
     line1.Set('chart.tickmarks', null); 
     line1.Set('chart.units.post', ''); 
     line1.Set('chart.colors', ['#FA4E1D', '#2D659A']); 
     line1.Set('chart.background.grid.autofit', true); 
     line1.Set('chart.background.grid.autofit.numhlines', 10); 
     line1.Set('chart.background.grid.autofit.numvlines', 29); 
     line1.Set('chart.curvy', 0); 
     line1.Set('chart.curvy.factor', 0.25); 
     line1.Set('chart.labels',['1','2','3','4','5','6','7','8','9']); 
     line1.Set('chart.title','Title of the Chart'); 
     line1.Set('chart.key.text.size',7); 
     line1.Set('chart.key',['A','B']); 
     line1.Set('chart.key.shadow','shadow'); 
     line1.Set('chart.key.position','graph'); 
     line1.Set('chart.ymax',200); 
     line1.Draw(); 


    } 
    </script> 

</head> 

<body> 

<center><h2>My title</h2><center> 

<!-- 2/3. This is the canvas that the graph is drawn on --> 
    <div style="text-align: center"> 
     <canvas id="line1" width="300" height="180">[Please wait...]</canvas> 

</div> 


</body> 
</html>

的建议是在这个页的结束：在该特定段落的“保存图表作为服务器上的图像” http://www.rgraph.net/docs/index.html#image。我的唯一结果是在我的服务器中有一个0长文件.png。

有人可以帮助我吗？在此先感谢。

马修

来源

2012-03-02 mattew

这是我要做的事（你可能需要添加某种验证在PHP以防止随意上传）：

JS：

function saveImage(){ 
var xmlhttp; 
    xmlhttp=((window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP")); 
    xmlhttp.onreadystatechange=function() 
    { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
      //do something with the response 
     } 
    } 
    xmlhttp.open("POST","myImageSavingScript.php",true); 
    var oldCanvas = document.getElementById('line1').toDataURL("image/png"); 
    var img = new Image(); 
    img.src = oldCanvas; 
    xmlhttp.setRequestHeader("Content-type", "application/upload") 
    xmlhttp.send(oldCanvas); 
}

PHP ：

<?php 
$im = imagecreatefrompng($GLOBALS["HTTP_RAW_POST_DATA"]); 
imagepng($im, 'filename.png'); 
?>

这是一个变体，如果你需要传递其他参数：

个

JS（只是MOD）：

var oldCanvas = document.getElementById('line1').toDataURL("image/png"); 
    var img = new Image(); 
    img.src = oldCanvas; 
    var params=oldCanvas+"&someOtherParameter=parameterValue"; 
    xmlhttp.setRequestHeader("Content-type", "application/upload") 
    xmlhttp.setRequestHeader("Content-length", params.length); 
    xmlhttp.setRequestHeader("Connection", "close"); 
    xmlhttp.send(params);

PHP：

<?php 
$params=explode('&',$GLOBALS["HTTP_RAW_POST_DATA"]); 
     $val=split("=",$params[1]); 
     $someOtherParam=urldecode($val[1]); 
     $imgsrc=str_replace(' ','+',$params[0]); 
     $im = imagecreatefrompng($imgsrc); 
     imagepng($im, 'filename.png'); 
?>

来源

2012-03-02 01:01:41

非常感谢你，它工作得很好！ PNG完美生成。我的进一步问题是，不幸的是它不可能通过cronjob自动完成。但我会环顾四周，寻求一些好的建议。 Tnx再次！ – mattew 2012-03-04 10:02:10

不幸的是，我发现了一个很大的问题：我想通过cron命令每天生成图像，我不能认为脚本没有执行。我试图用Lynx调用这个文件，但是图像没有被创建。我如何做？问题真的很大。：/ – mattew 2012-03-04 22:10:53

我真的不知道，但也许如果cron工作是做这个页面的'file_get_contents'之类的东西，它可能会触发所有必需的ajax等？对不起，只是在黑暗中拍摄。 – 2012-03-05 04:53:04

HTML5：将图表保存为服务器上的图像

回答

相关问题