html2canvas - toDataURL不能一直工作

Question

我正在尝试将表格“克隆”到html中的图像，代码可以工作但不是所有时间，它只能在按钮的第2或第3个触发器上工作。

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

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

jsfiddle codes

$(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;
      },
      allowTaint: false
    });

    $('.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 + '">');

  });

});

Answer 1

您尝试在派生图像完成之前附加它。移动html2canvas函数中的append函数：

{{1}}

更新了FIDDLE