How to save canvas image data using php and ajax?

Question

I followed this tutorial on my vps: http://permadi.com/2010/10/html5-saving-canvas-image-data-using-php-and-ajax/

testSave.php

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
{
  // Get the data
  $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];

  // Remove the headers (data:,) part.
  // A real application should use them according to needs such as to check image type
  $filteredData=substr($imageData, strpos($imageData, ",")+1);

  // Need to decode before saving since the data we received is already base64 encoded
  $unencodedData=base64_decode($filteredData);

  //echo "unencodedData".$unencodedData;
 $randnum = rand(1111111111,9999999999);
  // Save file. This example uses a hard coded filename for testing,
  // but a real application can specify filename in POST variable
$tmpfname = tempnam("http://123.xx.xx.xx/test/tmp/", "FOO");
$fp = fopen(http://123.xx.xx.xx/test/test . uniqid() .".png","wb");
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
?>

JS

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);
}

The problem is that when the user clicks 'send via ajax', there is no image sent/generated in the server directory( http://prntscr.com/8bhmxa ). This is the outcome: http://prntscr.com/8bhi62 and everything in the directory remains unchanged.

What should happen is for a link of the image to be generated under the 'Saved as'

Any solutions?

PS Is there anyway to echo the image link with php?

Answer 1

The problem is with your AJAX. Refer Url here the code is given for saving canvas with php and ajax. Link