Opening base64 image from html2canvas

Question

I'm trying to actually view the string image that html2canvas is rendering. I have a web page that opens from a hyperlink. I want in the end to use the Image button to take a screen shot of the web page. I am getting the base64 string but how do I view the string image?

      $(document).ready(function(){         

      html2canvas(document.body,{
          onrendered: function (canvas){
              var data = canvas.toDataURL();
              alert(data);
          },
          width:300,
          height:300
      });

Answer 1

You do that by appending something like data:image/png;base64, to the base64 string, and using it as the source for an image tag that is inserted somewhere :

  html2canvas(document.body,{
      onrendered: function (canvas){
          var data = canvas.toDataURL();
          var img  = document.createElement('img');
          img.setAttribute('download','myImage.png');
          img.src  = 'data:image/png;base64,' + data;
          document.body.appendChild(img);
      },
      width:300,
      height:300
  });