41

我正在尝试使用将 div 捕获到图像中html2canvas

我在这里读过一些类似的问题

如何使用 html2canvas 上传屏幕截图？

使用 html2canvas 创建网页截图（无法正确初始化）

我试过代码

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 的例子很有效。

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

<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

I ran into the same type of error you described, but mine was due to the dom not being completely ready to go. I tested with both jQuery pulling the div and also getElementById just to make sure there wasn't something strange with the jQuery selector. Below is an example that works in 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 回答
11

您可以尝试使用此代码捕获 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);
    }
});
于 2017-05-15T08:32:14.263 回答
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

window.open对我不起作用......只是呈现了一个空白页面......但我能够通过替换作为目标创建的预先存在的img元素的src属性来使 png 出现在页面上。

$("#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 无疑是一段有趣的代码！

于 2019-05-22T17:47:25.683 回答
1

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

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

例如看一下代码示例，

` 

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


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

`

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

于 2019-04-04T06:45:50.263 回答
1

您可以使用以下代码段获取部门的屏幕截图并轻松保存。这里我使用了整个 body，你可以通过输入 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 回答