我正在尝试使用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)
顺便说一下，我正在使用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>
我遇到了你描述的同样类型的错误，但我的错误是由于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的屏幕截图，可以这样做
html2canvas($('#div'), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
您可以尝试使用此代码捕获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);
}
});
可以使用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粘贴到模型中。希望它会有所帮助。
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肯定是一个有趣的代码！
你应该尝试这个（测试，至少在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();
}
});