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