HTML2Canvas not working, need to console image url

Question

I am trying to screenshot the view of a div which contains fullcalendar, but unable to do so. I have tried following code:

  function screenshot(){
     alert('zz'); html2canvas(document.querySelector('#calendar')).then(function(canvas) {
        document.body.appendChild(canvas);
        console.log(canvas.toDataURL());
     });
    }

Whenever I click on screenshot, I want to capture image of div#calendar and need to console the url so that I can use this image later as thumbnail when I share this page link later in social media.

You can check it here on Codepen

Answer 1

You can use below function to get image using html2canvas..

function screenshot(){
      console.log(html2canvas(document.querySelector('#calendar')))
      html2canvas(document.querySelector('#calendar'), {
      onrendered: function(canvas) {  
        var image = canvas.toDataURL("image/png");
        console.log("image => ",image); //image in base64
        var pHtml = "<img src="+image+" />";
        $("#parent").append(pHtml); //you can append image tag anywhere
        }
     });
 }