HTML5 캔버스 이미지 업로드 - 빈 이미지 업로드 또는 파기

Question

두 이미지를 혼합하여 새 단일 이미지로 서버에 업로드하려면 코드를 사용하고 있습니다. 이를 위해 저는 Canvas를 사용하고 있습니다.

<script> 
var canvas = document.getElementById("canvas"); 
var ctx = canvas.getContext("2d"); 

var img1 = loadImage('https://xxxdomain.com/image1.jpg', main); 
var img2 = loadImage('https://xxxdomain.com/image2.jpg', main); 

var imagesLoaded = 0; 
function main() { 
    imagesLoaded += 1; 

    if(imagesLoaded == 2) { 
     // composite now 
     ctx.drawImage(img1, 0, 0); 

     ctx.globalAlpha = 0.5; 
     ctx.drawImage(img2, 0, 0); 

    } 


    var myimage = canvas.toDataURL(); 
    var datasendervars = "myimage="+ myimage; 
    alert(myimage); 
    $.ajax({ 
    type: "POST", 
    url: "save.php", 
    data: datasendervars, 
    cache: false, 
    success: function(html){ 
     alert(html); 

     } 
}); 

} 

function loadImage(src, onload) { 
    var img = new Image(); 
    img.onload = onload; 
    img.src = src; 
return img; 
} 
<script> 

<canvas width="700" height="367" id="canvas"></canvas> 

그리고 내 업로드 PHP 스크립트는 다음과 같습니다 :

내 HTML 코드는

$img = $_POST['myimage']; 
    $img = str_replace('data:image/png;base64,', '', $img); 
    $img = str_replace(' ', '+', $img); 
    $data = base64_decode($img); 
    $file = 'tester/img'.date("YmdHis").'.png'; 

    if (file_put_contents($file, $data)) { 
    echo "<p>The canvas was saved as $file.</p>"; 
    } else { 
    echo "<p>The canvas could not be saved.</p>"; 
    } 

이미지가 성공적으로 업로드하지만 빈 및 업로드 된 모든 이미지는 동일한 파일 크기입니다.

아이디어가 있으십니까?

Answer 1

아약스 게시 요청을 잘못 보내고 있습니다. 그것은

또한

$.ajax({ 
    type: "POST", 
    url: "save.php", 
    data: {"myimage": myimage}, 
    cache: false, 
    success: function(html) { 
     alert(html); 
    } 
}); 

** 이미지 확인이 로컬 서버에서 호스팅되는 ...해야한다 (같은 도메인)