Javascript $。在html2canvas中发布？

我有两个职能：

头号人物

html2canvas($("#screenshot"), {
  onrendered: function(canvas) {
    $('.ha').append(canvas);
  }
});

二号

$.post("save.php",{ xcv : canvas }, function(data){
  if (data == 1)
  {
    $('.cropped').empty();
    $('.cropped').append('<img src="' + data + '">');
    $('.cropped').append('<h2>Is this okay?</h2>');
  }
  else
  {
    alert(theCanvas);
  }
});

函数1只是截取了div容器的屏幕截图，并将其显示在div类ha中。第二个函数应该将画布提供给一个php文件，该文件将把画布转换成一个pyhscal文件。如果成功，php文件将返回1并在页面上发布图片，因为数据保留文件名。我试过这样的方法：

html2canvas($("#screenshot"), {
  onrendered: function(canvas) {
    $('.ha').append(canvas);

    $.post("save.php",{ xcv : canvas }, function(data)
    {
      if (data == 1)
      {
        $('.cropped').empty();
        $('.cropped').append('<img src="' + data + '">');
        $('.cropped').append('<h2>Is this okay?</h2>');
      }
      else
      {
        alert(theCanvas);
      }
    });

    }
});

$('#btnCrop').on('click', function(){
    html2canvas($("#screenshot"), {
    onrendered: function(canvas) {
            $.post("save.php",{ xcv : canvas }, function(data)
            {
                if (data != '')
                {
                    $('.cropped').empty();
                    $('.cropped').append('<img src="' + data + '">');
                    $('.cropped').append('<h2>Is this okay?</h2>');
                }
                else
                {
                    alert("Error!");
                }
            });

    }
    });

})

$('#btnCrop').on('click', function(){
    html2canvas($("#screenshot"), {
    onrendered: function(canvas) {

        var x = canvas.toDataURL();

            $.post("save.php",{ xcv : x }, function(data)
            {
                if (data != '')
                {
                    $('.cropped').empty();
                    $('.cropped').append('<img src="' + data + '">');
                    $('.cropped').append('<h2>Is this okay?</h2>');
                }
                else
                {
                    alert(theCanvas);
                }
            });

    }
    });

})

但它不起作用。问题是，如果我分别使用这两个函数，它们工作得非常好

整个事情看起来是这样的：

html2canvas($("#screenshot"), {
  onrendered: function(canvas) {
    $('.ha').append(canvas);

    $.post("save.php",{ xcv : canvas }, function(data)
    {
      if (data == 1)
      {
        $('.cropped').empty();
        $('.cropped').append('<img src="' + data + '">');
        $('.cropped').append('<h2>Is this okay?</h2>');
      }
      else
      {
        alert(theCanvas);
      }
    });

    }
});

$('#btnCrop').on('click', function(){
    html2canvas($("#screenshot"), {
    onrendered: function(canvas) {
            $.post("save.php",{ xcv : canvas }, function(data)
            {
                if (data != '')
                {
                    $('.cropped').empty();
                    $('.cropped').append('<img src="' + data + '">');
                    $('.cropped').append('<h2>Is this okay?</h2>');
                }
                else
                {
                    alert("Error!");
                }
            });

    }
    });

})

$('#btnCrop').on('click', function(){
    html2canvas($("#screenshot"), {
    onrendered: function(canvas) {

        var x = canvas.toDataURL();

            $.post("save.php",{ xcv : x }, function(data)
            {
                if (data != '')
                {
                    $('.cropped').empty();
                    $('.cropped').append('<img src="' + data + '">');
                    $('.cropped').append('<h2>Is this okay?</h2>');
                }
                else
                {
                    alert(theCanvas);
                }
            });

    }
    });

})

这是我按下按钮后的屏幕截图

---

沃尔夫，非常感谢你的提问！这让我想出了解决方案，我的印象是我从画布上得到了base64字符串，但我没有。我只需要添加一个

var x = canvas.toDataURL();

和x一起工作，而不是画布，不，它的工作非常好。所以整个事情看起来是这样的：

html2canvas($("#screenshot"), {
  onrendered: function(canvas) {
    $('.ha').append(canvas);

    $.post("save.php",{ xcv : canvas }, function(data)
    {
      if (data == 1)
      {
        $('.cropped').empty();
        $('.cropped').append('<img src="' + data + '">');
        $('.cropped').append('<h2>Is this okay?</h2>');
      }
      else
      {
        alert(theCanvas);
      }
    });

    }
});

$('#btnCrop').on('click', function(){
    html2canvas($("#screenshot"), {
    onrendered: function(canvas) {
            $.post("save.php",{ xcv : canvas }, function(data)
            {
                if (data != '')
                {
                    $('.cropped').empty();
                    $('.cropped').append('<img src="' + data + '">');
                    $('.cropped').append('<h2>Is this okay?</h2>');
                }
                else
                {
                    alert("Error!");
                }
            });

    }
    });

})

$('#btnCrop').on('click', function(){
    html2canvas($("#screenshot"), {
    onrendered: function(canvas) {

        var x = canvas.toDataURL();

            $.post("save.php",{ xcv : x }, function(data)
            {
                if (data != '')
                {
                    $('.cropped').empty();
                    $('.cropped').append('<img src="' + data + '">');
                    $('.cropped').append('<h2>Is this okay?</h2>');
                }
                else
                {
                    alert(theCanvas);
                }
            });

    }
    });

})

---

再次感谢你

不工作是什么意思？嘿，这意味着它不向save.php发送任何内容。我跟踪了http流量，什么都没有通过。打开浏览器开发工具包，看看网络选项卡-发送ajax后-你在那里看到了什么，然后向我们展示第二个，画布是什么？它真的与onrendered:functioncanvas{…}参数相同吗？嘿，A.Wolff，非常感谢你的提问！这让我想出了解决方案，我的印象是我从画布上得到了base64字符串，但我没有。我只需要添加一个var x=canvas.toDataURL；和x一起工作，而不是画布，不，它的工作非常好。再次感谢你！