Question

我正在尝试使用html2canvas

将div捕获到图像中

我在这里读过类似的问题，如

How to upload a screenshot using html2canvas?

create screenshot of web page using html2canvas (unable to initialize properly)

我试过了代码

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)

BTW，我正在使用v0.34并添加了参考文件html2canvas.min.js和jquery.plugin.html2canvas.js

如何将div转换为canvas以捕获图像。

2013年3月26日编辑

我发现Joel's example有效。

但遗憾的是，当谷歌地图嵌入我的应用程序时，会出现错误。

<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>

Answer 1

我遇到了你所描述的同一类型的错误，但我的错误是由于dom没有完全准备好去。我测试了jQuery拉div和getElementById只是为了确保jQuery选择器没有奇怪的东西。以下是适用于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>

Answer 2

如果您只想获得div的屏幕截图，可以这样做

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

Answer 3

您可以尝试使用此代码捕获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);
    }
});

Answer 4

您可以使用以下代码段获取分区的屏幕截图，并轻松保存。在这里，我使用了整个主体，您只需输入id /类名就可以选择特定的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();
});

Answer 5

使用html2canvas可以轻松完成，请尝试以下方法，

尝试将div添加到html模式中，并使用jquery函数调用模型ID。在该功能中，您可以指定要显示的图像的尺寸（高度，宽度）。使用模式是一种将HTML div捕获到按钮onclick中的简单方法。

例如查看代码示例

`

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


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

`

将要显示的div粘贴到模型内部。希望它会有所帮助。

Answer 6

window.open 不适用于我...仅呈现了一个空白页面...但是我可以通过替换 src < / strong>属性创建为目标的现有 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无疑是有趣的代码！

Answer 7

我不知道答案是否会迟到，但是我已经使用了此表格。

JS：

function showScore(data) {
    quiz.style.display = "none";
    scoreBlock.style.display = "block";
    scoreBlock.innerHTML = "<p> You scored " + score + " out of " + data.length + "</p>";
    console.log(score);
    if (score < 4) {
        scoreMessage.innerHTML = "<p>Not so good! Time for some revision.</p>";
    }
    else if (score < 8) {
        scoreMessage.innerHTML = "<p>Pretty good! But still room for improvement.</p>"
    }
    else {
        scoreMessage.innerHTML = "<p>Great work! You really know your birds!</p>"
    }

        $.ajax({
            type: "post",
            url: "Home/InsertScore",
            dataType: "json",
            data: { score: score, status: 1},
            success: function (data) {
                console.log("Success");
            },
            error: function () {
                console.log("error");
            }
    });
    scoreMessage.style.display = "block";
    quizAgain.style.display = "block";
}

HTML：

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

Answer 8

你应该尝试这个（测试，至少在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();
   }
});

更多解释＆amp;这里的选项：http://html2canvas.hertzen.com/#/documentation.html

使用html2canvas将div捕获到图像中

8 个答案: