Не удается сохранить холст HTML5 как изображение на сервере

Я знаю, что вопрос был задан раньше, но никто из них не помог мне. голосование

Я написал несколько JavaScript которые позволяют пользователю draw на canvas разными цветами и размерами пера. Я хочу загрузить canvas на свой сервер

Это мой index.html :

  <html> <head> </head> <body> <canvas id="canvas"></canvas> <button id="button_clear" onclick="test()">Clear/upload canvas</button> <script> function test(){ var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL(); $.ajax({ type: "POST", url: "script.php", data: { imgBase64: dataURL } }).done(function(o) { console.log('saved'); }); } </script> 

script.php:

 <?php // requires php5 //define('UPLOAD_DIR', 'FBdraw/'); $img = $_POST['imgBase64']; $img = str_replace('data:image/png;base64,', '', $img); $img = str_replace(' ', '+', $img); $data = base64_decode($img); $file = UPLOAD_DIR . uniqid() . '.png'; $success = file_put_contents($file, $data); print $success ? $file : 'Unable to save the file.'; ?> 

Когда я script.php страницу script.php он сохраняет пустое 0 kB image .