Html2canvas: 'overflow：auto'divで非表示部分をいっぱいにレンダリングする方法

現在、特定のオプションを使用してページをレンダリングするオプションはありません。そのため、ページを変更して、希望どおりに表示する必要があります。

つまり、高さ/幅の制限を削除し、html2canvasを実行してから、高さ/幅を元の値に戻すと、目的の結果が得られるはずです。

どうもありがとうございました....私はあなたが言ったことを試してみます...

長い間試してみましたが…でも大変です…おっしゃった通りにはいきませんでした。 スクロールがあっても「body」の場合はうまくいくことがわかりました...スクロールのある要素を持つdivでも同じことを達成したいと思います...この問題で私を助けることができれば私にとって大きな助けになります...私はあなたのコメントを楽しみにしています...

@niklasvh 、私は同じ問題を抱えています、そして私がした唯一の回避策は、 html2canvas （常にオプションではない）を呼び出す前にターゲット要素の幅を縮小するか、 html2canvasを呼び出すことです同じ要素で2回続けて

http://jsfiddle.net/fMeRC/1/ （この特定の例はChromeでのみ機能します。他のブラウザーで問題を確認するには、幅をいじる必要があります）

これは基本的に、要素がウィンドウまたは(document.width - 8)よりも広い場合にのみ発生します。どちらがより重要で直接的な関連性があるかはわかりません。これは、他のブラウザで変更される可能性があります）。

おそらく関連している：＃199と＃108。

childElementを試したか、「overflow = visible」を設定してから「overflow = auto | hidden | inherit」を設定しましたか？

スタイルのないchildElement、オーバーフローのあるdivのコンテンツのみを受け取る：

<div id="main"><!--// main div -->
<div class="mainContent"><!--// div without style (height: auto, width: auto, margin: 0, padding: 0) -->
...content...

html2canvas([$("#main div.mainContent").get(0)],...)

提案をありがとう、@ brcontainer。 overflow: visible -> html2canvas( ... ) -> overflow: [old overflow]アプローチを試しましたが、非表示/非表示/非表示のコンテンツのフラッシュが目立ちすぎました（おそらくターゲット要素が原因です）比較的複雑です）。 私は、その点で違いを生むように思われる回避策のわずかに最適化されたバリアントを思いついたばかりですが：

html2canvas( targetElement, {
  onpreloaded: function(){ /* set parent overflow to visible */},
  onparsed: function(){  /* reset parent overflow */ },
  // ... onrendered, etc.
});

これにより、h2cがターゲットを適切に解析するのに必要な最短時間（私が思うに）だけオーバーフローが「表示」に設定されるため、少なくとも私の場合は、フラッシュがほぼ完全に排除されます。 つまり、オーバーフローをリセット/再非表示にする前に、キャンバスのレンダリング手順が終了するのを待つ必要がなくなりました。 この変更されたアプローチがすべての人に役立つかどうかはわかりませんが、 html2canvas( ... ) 2回続けて呼び出すか、DOMに追加のものを追加してターゲットコンテンツをラップするよりも良い回避策だと思います。

いずれにせよ、これはまだ本当のバグであり、適切に修正してもらいたいと思っています。 （特に、IE9と10ではどちらの回避策も正しく機能しないように思われるため、少なくともIE11では試していません。）

_注：前述の回避策は、現在マスターにある最新バージョンでは機能しません。 私はテストしていませんが、代わりにonclonedオプションを使用する必要があるようです。オーバーフローした親のリセットは、 .then()へのコールバックで呼び出されます。 （クローンされたドキュメント内で親のオーバーフローを排他的に表示することも可能であり、何もリセットする必要はありません。）_

なぜこのように使用するのかわかりません。次のようにするとよいでしょう。

function SnapShotDOM(target,call){
    var data = {};

    //use jquery or getComputedStyle|style.overflow
    data.overflow = /*get overflow property*/;
    data.width = /*get width property*/;
    data.height = /*get height property*/;
    data.maxWidth = /*get maxWidth property*/;
    data.maxHeight = /*get maxHeight  property*/;

    target.style.overflow="visible !important";
    target.style.height="auto !important";
    target.style.maxHeight="auto !important";

    html2canvas(target, {
        "onrendered": function(canvas) {
            target.style.overflow = data.overflow;
            target.style.width = data.width;
            target.style.height = data.height;
            target.style.maxWidth = data.maxWidth;
            target.style.maxHeight = data.maxHeight;
            call(canvas);
        }
    });
}

SnapShotDOM(document.body,function(canvas){
    console.log(canvas);
});

またはクラスを使用します。

<style>
*.html2canvasreset{
    overflow: visible !important;
    width: auto !important;
    height: auto !important;
    max-height: auto !important;
}
</style>
<script>
function SnapShotDOM(target,call){
    var data = target.className;
    target.className += " html2canvasreset";//set className - Jquery: $(target).addClass("html2canvasreset");
    html2canvas(target, {
        "onrendered": function(canvas) {
            target.className = data;//old className - Jquery: $(target).removeClass("html2canvasreset");
            call(canvas);
        }
    });
}

SnapShotDOM(document.body,function(canvas){
    console.log(canvas);
});
</script>

onrenderedにオーバーフローに関連するものを何も入れない理由は、解析とレンダリングの間の時間が目立つ可能性があり、オーバーフローをできるだけ早く（つまり、解析直後、レンダリング前に）リセットすることが望ましいためです。コンテンツの目に見えるフラッシュを避けるため。 代わりに、オーバーフローリセットをonparsedに入れると、これが実現します。

私は「オンプリロード」について言及していました。

これを試して：

function SnapShotDOM(target,call){
    var data = target.className;
    target.className += " html2canvasreset";//set className - Jquery: $(target).addClass("html2canvasreset");
    html2canvas(target, {
        "onparsed": function() {
            target.className = data;//old className - Jquery: $(target).removeClass("html2canvasreset");
        },
        "onrendered": function(canvas) {
            call(canvas);
        }
    });
}

SnapShotDOM(document.body,function(canvas){
    console.log(canvas);
});

私がonpreloadedを使用するのも同じ理由です。これは、オーバーフローの非表示部分を解析ステップの直前の可能な限り最新の瞬間に移動できるようにする最適化であり、これにより、コンテンツは画面に完全に表示されます。 これがどのように機能するかここのコードで確認できます。

@niklasvh 、この問題はここにあるTODO（ options.useOverflow ）に関連していますか？

どのバージョンを使用しましたか？..私のバージョンでonparsedおよびonpreloadedメソッドを見つけることができます。
html2canvas-0.5.0-alpha1を使用しているim

@ejlocopこの問題は以前のバージョンで数年前に提出されたものであり、ユースケース（＃511）とは関係がない可能性があります。

彼らは問題を解決しましたか？ パラアソリューションガントチャートで何かを探しています。完全にあなたが必要です...

動いていない。

http://jsfiddle.net/fMeRC/368/

@pkpatelsなぜ機能しないのですか？ 私はあなたのフィドルを走らせました、そして、文は途切れることなくレンダリングされました...
私もこの問題を抱えていました、そして私のために働いた解決策はで提案されたものです：＃117

@uriklar垂直スクロールではなく、水平スクロールで機能します。 私のdivをチェックアウトしてください。 そこには3つの異なる要素があります。

@uriklar divを下にスクロールして完全に表示をクリックすると、提案するソリューションも機能しません。

レンダリング前に#textdivの高さをautoに設定し、レンダリング後にリセットするのはどうですか？ それはうまくいくでしょう。

最新のリリース（0.5.0-beta4）ではまだオーバーフローの問題がありました。 @usmonsterの回避策を採用し、h2cとPromisesへの最近の変更に適合させました（ @usmonsterのメモで説明されてい

注：前述の回避策は、現在マスターにある最新バージョンでは機能しません。 私はテストしていませんが、代わりにonclonedオプションを使用する必要があるようで、オーバーフローの親リセットが.then（）へのコールバックで呼び出されるようになりました。 （クローンされたドキュメント内で親のオーバーフローを排他的に表示することも可能であり、何もリセットする必要はありません。）

したがって、Webページの実際のDOMを変更せずに、 oncloneコールバックを利用して、h2cによるレンダリングに使用される複製されたドキュメントを変更できます。 実際には非常に簡単です。これが私のh2c呼び出しです。

var renderingPromise = html2canvas($(item), {
    width: item.clientWidth,
    height: item.clientHeight,
    onclone: function(clone) {
            $(clone).find('.grid-stack-item-content')
                .css('overflow-x', 'auto')
                .css('overflow-y', 'auto');
        return true;
    }
}).then(
    function(c) {/* success */},
    function() {/* fail */}
);

私にとってうまくいったのは、キャンバスをiframeに配置し、その中でhtml2canvasを呼び出し、キャンバスでtoDataURL（）を呼び出し、コールバックを使用してその画像をトップウィンドウに戻すことだけでした。 キャンバスオブジェクトを返すこともできると思います。

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth, node.ownerDocument.defaultView.innerHeight, index).then(function(canvas) { if (typeof(options.onrendered) === "function") { log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); options.onrendered(canvas); } return canvas; });
への変更
var width = options.width != null ? options.width : node.ownerDocument.defaultView.innerWidth; var height = options.height != null ? options.height+node.ownerDocument.defaultView.innerHeight : node.ownerDocument.defaultView.innerHeight; return renderDocument(node.ownerDocument, options, width, height, index).then(function (canvas) { if (typeof(options.onrendered) === "function") { log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas"); options.onrendered(canvas); } return canvas; });

これは、画面のオーバーフロー（幅と高さの両方）に関する質問を解決することができます

xzw123には悪い解決策があります。 ownerDocument.defaultView.innerHeight手動で設定すると、実際のウィンドウサイズ設定イベントからバインドが解除されます。 これはiframeで行うのが最善だと思います。 私はジョーダンの解決策を試すことに熱心です。

ジョーダン、どうやってiframeでキャンバスを使うことになったのですか？ 私は今それを試みています。 これがhtml2canvasの最終的な解決策になると思います... iframe通信をAPIの外部で非表示にする必要があります。

はい、 window.postMessage(myData, ... )してiframeで実行するとうまくいきます。 レンダリングされたピクセルのデータURL全体をポストバックできます。 レンダリングコードをiframeのHTMLに配置し、HTMLソースのレンダリングに必要なデータを渡して、キャンバスにレンダリングしてから、toDataUrlデータを吐き出します。

+1

やあ。 解決策を探し、コードがどのように実行されるかを観察した後、私は独自のトリッキーな解決策を書きます。

https://gist.github.com/simonmysun/c6da13ce2827a374e71ccf07d9f08e2d

それは私のために働きます、そして私はそれが必要とする誰かを助けることを願っています。

ただし、将来的にはこのライブラリでサポートされることを願っています。

まだわかりませんが、問題は画像が途切れるということです。 クロムバージョン54.0.2840.99mを使用する場合
（半分の画像はスクリーンショットになりましたが、残りの半分は黒い画面になりました）

// the timeline show up 100%, but cut off, cause its static and not dynamic.
// (its cut off from the screen,but the size, and picture show as normal, 100% show)
// after moving to the canvas, everthing that not in the screen will get blank in chrome  
// it depends to the user screen, if i zoom out my chrome, i get 100% image.

ただし、Mozilla 50.0.2を使用している場合は、ズームアウトしなくても正常に機能します。 （100％画像）、

理由はわかりません。

コード：

var zenleft = $("#leftPanel").width();  //calculate left side
var zenright = $(".dataPanel").width();  //calculate right side
var after = zenright + zenleft + 250;  // add all

//add the css, even after add overflow still not working
$("#timelineTarget").css({"background-color":"white","width":after});   

 html2canvas(canvTimeline, {
    onrendered: function (canvas) {
            $("#previewImage").html(canvas);
            getCanvas = canvas;
   }
});

最後に、追加してこの問題を解決します

$("body").css({"width": "+="+after}); //after is a total of the width of the element i want to view

それで

var zenleft = $("#leftPanel").width();  //calculate left side
var zenright = $(".dataPanel").width();  //calculate right side
var after = zenright + zenleft + 250;  // add all
$("body").css({"width": "+="+after});  //add the body

//add the css
$("#timelineTarget").css({"background-color":"white","width":after});   

 html2canvas(canvTimeline, {
    onrendered: function (canvas) {
            $("#previewImage").html(canvas);
            $("#timelineTarget").css({"background-color":"white","width":old});   //turn it back
            $("body").css({"width": "-="+after});   //turn it back
            getCanvas = canvas;
   }
});

それがあなた自身の問題を解決することを願っています。

oncloneが正しい方法かもしれません。 cssを変更して、必要なものを取得できます。

こんにちはすべて、私はスクロール可能なdivを持っています。 div入力をcanvasパラメーターとして送信すると、ビューポートで使用可能なものがレンダリングされるだけです。 私はすべての解決策を試しました。 わかりませんでした。 divのコンテンツ全体をスクリーンショットとして取得する方法を誰かに教えてもらえますか？

@ruthraprakash 、私は同様の問題を抱えていました。 これは、最新バージョンでの私の単純な目的で機能します。

function fullhtml2canvas(el) {
    return new Promise(resolve => {
        html2canvas(el, {
            width: el.scrollWidth,
            height: el.scrollHeight,
        }).then(canvas => {
            resolve(canvas);
        });
    });
}

タイムラインチャートのスクリーンショットを撮るのに問題があります。 x軸の値を取得していません。 ティムラインチャートの画像を作成しているだけです。
`demoFromHTML（e）{
e.preventDefault（）;

  let input = window.document.getElementById('divToPDF');


  html2canvas(input)
  .then((canvas) => {

    const imgData = canvas.toDataURL('image/jpeg');

    const pdf = new pdfConverter("l", "pt");
    pdf.addImage(imgData, 'JPEG', 15, 110, 800, 250);
    pdf.save('test.pdf');
  });


}

`

• [ https://ibb.co/g9VwZYL]＃1 。 URL

長い間試してみましたが…でも大変です…おっしゃった通りにはいきませんでした。 スクロールがあっても「body」の場合はうまくいくことがわかりました...スクロールのある要素を持つdivでも同じことを達成したいと思います...この問題で私を助けることができれば私にとって大きな助けになります...私はあなたのコメントを楽しみにしています...

どうやって体を動かしたのか教えてください