HTML5: сохранение диаграммы в виде изображения на сервере - PullRequest
Новая
       0

HTML5: сохранение диаграммы в виде изображения на сервере

0 голосов
/ 02 марта 2012

Кто знает про 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 в специальном абзаце «Сохранение диаграммы в виде изображения на сервере».Мой единственный результат - файл 0p длины внутри моего сервера.

Может ли кто-нибудь мне помочь?Заранее спасибо.

Мэтью

1 Ответ

1 голос
/ 02 марта 2012

Вот как я это делаю (вы, вероятно, захотите добавить некоторую проверку в 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 (только мод): 

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');
?>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...