web-dev-qa-db-ja.com

html2canvasを使用してWebページのスクリーンショットを作成する（適切に初期化できない）

http://html2canvas.hertzen.com/ を使用して、ウェブページのスクリーンショットを撮ろうとしています。を使用してキャンバス要素を初期化できません...

var canvas = $('body').html2canvas();

適切なキャンバスを取得できた場合、次のようになります

var dataUrl = canvas.toDataURL(); //get's image string
window.open(dataUrl);             // display image

残念ながら、ドキュメントは非常に限られたIMOです。 http://html2canvas.hertzen.com/documentation.html 動的なグラフィックスを使用していないため、プリロードする必要があるとは思わない（ただし、そこまでは行かない）

この男が html2canvasを使用した画面キャプチャ で成功しているかどうかを理解するには、私は単純すぎます

私はこの仲間よりも遠くにいるようには見えません。 html2canvasを使用してスクリーンショットをアップロードするには？

私の理想的なソリューションは、最小限のコードでスクリーンショットを作成する方法を示します。 （htmlをキャンバスにコピーします。toDataURL文字列を取得します。出力文字列）

どんな洞察も大歓迎です=）

javascripthtmlscreenshothtml2canvas
17
mattyd

次のように使用する必要があります。

$('body').html2canvas();
var queue = html2canvas.Parse();
var canvas = html2canvas.Renderer(queue,{elements:{length:1}});
var img = canvas.toDataURL();
window.open(img);

それを理解するのに数時間かかり、正しい方法を使用しました。 {elements:{length:1}}は、プラグインの実装が不完全であるために必要です。そうでない場合、エラーが発生します。

幸運を！

19
Slavik Meltser

次のものも使用できます。

var html2obj = html2canvas($('body'));

var queue  = html2obj.parse();
var canvas = html2obj.render(queue);
var img = canvas.toDataURL();

window.open(img);
12
Aley

ページの一部を取得するには、次のように使用できます。

$('#map').html2canvas({
onrendered: function( canvas ) {
  var img = canvas.toDataURL()
  window.open(img);
}
9
Niklas Hoesl

これは私のために働いたものです。

html2canvas(document.body, {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

これにより、スクリーンショット用の新しいウィンドウが作成されました。

スクリーンショットのページの一部、具体的にはコンテナdivのみが必要でした。だから私は次のことをしました：

html2canvas($('#myDiv'), {
   onrendered: function(canvas) {
     var img = canvas.toDataURL()
     window.open(img);
  }
});

同じ質問を探している人にとって、上記のオプションが役に立たないなら、うまくいけばこれが役立つでしょう。

8
ckpepper02

次のコードを使用して、スクリーンショットをキャプチャし、スクリーンショットをダウンロードできます。

htmlボタンの作成

<button class="btn btn-default btn-sm" style="margin:0px 0px -10px 970px; padding:2px 4px 1px 4px" onclick="genScreenshot()"><span class="glyphicon glyphicon-envelope"></span></button>
<a id="test"></a>
<div id="box1"></div>

関数定義

<script type="text/javascript">                         
function genScreenshot() {
html2canvas(document.body, {
  onrendered: function(canvas) {
  $('#box1').html("");

  if (navigator.userAgent.indexOf("MSIE ") > 0 || 
                navigator.userAgent.match(/Trident.*rv\:11\./)) 
        {
    var blob = canvas.msToBlob();
    window.navigator.msSaveBlob(blob,'Test file.png');
  }
  else {
    $('#test').attr('href', canvas.toDataURL("image/png"));
    $('#test').attr('download','screenshot.png');
    $('#test')[0].click();
  }


  }
});
}  
</script>

注：関数を呼び出したhtmlボタンを作成しました。 testは属性であり、box1は、キャンバス要素を取得することです。

1
User1493