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 e out from this problem.
Thank you in advance.

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 e out from this problem.
Thank you in advance.

• javascript
• jquery
• html
• css
• html2canvas

• Please put your html also some part or jsfiddle – Just code Commented Apr 10, 2014 at 9:52

2 Answers 2

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); 
 }
});

html2canvas has issues with rendering radiobuttons and checkboxes, as described in another question @ https://stackoverflow./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.