web-dev-qa-db-ja.com

HTML2Canvasはフルdivをレンダリングせず、画面に表示されるもののみをレンダリングしますか？

HTML2Canvas を使用してdivのコンテンツをレンダリングしようとしています。コードは次のとおりです。

var htmlSource = $('#potenzial-page')[0];

$('#btn').on("click", function() {          

    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });

});

V5 beta 3を使用しています。

このコードを実行すると、画面に表示されているもののみがレンダリングされます。 #potenzial-page divは、本質的にページ全体からヘッダーとフッターを除いたものです。このdivのすべてのコンテンツはスクロールによって表示されます（いくつかの非表示要素がありますが、画像に非表示要素が表示されないようにします）。

何が間違っているのか、なぜdiv全体が保存されないのかがわかりません。また、画像の高さはdivと同じくらいですが、部分的にしか見えないことに注意してください。

私が意味することの例を与えるために、ここに比較があります：

enter image description here

左は、HTML2Canvasがdivをレンダリングする方法です。右は、上記のコードを実行したときのレンダリング方法を示しています。正しい画像は、ブラウザ画面に表示されているものです。

heightオプションを追加してみましたが、違いはありません。

[〜＃〜] update [〜＃〜]

ページの一番上までスクロールすると、それからスクリプトを実行すると、div全体が本来のようにレンダリングされます。

一番上までスクロールせずにdivをレンダリングするにはどうすればよいですか？

javascripthtml2canvas
18
L84

私のために働いた解決策は、私のCSSに次を追加することでした：

.html2canvas-container { width: 3000px !important; height: 3000px !important; }

これは、html2canvasがレンダリングを表示可能領域（デフォルトのようです）に制限するのを防ぎます。

こちらをご覧ください： https://github.com/niklasvh/html2canvas/issues/117

21
Jean-Baptiste Martin

SO： " Html2canvasオーバーフローしたコンテンツを画像に変換する "でこのソリューションを見ましたか？オーバーフローを可視に設定し、レンダリングしてからオーバーフローを非表示にする回避策が提案されています。

1
Devernay Stéphane

enter image description here

高さをdivに設定している場合は、キャンバスに切り替えます-実際にスナップショットを撮る前に、それを削除する必要があります。そうでなければ、その高さのために切り落とされます。

 $(".yourElemThatHasSomeHeightSet").css("height", "");

その後、下にスクロールすると、ドキュメントがカットされます。単純に：

$("html, body").scrollTop(0);

スナップショットを取る前。

1
NSP
  window.scrollTo(0,0);

これを追加してください。

0
Ari Setiawan Abimanyu

私の場合はwindow.scrollTo()を使用しましたが、うまくいきました。

以下はサンプルコードです

$('#btn').on("click", function() { 
    window.scrollTo(0,0);     
    html2canvas(htmlSource).then(function(canvas) {
        var img = canvas.toDataURL();
        window.open(img);
    });
    window.scrollTo(0, document.body.scrollHeight || document.documentElement.scrollHeight);
});
0
Amit Anand

私はこのようなことをしただけで、それは私のために働いた：

html2canvas(document.querySelector("#capture2image"), {
            allowTaint: true,
            useCORS: true,
            logging: false,
            height: window.outerHeight + window.innerHeight,
            windowHeight: window.outerHeight + window.innerHeight,
0
Ricky Levi