how to save canvas image to server?

I have created drawing app as like below:

Please try a link in Chrome browser. Currently this works only chrome and safari.
I need to save the canvas image to server. My html code is below:

<!DOCTYPE html>
<title>Drawing App</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<link rel="stylesheet" type="text/css" href="../js/style.css"/>
<script type="text/javascript">
function saveViaAJAX()
var testCanvas = document.getElementById("canvas");
var canvasData = testCanvas.toDataURL("image/png");
var postData = "canvasData="+canvasData;
//var postData = canvasData;
var debugConsole= document.getElementById("debugConsole");

var textarea_value= document.getElementById("answer").value;

if((textarea_value=='')||(textarea_value=='Your Answer'))
	alert('Enter description of the image');
	return false;
	alert('Your image and description updated successfully');
//alert("canvasData ="+canvasData );
var ajax = new XMLHttpRequest();"POST",'testSave.php?textarea_value='+textarea_value,true);
ajax.setRequestHeader('Content-Type', 'canvas/upload');
//ajax.setRequestHeader('Content-TypeLength', postData.length);

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

<canvas id="canvas" width="900" height="600"></canvas>
<textarea id="color">colorBlack</textarea>&#x00A0;<textarea id="size">small</textarea>
<textarea id="debugConsole" rows="10" cols="300">Data</textarea>
<textarea id="answer" rows="1" cols="46" onBlur="if (this.value == ''){this.value = 'Your Answer'; }" onFocus="if (this.value == 'Your Answer') {this.value = '';}">Your Answer</textarea>&nbsp;<img class="none" src="../js/images/submitbutton.jpg" onclick="saveViaAJAX();"/>
<div id="debugFilenameConsole">John</div></body></html>

Open in new window

My php code is below:
if (isset($_POST['canvasData'])) {
// Get the 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

//echo "unencodedData".$unencodedData;

// Save file. This example uses a hard coded filename for testing,
// but a real application can specify filename in POST variable
$fp = fopen( ‘test.png’, ‘wb’ );
fwrite( $fp, $unencodedData);
fclose( $fp );

Open in new window

But it not saved canvas image to my server. Please advice how to do this?
Who is Participating?
Ray PaseurConnect With a Mentor Commented:
And just a thought, but one that will save you from a lot of problems.  Use jQuery so you get cross-browser JavaScript support.  The "Hello World" jQuery+AJAX exercise is illustrated in this article:
Ray PaseurCommented:
Use this function to see what the $_POST data looks like.  Then show us, too.
JohnLourduAuthor Commented:
As per below post, I have found above code has performance issue:
So I used the second method of the post. Now it works fine for me.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.