Question

谁知道rgraph和HTML5？（http://www.rgraph.net）

我的图表代码如下，我的问题是即使按照他们的建议我也无法在服务器上保存画布（图像）。

 <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-lenght文件.png。

有人可以帮助我吗？提前谢谢。

马修

Answer 1

这就是我的做法（您可能希望在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');
?>

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

1 个答案: