javascript - HTML5 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>";
  }

图像上传成功，但是空白和所有上传的图像都是相同的文件大小。

任何想法？

最佳答案

您发送的ajax发布请求不正确。它应该是 ...

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

**还要确保图像托管在本地服务器（相同的域）上

关于javascript - HTML5 Canvas图片上传-上传空白图片或销毁，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42890448/