Html2canvas: 表示されているものだけをレンダリングします

どういうわけか、ホームページの例では、表示されていないものも含めて、体のすべてが表示されています...どのようにそれを行いましたか？

重複の可能性： https ：

では、指定された要素をどのようにキャプチャできるか知りたいですか？ 誰かが解決策を持っていますか？

@justeinこれを試してみてください

<div id="test-case">Test-me</div>

html2canvas(document.getElementById("test-case")).then(function(canvas) {
    document.body.appendChild(canvas);
});

この動作は最新バージョンで確認できます。 要求されたオブジェクトの正しいサイズをレンダリングしますが、現在のビューポートの画面外にあるものを実際にキャンバスにレンダリングすることはありません。 したがって、

<div id="test-case">Test-me</div>

現在ブラウザに表示されている場合は、レンダリングされます。 画面外の場合、キャンバスは空白です（ただし適切なサイズです）。 部分的に表示：部分的にレンダリングされます。 MineはscrollHeight = 0のようには機能せず、コードの実行時に表示されるものをすべてレンダリングします。 （私のボタンは下部にあります）。

btmのコメントのように、サンプルサイトでどのように行われているのか知りたいです。 画面外のリソースを取得するためにAngularまたはBootstrapの何かに依存している可能性がありますか？

@cchubbAngleとBootstrapがこれと何の関係があるのか​​わかりません。 ジョンの問題は、私には特定の要素をレンダリングすることの問題のようです。

ビューポートの外側にあるレンダリングが必要な場合は、

html2canvas(document.body).then(function (canvas) {});

要素を「オーバーフロー」でレンダリングする場合は、実行時に「オーバーフロー」を削除し、次のように、JavaScriptを使用してclassNameを追加するプロセスの後に再度追加します。

.no-scroll {
     overflow: visible !important;
}

#main {
     overflow: auto;
     height: 200px;
}

<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>

document.getElementById("main").className = "no-scroll";
html2canvas(document.body).then(function (canvas) {
      document.getElementById("main").className = "";
});

または、次のように、html2canvasをポイントして、要素内の要素を「オーバーフロー」でレンダリングします。

#parent {
     overflow: auto;
     height: 200px;
}

#child {
background-color: #fc0;
height: 600px;
}
<div id="parent">
<div id="main">
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
test<br> test<br> test<br> test<br> test<br> test<br> test<br> test<br> 
</div>
</div>

html2canvas(document.getElementById("main")).then(function (canvas) {});

私の観点からは不要な機能については、本当に多くの提案があります。正しいDOM要素をターゲットにして、「CSS」を使用してください。

私はそれを考え出した。 0.5.0-alpha2で修正しました。 0.5.0-alpha1バージョンを使用するとクリップされますが、alpha2バージョンはクリップされません。 リリースページがalpha1に焦点を合わせていたので、alpha2が利用可能であることにさえ気づきませんでした。

これは、alpha2で現在機能していることを示すフィドルです。 https://jsfiddle.net/cchubb/fy7tw7ek/1/外部リソースをalpha1に戻すと、下部のリンクがクリックされたときにクリップされます。 （ダウンロードファイルを表示するには、ダウンロードファイルを.pngとして保存する必要があります。フィドルでは、出力ウィンドウのhrefをデータに変更できません。）

@ btm1 、

@cchubbこれを

@cchubb根本的な問題は、アルファ2で修正されています。

うーん、私にとってはalpha2でも、ビューポートで「表示」されている要素の部分だけがレンダリングされます。 デモについては、 http： //jsfiddle.net/NPC42/ykvL6a17/を参照してください。html2canvasは、ビューポートにスクロールされた行のみをエクスポートします（スクロールされたコンテナdivに表示されているかどうかは関係ありません）。

どういうわけかhtml2canvasを間違って呼んでいますか？ 実際のコード（デモ用に作成したJSFiddleコードではない）でテストすると、この提案は要素全体をレンダリングするのに役立ちます： https ：

@NPC何もしなくても、表示されていないものがレンダリングされるだけでなく、オーバーフローが表示されるように変更する必要があります--->非常にすばやくエクスポートします--->次に、元に戻してスクロールし直さないと機能しません。 理想的なIMOではありません。機能させるだけのオプションがあるはずですが、少なくとも機能します。

@ btm1 、はい、それは意図ではないと思います。スクロールされた要素内にある要素を渡すので、要素自体にはオーバーフロートリミングがありません。

今のところ、私のアプリでは、要素全体をボディに再アタッチして、特定の幅/高さを強制する必要があることがわかりました（絶対に配置された要素が含まれているため）。その間に、このキッチン全体をフルスクリーンの「エクスポートの準備、 html2canvasはすべてをレンダリングするのに10秒以上かかるため、「お待ちください」オーバーレイ。 レンダリングが完了したら、幅/高さの設定を解除して、元の場所（スクロールされたコンテナ内）にアタッチし直します。

面倒ですが、機能します。

不思議なことに、指定された要素の現在表示されている上部境界からのみレンダリングされます。

https://jsfiddle.net/bianjp/bpc3nq69/1/をお試し
バージョン0.5.0.beta4を使用します。

解決策は、html2canvasを呼び出す前に、 $('html, body').scrollTop(0) （または要素の上部を表示する他の方法）を呼び出すことです。

修正案をありがとう@bianjp 。

不思議なことに、指定された要素の現在表示されている上部境界からのみレンダリングされます。

それは正常な動作ですか...それは私には非常に奇妙に見えます！

+1

このSOの答えは私のために働いた。

html2canvasを呼び出す前に、レンダリングする要素をビューポートにスクロールします。

const el = document.querySelector('#test')
el.scrollIntoView()
setTimeout(function () {
  html2canvas(el, {
    onrendered: function (canvas) {
      document.body.appendChild(canvas)
    },
    useCORS: true
  })
}, 10)

わたしにはできる。
使用バージョンは0.5.0-beta4です。

これはまだv1.0.0の問題ですか？ もしそうなら、 jsfiddleで例を共有して

この問題は、元の作成者からの詳細情報の要求に対する応答がなかったため、自動的にクローズされました。 現在問題になっている情報だけでは、行動を起こすのに十分な情報がありません。 さらに調査できるように、必要な回答がある場合はご連絡ください。

ねえ、@ niklashvh

また、DOMにのみ表示されるスナップショットを取得するという問題にも直面していました。 私はバージョン0.5.0-beta4を持っています
だから、私は@ziyoungソリューションに同意します。 私は彼が提案したのと同じことをしました。

           `$('html,body').scrollTop(0);

     html2canvas( $("#rectangular_div"), {
         useCORS: true,
         dpi: 200,

          onrendered:function(canvas) {

              var str = canvas.toDataURL("image/png");
              var contentType = 'image/png';
              console.log(str);
              b64Data =str;
              imgFrameSave();
          }
        })`

そこで、上部0のdiv位置を本体に設定してから、html2canvasを呼び出します。 したがって、私の経験によれば、@ eKoopmansによるバージョン0.5.0-beta4を使用することをお勧めします。これにより、画像のpix-elationの問題を回避し、DOMから完全な画像をキャプチャできます。

デスクトップでは機能しますが、モバイルでは機能しません

私がしたことは、htmltocanvas（）を呼び出す前にwindow.scrolTo(0,0)です。画面の上にいる場合は、divが完全に出力されます。