html2canvas - toDataURL 一直不起作用[重复]

Question

我正在尝试将表格“克隆”到 html 中的图像，代码有效但并非一直有效，它仅在按钮的第二次或第三次触发时有效。

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

我的代码有点类似于下面的小提琴，但我有一个动态表。它可以随时更改

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 函数：

$(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
    });
  });
});

更新FIDDLE