web-dev-qa-db-ja.com

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

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

私はここのようないくつかの同様の質問を読みました

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

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

私はコードを試しました

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

.html2canvas()が呼び出された後、canvasRecordはundefinedになります

そしてこれも

$('#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日に編集

ジョエルの例 が機能していることがわかりました。

しかし、残念ながら、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>
javascripthtmlhtml5html2canvas
31
Timeless

私があなたが説明したのと同じタイプのエラーに遭遇しましたが、私のものは、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>
19
Joel Schlundt

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

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

このコードを試してdivをキャプチャできます。divが画面に対して非常に広いかオフセットしている場合

var div = $("#div")[0];
var rect = div.getBoundingClientRect();

var canvas = document.createElement("canvas");
canvas.width = rect.width;
canvas.height = rect.height;

var ctx = canvas.getContext("2d");
ctx.translate(-rect.left,-rect.top);

html2canvas(div, {
    canvas:canvas,
    height:rect.height,
    width:rect.width,
    onrendered: function(canvas) {
        var image = canvas.toDataURL("image/png");
        var pHtml = "<img src="+image+" />";
        $("#parent").append(pHtml);
    }
});
6
wang ye

Html2canvasを使用して簡単に実行できます。以下を試してください。

htmlモーダル内にdivを追加して、jquery関数を使用してモデルIDを呼び出してください。この関数では、表示する画像のサイズ（高さ、幅）を指定できます。モーダルを使用すると、ボタンのonclickでHTML divを画像に簡単にキャプチャできます。

たとえば、コードサンプルを見てください。

`

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">


            <div class="modal-body">
                <p>Some text in the modal.</p>

`

表示するdivをモデル内に貼り付けます。それが役立つことを願っています。

0
Thomas Martin

window.openは機能しませんでした...空白のページがレンダリングされただけですが... srcを置き換えることで、ページにpngを表示することができましたターゲットとして作成された既存のimg要素の属性。

$("#btn_screenshot").click(function(){
     element_to_png("container", "testhtmltocanvasimg");
});


function element_to_png(srcElementID, targetIMGid){
    console.log("element_to_png called for element id " + srcElementID);
    html2canvas($("#"+srcElementID)[0]).then( function (canvas) {
        var myImage = canvas.toDataURL("image/png");
        $("#"+targetIMGid).attr("src", myImage);
                console.log("html2canvas completed.  png rendered to " + targetIMGid);
    });
}
<div id="testhtmltocanvasdiv" class="mt-3">
   <img src="" id="testhtmltocanvasimg">
</div>

次に、レンダリングされたpngを右クリックして「名前を付けて保存」します。 「スニッピングツール」を使用して要素をキャプチャするのと同じくらい簡単かもしれませんが、html2canvasは確かに興味深いコードです。

0
user3232196