如何在不使用HTML2Canvas的情況下獲取完整的HTML頁面的屏幕截圖

我正在使用HTML2Canvas獲取完整HTML頁面的圖像。我試圖通過單擊按鈕將圖像保存在PPT中。我可以用PPT保存圖像。但保存的圖像內容正在重疊，我在這裏使用的警報花費大約1分鐘來顯示。當我做了調試，我知道這個問題是與HTML2Canvas。我在我的頁面中使用了許多第三方圖表，如Google圖表。可以請您爲HTML2Canvas提供任何替代方法，因爲我在使用跨源內容時發現HTML2Canvas中存在一些限制。如何在不使用HTML2Canvas的情況下獲取完整的HTML頁面的屏幕截圖

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

} 
}); 
                    });

來源

2016-03-28 swathi

我有這個問題的解決方案。你可以試試這個了..

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

服務器是Node.js的，或者你可以寫任何語言的服務器URL。

Node.js的例子：https://github.com/niklasvh/html2canvas-proxy-nodejs

在這裏閱讀更多：Can't capture google map with html2canvas

，並在這裏：Cross-origin image load denied by Cross-Origin Resource Sharing policy

來源

2016-03-28 14:42:09 HoangHieu

感謝您的快速回復。你能否提供使用node.js的鏈接？ – swathi

查看我的更新回答.. – HoangHieu

如何在不使用HTML2Canvas的情況下獲取完整的HTML頁面的屏幕截圖

回答

相關問題