-2

I am trying to "clone" a table to an image in html, the code works but not all the time, it only work at the 2nd or 3rd trigger of the button.

The picture below shows that at the first click the image table is not displayed only a box is displayed. BUT at the second click it is displayed. I think this got something to do with the "image loding concept" but I am not that familiar with that and there are questions related to this one but no answers given or the answer given does not work.

enter image description here my code is somehow similar to the fiddle below but i have a dynamic table. it can change anytime

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 + '">');

  });

});
SCS
  • 1,162
  • 3
  • 17
  • 31
  • highlitend the code that is related – SCS Nov 08 '16 at 15:28
  • It is not quite easy to read your code the way you cut it, could you please host it on jsfiddle please ? Many thanks – Cr3aHal0 Nov 08 '16 at 15:50
  • https://jsfiddle.net/afgz3cuy/9/ @Cr3aHal0 added my fiddle sorry for that, the code is simmilar just edit some part to make it work without other parts of my code – SCS Nov 08 '16 at 16:12
  • btw the table in my codes is a dynamic one so i cant really put the htmlcanvas outside of the onclick – SCS Nov 08 '16 at 16:28

1 Answers1

2

You are trying to append the derived image before it has been completed. Move the append function inside the html2canvas function:

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

Updated FIDDLE

sideroxylon
  • 4,338
  • 1
  • 22
  • 40
  • somehow this is not working with my codes, i dont know if this is the cause, i am creating the reportContents div inside my the function. currently the code does not seem to enter the html2Canvas anymore tried to put console lines inside my codes. `var para = document.createElement("div"); var element = document.getElementById("reportBody"); para.setAttribute("class", "reportContents"); element.appendChild(para);` – SCS Nov 09 '16 at 08:29
  • I think you might find that html2canvas will not work in this situation. From the documentation: 'it does not actually take a screenshot of the page, but builds a representation of it based on the properties it reads from the DOM'. You might need to load the content into an element that exists on load. – sideroxylon Nov 09 '16 at 12:07
  • thanks i did it already, crated several divs and so on. i dont think i need to post the answer here since there are a whole bunch of codes. this somehow is close so will just accept this as the answer – SCS Nov 09 '16 at 16:43