So erhalten Sie einen Screenshot der vollständigen HTML-Seite ohne Verwendung von HTML2Canvas

Question

Ich verwende HTML2Canvas, um das Bild der vollständigen HTML-Seite zu erhalten. Ich versuche, dieses Bild in PPT auf einen Klick zu speichern. Ich kann Bild in PPT speichern. Aber der gespeicherte Bildinhalt wird überlagert und die Warnung, die ich hier benutzt habe, dauert ungefähr 1 Minute, um zu zeigen. wenn ich debugging habe ich dieses Problem mit HTML2Canvas kennen gelernt. Ich habe viele Charts von Drittanbietern in meiner Seite wie Google Charts verwendet. können Sie mir bitte irgendeine Alternative für HTML2Canvas vorschlagen, da ich gesehen habe, gibt es einige Beschränkungen in HTML2Canvas, wenn wir Ursprung-übergreifenden Inhalt verwenden.

$('#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(); 
} 
          } 
     }); 

} 
}); 
                    }); 

Answer 1

Ich habe eine Lösung für dieses Problem. Sie können dies ausprobieren ..

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

Server sind Server-URL von node.js oder mehr Sprachen schreiben.

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

lesen Sie hier mehr: Can't capture google map with html2canvas

und hier: Cross-origin image load denied by Cross-Origin Resource Sharing policy