CODEWITHSUNDEEP
javascriptjquery
swathi
swathi

Reputation: 83

How to get screenshot of complete HTML page using HTML2Canvas

I am using HTML2Canvas to get image of complete HTML page .I am trying to save that image in PPT on a button click. i am able to save image in PPT. But the saved image content is getting overlapped and the alert which i have used here is taking around 1 min to show . when i did debug i got to know that problem is with HTML2Canvas. i have used many third party charts in my page like Google charts. can you please suggest me any alternative for HTML2Canvas as i saw there are few limitations in HTML2Canvas when we use cross-origin content. 

$('#PPTExport').click(function(e) {


var canvas = document.getElementById('canvas');
var target = $('#loadImageHeader');
        html2canvas(target, {
        onrendered: function(canvas) {

        var data1 = canvas.toDataURL("image/jpeg").replace("image/jpeg", "image/octet-stream");

        alert(data1);




$.ajax({ 
url: "savechart", 
data:{
image1:data1
      }, 

type: 'POST', 
success: function (data) {
if(data=="success")
{

 $("#formid1" ).attr('action','savechartDownload');
 $( "#formid1" ).submit();
}
                           } 
         });

}
});
                                                                    });

Upvotes: 0

Views: 5786

Answers (1)

HoangHieu
HoangHieu

Reputation: 2840

I Have solution for this problem. You can try this out.. 

 html2canvas([document.body], {
        useCORS: true,
        proxy: "Server",
        onrendered : function(canvas) {                               
             var myImage = canvas.toDataURL("image/png");
             window.open(myImage);
        }
});

Server is server url of node.js or any language you can write.

Example Node.js : https://github.com/niklasvh/html2canvas-proxy-nodejs

read more here: Can't capture google map with html2canvas

and Here: Cross-origin image load denied by Cross-Origin Resource Sharing policy

Upvotes: 2

Related Questions