18

http://html2canvas.hertzen.com/を使用して自分のWebページのスクリーンショットを撮ろうとしています。を使用してcanvas要素を初期化できません...

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をcanvasにコピーします。gettoDataURL文字列。出力文字列）

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

4

5 に答える 5

19

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

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

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

幸運を！

于 2012-05-09T23:46:42.660 に答える
12

次を使用することもできます。

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

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

window.open(img);
于 2012-08-30T11:50:46.523 に答える
9

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

$('#map').html2canvas({
onrendered: function( canvas ) {
  var img = canvas.toDataURL()
  window.open(img);
}
于 2012-10-19T09:08:09.287 に答える
8

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

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);
  }
});

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

于 2013-04-10T15:58:50.880 に答える
1

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

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、canvas要素を取得するためのものです。

于 2016-10-18T06:03:36.720 に答える