HTML5 Canvas imageアップロード - 空の画像をアップロードするか破棄

Question

私は2つの画像を混ぜ合わせて新しい単一の画像としてサーバーにアップロードするコードを使用しています。このため私はCanvasを使用しています。

私のhtmlコードは次のとおりです。

<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スクリプトは次のとおりです。

$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投稿要求を間違って送信しています。それは

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

** もイメージがローカルサーバ（同じドメイン）でホストされていることを確認する必要があります...