html2canvas - toDataURL funktioniert nicht die ganze Zeit

Question

Ich versuche, eine Tabelle zu einem Bild in HTML zu "klonen", der Code funktioniert aber nicht die ganze Zeit, es funktioniert nur beim 2. oder 3. Auslöser der Taste.

Das folgende Bild zeigt, dass beim ersten Klick die Bildtabelle nicht angezeigt wird nur eine Box angezeigt wird. ABER beim zweiten Klick wird es angezeigt. Ich denke, das hat etwas mit dem "Image-Loding-Konzept" zu tun, aber ich bin damit nicht so vertraut und es gibt Fragen zu diesem, aber keine Antworten gegeben oder die gegebene Antwort funktioniert nicht.

mein Code ist irgendwie ähnlich der Geige unten, aber ich habe eine dynamische Tabelle. es kann jederzeit ändern

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

Sie versuchen die abgeleitete Bild anhängen, bevor es abgeschlossen wurde. Bewegen Sie die Append-Funktion innerhalb der html2canvas Funktion:

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

Aktualisiert FIDDLE