2017-12-06 74 views
1

私は非常に長いWebページを持っています。html2canvasが画像全体を取得しない

サイズはおよそ1100x6600です。html2canvasを使用するたびに、幅と長さはすべて取得されますが、画像は見たい部分の非常に小さい部分にすぎません。

イメージ全体を1100x6600領域に合わせる簡単な方法はありますか?

ここでは、画像の下部にヘッダーの一部を表示するコードスニペットを示します。

function getScreenshot(){ 
    html2canvas(document.getElementById("entireBody")).then(function(canvas) { 
     var image = document.createElement("canvas"); 

     image.setAttribute('width', 1163); 
     image.setAttribute('height', 6659); 

     var context = image.getContext("2d"); 
     context.drawImage(canvas, 0, 0, 1163, 6659); 

     var dataURL = image.toDataURL(); 

     window.open(dataURL); 
    }); 
    } 

答えて

0

私はhtml2canvasを使用しているときに同様の問題があったと思います。画面上にないページの部分がキャンバスに入れられていないことがわかりました。

ライブラリを少し変更して、スクリーンが外れていても必要な部分をすべてレンダリングして、一時的な回避策を講じました。本質的に目に見える窓(10,000ピクセルの幅と高さ)の外側にレンダリングするhtml2canvasを語っている

return renderDocument(node.ownerDocument, options, 10000, 10000, index) 

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index) 

:バージョン0.5.0を使用して

私はこの部分を変更しました。私はそれを私のニーズに合わせて10000に変更しましたが、もしあなたが望むのであれば、もう少し直感的なことをすることができます。

私はこのプロジェクトが積極的に開発されているのを見ているので、この問題は修正されることが期待されていますが、

関連する問題