41

を使用してdivを画像にキャプチャしようとしていますhtml2canvas

ここで同様の質問をいくつか読みました

html2canvas を使用してスクリーンショットをアップロードするには?

html2canvas を使用して Web ページのスクリーンショットを作成する (正しく初期化できない)

コードを試してみました

canvasRecord = $('#div').html2canvas(); 
dataURL = canvasRecord.toDataURL("image/png");

と呼ばcanvasRecordれるundefined_.html2canvas()

そしてこれも

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

ブラウザは、次のようないくつかの（正確には48個の）同様のエラーを返します。

GET http://html2canvas.appspot.com/?url=https%3A%2F%2Fmts1.googleapis.com%2Fvt%…%26z%3D12%26s%3DGalileo%26style%3Dapi%257Csmartmaps&callback=html2canvas_1 404 (Not Found)

ところで、私はv0.34を使用していて、参照ファイルhtml2canvas.min.jsを追加しましたjquery.plugin.html2canvas.js

画像をキャプチャするためにをdiv変換するにはどうすればよいですか。canvas

2013 年 3 月 26 日編集

Joel のサンプル作品を見つけました。

残念ながら、Google マップをアプリに埋め込むと、エラーが発生します。

<html>
<head>
<style type="text/css">
div#testdiv
{
    height:200px;
    width:200px;
    background:#222;
}
div#map_canvas
{
    height: 500px;
    width: 800px;
    position: absolute !important;
    left: 500px;
    top: 0;
}
</style>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script language="javascript">
$(window).load(function(){
     var mapOptions = {
        backgroundColor: '#fff',
        center: new google.maps.LatLng(1.355, 103.815),
        overviewMapControl: true,
        overviewMapControlOptions: { opened: false },
        mapTypeControl: true,
        mapTypeControlOptions: { position: google.maps.ControlPosition.TOP_LEFT, style: google.maps.MapTypeControlStyle.DROPDOWN_MENU },
        panControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
        zoomControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
        streetViewControlOptions: { position: google.maps.ControlPosition.RIGHT_CENTER },
        disableDoubleClickZoom: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        minZoom: 1,
        zoom: 12
    };
    map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    $('#load').click(function(){

            html2canvas($('#testdiv'), {
                onrendered: function (canvas) {
                    var img = canvas.toDataURL("image/png")
                    window.open(img);
                }
            });

    });
});
</script>
</head>
<body>
<div id="testdiv">
</div>
<div id="map_canvas"></div>
<input type="button" value="Save" id="load"/>
</body>
</html>
4

8 に答える 8

24

私はあなたが説明したのと同じタイプのエラーに遭遇しましたが、私のものはdomが完全に準備ができていなかったことが原因でした. jQuery セレクターに異常がないことを確認するために、jQuery で div をプルすることと getElementById の両方をテストしました。以下は、Chrome で動作する例です。

<html>
<head>
<style type="text/css">
div {
    height: 50px;
    width: 50px;
    background-color: #2C7CC3;
}
</style>
<script type="text/javascript" src="html2canvas.js"></script>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script language="javascript">
$(document).ready(function() {
//var testdiv = document.getElementById("testdiv");
    html2canvas($("#testdiv"), {
        onrendered: function(canvas) {
            // canvas is the final rendered <canvas> element
            var myImage = canvas.toDataURL("image/png");
            window.open(myImage);
        }
    });
});
</script>
</head>
<body>
<div id="testdiv">
</div>
</body>
</html>
于 2013-02-07T23:39:10.803 に答える
22

divのスクリーンショットが必要な場合は、次のようにできます

html2canvas($('#div'), {
  onrendered: function(canvas) {
    var img = canvas.toDataURL()
    window.open(img);
  }
});
于 2013-02-06T07:40:32.170 に答える
2

お返事が遅くなるかわかりませんが、こちらのフォームを利用させていただきました。

JS:

function getPDF()  {
       html2canvas(document.getElementById("toPDF"),{
        onrendered:function(canvas){
 
        var img=canvas.toDataURL("image/png");
        var doc = new jsPDF('l', 'cm'); 
        doc.addImage(img,'PNG',2,2); 
        doc.save('reporte.pdf'); 
       }
    }); 
}

HTML:

<div id="toPDF"> 
    #your content...
</div>

<button  id="getPDF" type="button" class="btn btn-info" onclick="getPDF()">
    Download PDF
</button>
于 2020-11-03T09:11:29.240 に答える
1

以下のスニペットを使用するだけで、部門のスクリーンショットを取得して簡単に保存できます。ここでは、本文全体を使用しています。id/class 名を入力するだけで、特定の image/div 要素を選択できます。

 html2canvas(document.getElementsByClassName("image-div")[0], {
  useCORS: true,
}).then(function (canvas) {
  var imageURL = canvas.toDataURL("image/png");
  let a = document.createElement("a");
  a.href = imageURL;
  a.download = imageURL;
  a.click();
});
于 2020-11-09T07:50:10.700 に答える
-2

これを試してみてください（テスト、少なくともFirefoxで動作します）：

html2canvas(document.body,{
   onrendered:function(canvas){
      document.body.appendChild(canvas);
   }
});

これらのコード行を実行して、ブラウザの全画面（ホールサイトではなく、表示されている画面のみ）を取得します。

var w=window, d=document, e=d.documentElement, g=d.getElementsByTagName('body')[0];
var y=w.innerHeight||e.clientHeight||g.clientHeight;

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

詳細な説明とオプションはこちら： http： //html2canvas.hertzen.com/#/documentation.html

于 2013-02-07T22:22:19.490 に答える