使用しようとしていますHTML2キャンバスdiv の内容をレンダリングします。コードは次のとおりです。
var htmlSource = $('#potenzial-page')[0];
$('#btn').on("click", function() {
html2canvas(htmlSource).then(function(canvas) {
var img = canvas.toDataURL();
window.open(img);
});
});
私はv5ベータ3を使用しています。
このコードを実行すると、画面に表示される部分のみがレンダリングされます。div#potenzial-pageは基本的に、ヘッダーとフッターを除いたページ全体です。この div 内のすべてのコンテンツは、スクロールすると表示されます (非表示の要素もありますが、画像では非表示の要素を表示したくありません)。
何が間違っているのか、なぜ div 全体が保存されないのかがわかりません。また、画像は div と同じ高さですが、部分的にしか表示されないようです。
私が言いたいことの例として、比較してみましょう。
左は HTML2Canvas が div をレンダリングする方法です。右は上記のコードを実行したときのレンダリング方法を示しています。右の画像はブラウザ画面に表示されるものです。
オプションを追加してみましたheightが、違いはありませんでした。
ページの一番上までスクロールするとそれからスクリプトを実行すると、div 全体が適切にレンダリングされます。
一番上までスクロールせずに div をレンダリングするにはどうすればよいですか?
ベストアンサー1
これがお役に立てば幸いです:
html2canvas(htmlSource, {scrollY: -window.scrollY})
.then(function(canvas) {
var img = canvas.toDataURL();
window.open(img);
});