Como salvar un canvas HTML5 como archivo en el servidor

Esta es la función javascript que hay que agregar en nuestro html para salvar un canvas como archivo de imagen.

function saveImage() {
    var canvasData = canvas.toDataURL("image/png");
    var ajax = new XMLHttpRequest();
    ajax.open("POST",'testSave.php',false);
    ajax.onreadystatechange = function() {
        console.log(ajax.responseText);
    }
    ajax.setRequestHeader('Content-Type', 'application/upload');
    ajax.send("imgData="+canvasData);

}

Este es el código para el archivo PHP testSave.php referenciado en el código anterior.

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData=substr($imageData, strpos($imageData, ",")+1);
  $unencodedData=base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb' );
  fwrite( $fp, $unencodedData);
  fclose( $fp );
}
?>

Acerca del Autor

Mas informacion sobre el autor de este Blog