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

Question

I am using html2canvas to convert a div to image/png . It works fine when there is text in the selected div , but I have an image. Therefore, when I click the button, I do not see the image in the html2canvas created by base64 image.

My codes are as follows:

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 background image of the div, should work fine!

Answer 2

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

Answer 3

Run the project using the server, and it will work fine!

I ran into the same problem, but then I ran the project using visual studio and it was great at capturing all the images inside the div tag. Read the link for further clarification.