Html2canvas: 「display：none」でdivのコンテンツを取得できません

作成日 2016年03月06日 · 10コメント · ソース: niklasvh/html2canvas

こんにちは私は隠されているdivのスクリーンショットを撮りたいです

これは私が試したコードです
HTML：

<div` id="visible">
hello there!!
</div>
<div id="hidden" style="display:none">
You can't see me :P
</div>

JS：

var elem1=$("#hidden");
if(!elem1.is(":visible"))
{
elem1.show();elem1.fadeIn(1);elem1.fadeOut(1);
}
html2canvas(elem1).then(function(canvas){

$("body").append(canvas);

});

ブラウザのエラー：
****

Uncaught TypeError：nullhtml2canvas @ html2canvas.js：941（無名関数）@HtmlPageのプロパティ 'length'を読み取れません。 html：13

****
私のフィドル：https ：//jsfiddle.net/h39tp0Ly/2/

これで私を助けてください

ソース

Spartan-Arun

最も参考になるコメント

こんにちは、私はAngular6と "html2canvas"を使用して、 "jsPdf"でPDFを作成しています....非表示のdivにスクリーンショットを撮りたかったのですが、達成するまでできませんでした

キャプチャはID「html-pdf」のdivに対して行われます

「HTML」
`学生証/ a>

div id = "pdf" * ngIf = "test" style = "text-align：center; margin-top：5px;">
div id = "html-pdf">

/ div
/ div`

「jsまたは角度はTypescriptです」
`download2（）{
var imgcab：文字列;
imgcab = this.base64logo.trim（）;

html2canvas（document.getElementById（ 'html-pdf'）、{scale：2}）。次に（関数（キャンバス）{

var img = canvas.toDataURL（ "image / png"、1）;

var doc = new jsPDF（{
向き： 'p'、
単位： 'mm'、
フォーマット： 'レター'、
}）;

doc.addImage（img、 'PNG'、2,2,212,272）;
doc.addImage（imgcab、 'JPEG'、5、5、30、30）;
doc.save（ 'testCanvas.pdf'）;
}）; `

そして、画面内のdivを非表示にするための最も重要なこと。

「CSS」
#pdf { overflow: hidden; height: 0; }

コードは、非表示のdiv "pdf"内にあるdiv "html-pdf"のキャプチャを使用してpdfを作成します...

私はあなたが彼らに仕えることを望みます

私はこれをスペイン語で書き、チリから翻訳されました。

kuraudeo 2018年07月27日

👍14 ❤11

全てのコメント10件

Html2canvasは、 display：noneスタイルを正しく解釈するため、非表示の要素をレンダリングしません。必要なことを実現するために、ページビューポートから表示要素を完全に配置することができます（「非表示要素をレンダリングする」ことが必要な場合）。

herringtown 2016年03月11日

役に立つかもしれません。
ありがとう！

atefBB 2016年09月27日

divに「 display：none 」ではないcssがある場合にのみ機能します。そこで、.show（）と.hide（）の組み合わせを使用して、要素を表示および非表示にしてCanvasを形成しました。

Spartan-Arun 2017年01月04日

       onclone: function(document) {
            hiddenDiv = document.getElementById("render");
            hiddenDiv.style.display = 'block';
        }

インターネットで情報を見つけました。「 display：none 」を使用してcssを指定されたdivに設定してから、上記のようにオプションoncloneを追加できます。 Plzはオプション「loggin：true」を追加して何が起こるかを確認します

karsondang 2017年01月23日

実際には、絶対位置と左上/左の負の値を持つビューポートからコンテナを配置するトリック-Firefoxでは機能せず、NS_ERROR_FAILURE例外がスローされます

Chromeでも動作します

nettiopsu 2018年02月14日

私はごく最近この問題に遭遇しました。特定のdivを非表示にしてスクリーンショットを表示したい場合は、cssプロパティを次のように設定します。

height: 0%
overflow:hidden

kchen1025 2018年06月07日

😕5 👎2 👍2

これは私にはうまくいきません

chidiwilliams 2018年07月14日

結局、ターゲットdivの直後にキャンバスを生成し、キャンバスがロードされた直後にdivを非表示にしました。ちらつきはほとんど目立たない。

私のコードは次のようになります：

<div id="capture">
  ...
</div>
<div id="end"></div>

html2canvas(document.querySelector("#capture")).then(canvas => {
  $("#end").append(canvas)
  $("#capture").hide()
});