캔버스 데이터를 저장하려고합니다. 파일이 비어 있습니다.

캔버스에서 아약스로 서버에 업로드하려하지만, 매번 879 바이트의 빈 이미지 파일이 표시되는 것 같습니다. 내가 어디로 잘못 가고 있는지 확실하지 않습니다. 누군가가 한 번 봐 주면 가장 감사 할 것입니다.캔버스 데이터를 저장하려고합니다. 파일이 비어 있습니다.

document.getElementById('input').addEventListener("change",function (e) { 
    var file = e.target.files[0]; 
    var reader = new FileReader(); 
    var output = document.getElementById('test'); 
    reader.onload = function() { 
    var data = this.result; 
    var img = new Image(); 
    img.src = data; 
    img.onload = function() { 
var ctx = canvas.getContext("2d"); 
output.innerHTML = 'width: ' + img.width + '\n' + 'height: ' + img.height; 
ctx.drawImage(img, 0, 0, img.width, img.height); 

    }; 
    }; 
    reader.readAsDataURL(file); 
    var canvasData = canvas.toDataURL("image/png");

아약스 아래

$ 아약스 ({ 유형 : "POST", URL : "upload_images.php" 데이터 : {canvasData : canvasData}, 성공 : 함수() { } }); 귀하의 의견에 따라

$upload_dir = 'uploads/'; //implement this function yourself 
$img = $_POST['canvasData']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = $upload_dir."image_name.png"; 
$success = file_put_contents($file, $data); 
header('Location: '.$_POST['return_url']);

출처

2016-07-13 user2869163

콜백에서'toDataURL'을 호출하면 이미지가 그려지기 전에 실행됩니다 ... – Kaiido

당신은 onload가 실행되어 빈 캔버스를 출력하기를 기다리지 않고 있습니다. JS는 단일 스레드이며 현재 실행을 종료 할 때까지 onload가 실행되지 않습니다. onData 함수의 끝에 toDataURL을 추가합니다. – Blindman67

Awseome가 모두 해결 ... 나는 언로드 내 toDataUrl뿐만 아니라 아약스 업로드 및 모든 좋은 이동했다. 다시 한번 감사드립니다.

출처

2016-07-13 03:06:43 user2869163

캔버스 데이터를 저장하려고합니다. 파일이 비어 있습니다.

답변

관련 문제