使用 html2canvas 将 div 捕获到图像中

Posted

技术标签:

【中文标题】使用 html2canvas 将 div 捕获到图像中【英文标题】:capture div into image using html2canvas 【发布时间】:2013-01-13 18:27:47 【问题描述】:

我正在尝试使用 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");

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

【问题讨论】:

我在你的另一个问题中告诉过你 Google 不允许这样做:***.com/revisions/14580361/1 如何读取div,然后自己绘制内容? jsbin.com/atijon/3/edit 这对你有用吗?(我没有找到内置 0.34,所以它是 0.40)我会解释它是否是你正在寻找的答案。 你在哪里得到这些错误?在我的样本中?为什么问题甚至与 googleapis.com 有关? http://html2canvas.appspot.com/ 不存在的那个问题的原因 【参考方案1】:

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

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

【讨论】:

我们如何将其保存为弹出保存选项?【参考方案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

【讨论】:

【参考方案3】:

我遇到了与您描述的相同类型的错误,但我的错误是由于 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. 如果您将其托管在服务器中,它将起作用。 这个html2canvas元素是否兼容IE8及以下版本? @Hariprasath:直到 v0.3.4,但后来他们放弃了支持。我尝试使用 v0.3.4,但这至少会给我带来错误。【参考方案4】:

当 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);
    
);

【讨论】:

【参考方案5】:

用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 粘贴到模型中。希望它会有所帮助。

【讨论】:

【参考方案6】:

window.open 对我不起作用......只是呈现了一个空白页面......但我能够通过替换 srcimg 元素的 /strong> 属性。

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

【讨论】:

【参考方案7】:

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

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>

【讨论】:

【参考方案8】:

您只需使用下面的 sn-p 即可获取部门的屏幕截图轻松保存。这里我用的是整个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();
);

【讨论】:

为什么需要 useCORS? 如果您对应的 div 包含来自其他域的任何图像,如果您没有启用 useCors,它将不会显示该图像。就我而言,我有一些来自其他 blob 存储域的图像,因此启用了 useCors。

以上是关于使用 html2canvas 将 div 捕获到图像中的主要内容,如果未能解决你的问题,请参考以下文章

将div转换为可下载的图像

解决-使用html2canvas截取页面时,页面的div背景图无法截取并跨域

如何从 html2Canvas 调整 DIV 中的画布输出大小?

html2canvas 更改 div

HTML2Canvas 不呈现完整的 div,只呈现屏幕上可见的内容?

Js实现将html页面或div生成图片