HTML2canvas and Canvas2image, downloaded screenshot doesn't show my HTML images

Question

I've been working on a HTML page that I want to convert into an image.

I have been using the html2canvas and canvas2image scripts and taken this code http://jsfiddle.net/8ypxW/3/ here that has allowed me to create a button that will take a screenshot and download my HTML page as an image.

The problem I'm having is that my downloaded screenshot image shows my text but not my image, even though they are from the same origin. I'm not sure if it's a problem with my HTML, HTML2canvas or canvas2image.

My example is not live yet but my code is below:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="Canvas2Image.js"></script>



<div id="wrapper" style="background-color: white"; width="1000px" height="900px">

<img src="header.jpg" width= "900px">
tecno diagnostics


</div><!---- End Wrapper ---->


<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<div id="img-out"></div>


<script type="text/javascript">
$(function() { 
  $("#btnSave").click(function() { 
    html2canvas($("#wrapper"), {
        onrendered: function(canvas) {
            // Convert and download as image 
            Canvas2Image.saveAsPNG(canvas); 
            $("#img-out").append(canvas);
            // Clean up 
            //document.body.removeChild(canvas);
        }
    });
});
}); 
</script>

If anyone can help me out or point me in the right direction that would be much appreciated.

Thanks in advance

Solution 1

document.querySelector('button').addEventListener('click', function() {
  html2canvas(document.querySelector('.specific'), {
    onrendered: function(canvas) {
      // document.body.appendChild(canvas);
      return Canvas2Image.saveAsPNG(canvas);
    }
  });
});

body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: #333;
  background-color: #fff;
  padding-left: 15px;
}
.btn {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.42857143;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  border-radius: 4px;
}
.btn-default {
  color: #333;
  background-color: #fff;
  border-color: #ccc;
}
h1 {
  font-size: 36px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.1;
  color: inherit;
}
h1 small {
  font-size: 65%;
  font-weight: 400;
  line-height: 1;
  color: #777;
  display: block;
  padding-top: 15px;
}
.specific {
  background-color: #fff;
}
p a {
  padding: 5px;
}

<script src="https://superal.github.io/canvas2image/canvas2image.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="specific">
  <h1>Click to Take a Screenshot & Download it! <small>using html2canvas.js + canvas2image.js</small></h1> 
  <p>This is a simple demo.</p>
  <p>Use html2canvas.js to take a screenshot of a specific div and then use canvas2image.js to download the screenshot as an image locally to your filesystem.</p>
  <button type="button" class="btn btn-default">Take a Screenshot!</button>
  <p>References: <a href="http://html2canvas.hertzen.com/">html2canvas.js</a><a href="https://github.com/SuperAL/canvas2image">canvas2image.js</a>
  </p>
</div>

A working demo using html2canvas.js & canvas2image.js:

Click to Take a Screenshot & Download it locally!

Solution 2

You're appending canvas object to the DOM, which doesn't make much sense in this case. You either want to convert rendered image to base64 and then append it to the DOM in the img tag or just call a saveAsPng() method to save image to the file system.

Try this, if you would like to append image to the DOM:

html2canvas(element, {
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/png");
      $('body').append('<img src="'+img+'"/>');
    }
  });

Or this, if you would like to save it.:

$(function() { 
  $("#btnSave").click(function() { 
      html2canvas(document.body, {
          onrendered: function(canvas) {
              return Canvas2Image.saveAsPNG(canvas);
          }
      });
  })
});

Haven't tried the second snippet, but it should work.

Comments

[Bhargav Rao]

Whilst this may theoretically answer the question, it would be preferable to include the essential parts of the answer here, and provide the link for reference.

[user1286956]

Could you update your code as it doesn't seem to work anymore on codepen. Also, can you set it up to work with resized images!?

[Alessia]

@user1286956 It works on my browser: Google Chrome Version 63.0.3239.108 (Official Build) (64-bit)