Сохранение изображения холста в mysql

Question

Каждые 5 секунд у меня работает javascript для вызова файла update.php (который, мы надеемся, добавит код base64 в mysql - хотя еще не выяснили).

В настоящее время у меня есть код base64, выписывающий текстовую область под названием debugConsole.

Я просто не понимаю, как я должен передавать переменную javascript в файл обновления php.

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"; 
?> 

Извините за мое отсутствие знаний, я делал несколько учебников и просто пытается расширить свое присутствие на уроке.

Answer 1

Первое, что вы хотите сделать, это открыть ваш запрос

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

затем хотите отправить данные в application/x-www-url-form-encoded поэтому установите его в тип контента

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

Чтобы убедиться, что ваши данные правильно кодированное использование encodeURIComponent

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

Вы также должны проверить статус е, чтобы увидеть, если запрос на самом деле suceeded

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

Я не знаю, если экономия кодировки Base64 изображения каждые 5 секунд хорошая идея, хотя.