web-dev-qa-db-ja.com

html2canvasを使用した非表示のdivのスクリーンショット

非表示のdivのスクリーンショットを撮る方法は？以下のコードは非表示のdivでは機能しません。

[〜＃〜] html [〜＃〜]

<div id="mydiv" style="display:none;" >  
 <p>Text</p>
</div>

<div id="canvas" style="display:none;">
<p>Canvas:</p>
</div>

 <div id="image">

  </div>

[〜＃〜]スクリプト[〜＃〜]

<script>
  var elem = $('#printDiv');
        html2canvas(elem, {
            onrendered: function (canvas) {
                var data = canvas.toDataURL('image/png');
                var image = new Image();
                image.src = data;
                document.getElementById('image').appendChild(image);
            }
        });

</script>

Div "mydiv"のスタイルを 'display：block'に設定すると機能します。

javascriptjqueryhtml5-canvas
20
Midhuna

不透明度を0に設定して使用できます。サンプルの例を次に示します。

<div style="position: absolute; opacity: 0.0;">
    <div id="tempImageThumbnail"></div>
</div>
var tempImageThumb = $('#tempImageThumbnail');
tempImageThumb.append("<div>some text</div>");

html2canvas([tempImageThumb.get(0)], {
    onrendered : function(canvas) {
         document.body.appendChild(canvas);
    }
});
14
Trajche Manev
html2canvas(mydiv, {
    onclone: function (clonedDoc) {
        clonedDoc.getElementById('mydiv').style.display = 'block';
    }
}).then((canvas)=>{
//your onrendered function code here
})
8
varun sharma

Divで「display：none」の代わりに「visibility：none」を使用し、html2canvas.jsスクリプトファイルで次のように変更します-関数parseElementの変更

 if (getCSS(el, 'display') !== "none" && getCSS(el, 'visibility') !== "hidden")

に

if (getCSS(el, 'display') !== "none")
3
user3687972

これを達成するための独創的な方法があるかどうかはわかりません。 divを表示し、キャプチャして、もう一度非表示にしてみませんか？

var elem = $('#printDiv');

html2canvas(elem, {
    onrendered: function (canvas) {
        elem.show();
        var data = canvas.toDataURL('image/png');
        var image = new Image();
        image.src = data;
        document.getElementById('image').appendChild(image);
        elem.hide();
    }
});
1
Magnus Engdal

html2canvasは、クローンされたドキュメントを渡すことにより、「onclone」というオプションを提供します。そこで隠し要素の可視性を設定できます。

onclone: function(doc){
    hiddenDiv = doc.getElementById('myDiv');
    hiddenDiv.style.display = 'block';
}
1
Stalin

次のコードは私のために働いた。私はAngularをjsPdfおよびhtml2canvasライブラリで使用しています

    html2canvas(document.getElementById("pdfTable"), {
  onclone: function (clonedDoc) {

     // I made the div hidden and here I am changing it to visible
    clonedDoc.getElementById('pdfTable').style.visibility = 'visible';
  }
}).then(canvas => {
  // The following code is to create a pdf file for the taken screenshot
  var pdf = new jsPDF('l', 'pt', [canvas.width, canvas.height]);
  var imgData = canvas.toDataURL("PNG", 1.0);
  pdf.addImage(imgData, 0, 0, (canvas.width), (canvas.height));
  pdf.save('converteddoc.pdf');
});
0
M Fuat NUROĞLU

これは機能しています：

<div style="width:0;height:0;overflow: hidden"> <div> content to screenshot </div> </div>

0
Vladimir Mamulov