캔버스 이미지를 서버에 저장하십시오.

Question

캔버스 이미지를 서버에 저장하려고합니다. 파일을 저장할 수는 있지만 항상 0 바이트입니다. 내 코드에 무슨 문제가 있습니까?

<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는 : 당신은 당신이 당신이 dataURL

둘째를 만들어하기 전에 변수 canvas 및 을 정의 후 캔버스 에 색칠했는지 확인하기 위해

<?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

우선이 , 당신은이 PHP 라인에서 img을 찾고있는 것처럼 보입니다 :

dataURL가 그 안에있는 일이 있는지 확인하기 위해 만든 후 마지막으로 당신이 console.log(dataURL)를 추가해야

data: { 
    imgBase64: dataURL 
} 

:

$img = $_POST['img']; 

(210)하지만 자바 스크립트는에 imgBase64로 정의된다.