Salva immagine canvas sul server

Question

Sto provando a salvare l'immagine del canvas sul server. Posso salvare il file, ma è sempre 0 byte. Cosa c'è che non va nel mio codice?

<script> 
function test(){ 
var canvas = document.getElementById("cvs"); 
var dataURL = canvas.toDataURL(); 

$.ajax({ 
    type: "POST", 
    url: "upload.php", 
    data: { 
    imgBase64: dataURL 
    } 
}).done(function(o) { 
    console.log('saved'); 

}); 

} 
</script> 

php:

<?php  
define('UPLOAD_DIR', 'uploads/'); 
$img = $_POST['img']; 
$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.'; 
?> 

Answer 1

Prima di tutto bisogna essere sicuri che hai dipinto sulla tela dopo è stato definito il canvas variabile e prima è stato creato il dataURL

Seconda , sembra che tu stia cercando img in questa linea di php:

$img = $_POST['img']; 

ma nel tuo javascript si sta definendo come imgBase64 in:

data: { 
    imgBase64: dataURL 
} 

infine si dovrebbe aggiungere console.log(dataURL) dopo la dataURL è stato creato per essere sicuri che ci sia qualcosa in esso.