使用 html2canvas 将 div 捕获到图像中

IT技术 javascript html html2canvas
2021-03-14 19:51:16

我正在尝试使用以下方法将 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 日编辑

我发现乔尔的例子有效。

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

<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>
6个回答

我遇到了你描述的相同类型的错误，但我的错误是由于 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>
我尝试了另一个测试，并添加了一个图像作为 div 的元素，并将 div 的背景更改为图像。基本上，如果您尝试从 chrome 中的文件系统访问 html 或图像文件，它将不起作用。安全限制将导致它失败。 Unable to get image data from canvas because the canvas has been tainted by cross-origin data.如果您将其托管在服务器中，它将起作用。
2021-04-20 19:51:16
这个 html2canvas 元素在 IE8 及以下版本中是否兼容？
2021-04-22 19:51:16
@Hariprasath：直到 v0.3.4，但后来他们放弃了支持。我尝试使用 v0.3.4，但这至少会给我带来错误。
2021-05-02 19:51:16

如果你只是想有一个 div 的截图，你可以这样做

html2canvas($('#div'), {
  onrendered: function(canvas) {
    var img = canvas.toDataURL()
    window.open(img);
  }
});
我们如何将其保存为弹出式保存选项？
2021-05-10 19:51:16

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

不知道会不会迟到，但是我用过这个表格。

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>

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

尝试在 html 模式中添加 div 并使用 jquery 函数调用模型 ID。在该函数中，您可以指定要显示的图像的大小（高度、宽度）。使用 modal 是一种在按钮 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 粘贴到模型中。希望它会有所帮助。

其它你可能感兴趣的问题
上一篇如何比较 Javascript 中的 Unicode 字符串？ 下一篇使用 javascript 和 websockets 显示 blob 中的图像