html5 canvas save,javascript - how to save html5 canvas to server - Stack Overflow

Im loading a few images to my canvas and then after they load I want to click a button that saves that canvas image to my server. I can see the script works fine until it gets to the 'toDataURL' part and my function stops executing. What am I doing wrong? Here is my code:

body {

margin: 0px;

padding: 0px;

}

height="200">

Save

function loadImages(sources, callback)

{

var images = {};

var loadedImages = 0;

var numImages = 0;

// get num of sources

for(var src in sources) {

numImages++;

}

for(var src in sources) {

images[src] = new Image();

images[src].onload = function() {

if(++loadedImages >= numImages)

{

callback(images);

}

};

images[src].src = sources[src];

}

}

var canvas =

document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var sources = {

great:

'images/great.jpg',

star:

'images/1Star.jpg', good:

'images/good.jpg'

};

loadImages(sources, function(images) {

context.drawImage(images.great,

0, 0, 80, 120);

context.drawImage(images.star, 80,

0, 80, 120);

context.drawImage(images.good, 160, 0, 80,

120);

});

function saveCards()

{

var canvas=

document.getElementById("myCanvas");

alert("stops");

var theString= canvas.toDataURL();

var postData= "CanvasData="+theString;

var ajax= new XMLHttpRequest();

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

ajax.setRequestHeader('Content-Type',

'canvas/upload');

ajax.onreadystatechange=function()

{

if(ajax.readyState == 4)

{

alert("image was saved");

}else{

alert("image was not saved");

}

}

ajax.send(postData);

}

Thank you for any help is it because the images are not loaded before toDataUrl is called? If so can you please help me fix it.

This is the php script:

if(isset($GLOBALS['HTTP_RAW_POST_DATA']));

{

$rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];

$removeHeaders=

substr($rawImage,strpos($rawImage, ",")+1);

$decode=base64_decode($removeHeaders);

$fopen= fopen('images/image.png', 'wb');

fwrite($fopen, $decode);

fclose($fopen);

}

?>

I am getting a security error though.