Javascript html2canvas-toDataURL并非始终有效

我正在尝试用html将一个表“克隆”到一个图像中，代码可以工作，但不是一直都可以，它只在按钮的第二个或第三个触发器上工作

下图显示，第一次单击时，图像表不会显示，只会显示一个框。但在第二次单击时，它会显示出来。我认为这与“图像放置概念”有关，但我对此不太熟悉，并且存在与此相关的问题，但没有给出答案或给出的答案不起作用

我的代码在某种程度上类似于下面的小提琴，但我有一个动态表。它可以随时改变

$（文档）.ready（函数（）{
var image2=新图像（）；
$（“#更多”）。单击（函数（）{
var表格图像；
html2canvas（$（“#数据表”）{
onrendered：函数（画布）{
tableImage=canvas.toDataURL（“image/png”）；
image2.src=表格图像；
},
允许绘制：false
});
$（'.reportContents'）。追加（''）；
$（'.reportContents'）。追加（''）；
$（'.reportContents'）。追加（''）；
});
});

您正在尝试在派生图像完成之前附加该图像。将append函数移到html2canvas函数中：

$(document).ready(function() {
  var image2 = new Image();
  $("#more").click(function() {
    var tableImage;
    html2canvas($("#dataTable"), {
      onrendered: function(canvas) {
        tableImage = canvas.toDataURL("image/png");
        image2.src = tableImage;
        $('.reportContents').append('<input id="title" style="border:none;"             name="title" type="hidden" value="null"/>');
        $('.reportContents').append('<input type="hidden" id="imageSrc"             name = "imageSrc" value="' + tableImage + '"/>');
        $('.reportContents').append('<img style="width: 90%;" id="image" src="' + image2.src + '">');
      },
      allowTaint: false
    });
  });
});

$（文档）.ready（函数（）{
var image2=新图像（）；
$（“#更多”）。单击（函数（）{
var表格图像；
html2canvas（$（“#数据表”）{
onrendered：函数（画布）{
tableImage=canvas.toDataURL（“image/png”）；
image2.src=表格图像；
$（'.reportContents'）。追加（''）；
$（'.reportContents'）。追加（''）；
$（'.reportContents'）。追加（''）；
},
允许绘制：false
});
});
});

---

更新了

highlite查找相关的代码按照您剪切代码的方式阅读代码不太容易，请您将其托管在JSFIDLE上好吗？非常感谢@Cr3aHal0添加了我的提琴抱歉，代码很相似，只需编辑一些部分，使其在没有代码其他部分的情况下工作。顺便说一句，我代码中的表格是动态的，所以我不能将htmlcanvas放在onclick之外。不知怎么回事，这不适用于我的代码，我不知道这是否是原因，我正在函数内部创建reportContents div。目前，代码似乎不再进入html2Canvas，它试图将控制台行放入我的代码中<代码>变量参数=document.createElement（“div”）；var元素=document.getElementById（“报告体”）；第setAttribute段（“类”、“报告内容”）；要素.附件（第6段）我认为您可能会发现html2canvas在这种情况下无法工作。文档中写道：“它实际上并没有截图，而是根据从DOM中读取的属性来构建页面的表示。”。您可能需要将内容加载到加载中存在的元素中。谢谢，我已经这样做了，打包了几个div等等。我不认为我需要在这里张贴答案，因为这里有一大堆代码。这很接近，所以我会接受这个答案

$(document).ready(function() {
  var image2 = new Image();
  $("#more").click(function() {
    var tableImage;
    html2canvas($("#dataTable"), {
      onrendered: function(canvas) {
        tableImage = canvas.toDataURL("image/png");
        image2.src = tableImage;
        $('.reportContents').append('<input id="title" style="border:none;"             name="title" type="hidden" value="null"/>');
        $('.reportContents').append('<input type="hidden" id="imageSrc"             name = "imageSrc" value="' + tableImage + '"/>');
        $('.reportContents').append('<img style="width: 90%;" id="image" src="' + image2.src + '">');
      },
      allowTaint: false
    });
  });
});