HTML2Canvasを使用せずに完全なHTMLページのスクリーンショットを取得する方法

Question

HTML2Canvasを使用して完全なHTMLページのイメージを取得しています。ボタンクリックでその画像をPPTに保存しようとしています。 私はPPTで画像を保存することができます。 しかし、保存されている画像の内容が重なってしまい、ここで使用していた警告が表示に約1分かかります。 私がデバッグしたとき、私はHTML2Canvasに問題があることを知りました。 私はGoogleのチャートのように私のページに多くのサードパーティのチャートを使用しています。 クロスオリジンのコンテンツを使用する場合、HTML2Canvasにはほとんど制限がないことがわかったので、HTML2Canvasの代替手段を教えてください。

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

解決方法この問題を解決してください。 あなたは

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