convert div into image data using jquery

Question

I have a html page. In which I have a button, whenever I click this button it should convert the entire html page into data image. I achieved this by using html2canvas as follow:

html2canvas([document.getElementById('form1')], {
        onrendered: function (canvas) {
            var imageData = canvas.toDataURL('image/jpeg',1.0); 
     }
    });

It is giving me the image data but without checkboxes and radio buttons. So is there any alternative to convert the html page to image data using jquery or javascript??
If there, please help me to come out from this problem.
Thank you in advance.

Answer 1

You're only converting the part in form1

document.getElementById('form1')

Try using

html2canvas(document.body, {
    onrendered: function (canvas) {
        var imageData = canvas.toDataURL('image/png',1.0); 
 }
});

Answer 2

html2canvas has issues with rendering radiobuttons and checkboxes, as described in another question @ https://stackoverflow.com/questions/19704618/how-to-display-checkbox-with-html2canvas. The solution given there is to replace those radiobuttons and checkboxes with images and then capturing the page.

The solution provided in the question above does not work as is if I read it correctly, but should help you along to writing a working fix.