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函數內部：

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