Convert div to image by html2canvas (div element with img inside) not capturing image

Question

I'm using html2canvas to convert div to image/png. It works fine when there is a text in selected div but I have an image in it. So when I click the button I can't see the image in created base64 image by html2canvas.

My codes are like this;

this is my script:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="html2canvas.js"></script>

<script>
   $(function(){

      $('.savedraft').click(function(){

          html2canvas([ document.getElementById('div2image') ],{
          onrendered: function(canvas) {
          window.open(canvas.toDataURL());

  }
});
      })

      });         

</script>

this is my body:

<div class="savedraft">Convert</div>
<div id="div2image" >
    <img src="WebSite5/html2canvas-master/tests/assets/image_1.jpg" />
</div> 

Answer 1

Set it as the div background image, should work fine that way!

Answer 2

use canvas.toDataURL("image/png") specify the type of image

Answer 3

Run the project using server and it will work fine !

I faced the same issue, but then i ran the project using visual studio and it was running perfectly capturing all the images inside div tag. Read the link for further clarifications.