George_Fal 2013-03-06 19:53 采纳率: 0%
浏览 82

将Canvas映像保存到mysql

Every 5 seconds I have my javascript running to call the update.php file (which will hopefully add the base64 code to the mysql - although yet to figure out).

Currently, I just have the base64 code writing out to a text area called debugConsole.

I just don't get how I'm supposed to pass the javascript variable to my php update file.

HTML:

<script type="text/javascript">
function saveViaAJAX()
{
    var testCanvas = document.getElementById("testCanvas");
    var canvasData = testCanvas.toDataURL("image/png");
    var postData = "canvasData="+canvasData;
    var debugConsole= document.getElementById("debugConsole");
    debugConsole.value=canvasData;

    //alert("canvasData ="+canvasData );
    var ajax = new XMLHttpRequest();
    //ajax.open("POST",'testSave.php',true);
    ajax.setRequestHeader('Content-Type', 'canvas/upload');
    //ajax.setRequestHeader('Content-TypeLength', postData.length);


    ajax.onreadystatechange=function()
    {
        if (ajax.readyState == 4)
        {
            //alert(ajax.responseText);
            // Write out the filename.
                document.getElementById("debugFilenameConsole").innerHTML="Saved as<br><a target='_blank' href='"+ajax.responseText+"'>"+ajax.responseText+"</a><br>Reload this page to generate new image or click the filename to open the image file.";
        }
    }

    ajax.send(postData);
}
setInterval(function() { saveViaAJAX(); }, 5000);
</script>

<script language='javascript' type='text/javascript'>
//Every 5 seconds calls php update
//syncronized jax:
function myjax() {
    oXhr = new XMLHttpRequest();
    oXhr.open("POST", "update.php?game=<?php echo $game; ?>", false);
    oXhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded; charset=utf-8");
    oXhr.send(null);
}

//set an interval each 5 seconds to call your myjax method
setInterval(function() { myjax(); }, 5000);
</script>
</head>



     <div>
        <canvas id="testCanvas" width="300" height="300"></canvas>
      </div>
      <div>
    <textarea id="debugConsole" rows="10" cols="60">Data</textarea>


      </div>
    <script type="text/javascript">
        // This portion of the code simply draws random circles into the canvas (it has nothing todo with saving the canvas).
        var canvas = document.getElementById("testCanvas");
        if (canvas.getContext)
        {
            var canvasContext = canvas.getContext("2d");
            for (i=0; i<150; i++)
            {
                canvasContext.fillStyle="rgb("+(parseInt(Math.random()*255))+","+(parseInt(Math.random()*255))+","+(parseInt(Math.random()*255))+")";
                canvasContext.beginPath();
                canvasContext.arc(Math.random()*350,Math.random()*350,Math.random()*20, 0,Math.PI*2,true);
                canvasContext.fill();
            }
        }
    </script>

PHP:

<?php

$random =  rand(); 
$game = $_GET["game"];

mysql_query("UPDATE paint_s SET paint_points='$random' WHERE id ='$game'") or die(mysql_error());
echo "Updated";
?>

Sorry for my lack of knowledge, I have been doing a few tutorials and was just trying to expand on the tutorial.

  • 写回答

1条回答 默认 最新

  • weixin_33696822 2013-03-06 20:06
    关注

    First thing you want to do is open your request

    ajax.open("POST",'testSave.php',true);
    

    then want to send your data as application/x-www-url-form-encoded so set it in the content type

    ajax.setRequestHeader('Content-Type', 'application/x-www-url-form-encoded');
    

    To make sure your data is properly encoded use encodeURIComponent

    var postData = "canvasData="+encodeURIComponent(canvasData);
    

    You should also check the status to see if the request actually suceeded

    if (ajax.readyState == 4)
    {
        if (ajax.status == 200){
        //success
        }
        else{
        //failure
        }
    }
    

    I don't know if saving a base64 encoded image every 5 seconds is a good idea though.

    评论

报告相同问题?

悬赏问题

  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 ubuntu系统下挂载磁盘上执行./提示权限不够
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行