html2canvas - toDataURL 并非一直有效

Question

我正在尝试 "clone" table 到 html 中的图像，该代码有效但并非一直有效，它仅在按钮。

下图显示第一次点击图片table不显示，只显示一个方框。但是在第二次单击时会显示。我认为这与 "image loding concept" 有关，但我对此不太熟悉，并且有与此相关的问题，但没有给出答案或给出的答案不起作用。

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

$(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

您正试图在派生图像完成之前附加它。将 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
    });
  });
});

已更新FIDDLE

html2canvas - toDataURL 并非一直有效

html2canvas - toDataURL does not work all the time

html

javascript

html5-canvas

todataurl