Capturing canvas as png sequence

post.coffee

# canvas will be exported to "./export/test/test000089.png"

canvas = document.cleateElement('canvas')

# draw something on canvas..

# post
$.ajax 
	type: "POST"
	url: './save.php'
	data:
		name: 'test'
		directory: './export'
		number: 89
		image: canvas.toDataURL('image/png')
		
	success: (res) ->
		json = $.parseJSON(json)
		# ...
		
	error: (XMLHttpRequest, textStatus, errorThrown) ->
		# ...

save.php

<?
try {
	// decode base64 & create image
	$canvas = $_POST["image"];
	$canvas = preg_replace("/data:image\/png;base64,/i","",$canvas);
	$buffer = base64_decode($canvas);
	$image = imagecreatefromstring($buffer);
	
	// get path
	$filename = $_POST["name"] ."_". str_pad($_POST["number"], 6, "0", STR_PAD_LEFT) . ".png";
	$dir = $_POST["directory"] . "/" . $_POST["name"];

	// make export directory
	if (!file_exists($dir)) {
    		mkdir($dir, 0777, true);
	}

	// save
	imagepng($image, $dir . "/" . $filename);
	imagedestroy( $image );

} catch (Exception $e) {
	?>{"status": "failed", "message": <?= $e->getMessage() ?>}<?
	exit();
}

?>
{"status": "success"}