Javascript 使用 html2canvas 将 div 捕获到图像中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14595541/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
capture div into image using html2canvas
提问by Timeless
I'm trying to capture a div into an image using html2canvas
我正在尝试使用将 div 捕获到图像中 html2canvas
I have read some similar question here like
我在这里阅读了一些类似的问题
How to upload a screenshot using html2canvas?
create screenshot of web page using html2canvas (unable to initialize properly)
使用 html2canvas 创建网页截图（无法正确初始化）
I have tried the code
我试过代码
canvasRecord = $('#div').html2canvas();
dataURL = canvasRecord.toDataURL("image/png");
and the canvasRecordwill be undefinedafter .html2canvas()called
而canvasRecord将undefined后.html2canvas()称为
and also this
还有这个
$('#div').html2canvas({
onrendered: function (canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
browser gives some (48 to be exact) similar errors like:
浏览器给出了一些（准确地说是 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, I'm using v0.34 and I have added the reference file html2canvas.min.jsand jquery.plugin.html2canvas.js
顺便说一句，我使用的是 v0.34 并且我已经添加了参考文件html2canvas.min.js和jquery.plugin.html2canvas.js
How can I convert the divinto canvasin order to capture the image.
如何将其div转换canvas为以捕获图像。
EDIT on 26/Mar/2013
2013 年 3 月 26 日编辑
I found Joel's exampleworks.
我发现乔尔的例子有效。
But unfortunately when Google map embedded in my app, there will be errors.
但不幸的是，当我的应用程序嵌入谷歌地图时，会出现错误。
<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>
回答by Joel Schlundt
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:
我遇到了你描述的相同类型的错误，但我的错误是由于 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>
回答by J.J. Kim
If you just want to have screenshot of a div, you can do it like this
如果你只是想有一个 div 的截图，你可以这样做
html2canvas($('#div'), {
onrendered: function(canvas) {
var img = canvas.toDataURL()
window.open(img);
}
});
回答by wang ye
you can try this code to capture a div When the div is very wide or offset relative to the screen
您可以尝试使用此代码捕获 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);
}
});
回答by Thomas Martin
It can be easily done using html2canvas, try out the following,
使用 html2canvas 可以轻松完成，请尝试以下操作，
try adding the div inside a html modal and call the model id using a jquery function. In the function you can specify the size (height, width) of the image to be displayed. Using modal is an easy way to capture a html div into an image in a button onclick.
尝试在 html 模式中添加 div 并使用 jquery 函数调用模型 ID。在该函数中，您可以指定要显示的图像的大小（高度、宽度）。使用 modal 是一种在按钮 onclick 中将 html div 捕获到图像中的简单方法。
for example have a look at the code sample,
例如看看代码示例，
`
`
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<p>Some text in the modal.</p>
`
`
paste the div, which you want to be displayed, inside the model. Hope it will help.
将要显示的 div 粘贴到模型中。希望它会有所帮助。
回答by user3232196
window.opendidn't work for me... just a blank page rendered... but I was able to make the png appear on the page by replacing the srcattribute of a pre-existing imgelement created as the target.
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>I can then right-click on the rendered png and "save as". May be just as easy to use the "snipping tool" to capture the element, but html2canvas is an certainly an interesting bit of code!
然后我可以右键单击渲染的 png 并“另存为”。使用“截图工具”来捕获元素可能同样容易，但是 html2canvas 肯定是一段有趣的代码！
回答by Marcus
You should try this (test, works at least in Firefox):
你应该试试这个（测试，至少在 Firefox 中有效）：
html2canvas(document.body,{
onrendered:function(canvas){
document.body.appendChild(canvas);
}
});
Im running these lines of code to get the full browser screen (only the visible screen, not the hole site):
我运行这些代码行以获得完整的浏览器屏幕（只有可见屏幕，而不是孔站点）：
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();
}
});
More explanations & options here: http://html2canvas.hertzen.com/#/documentation.html
更多解释和选项在这里：http: //html2canvas.hertzen.com/#/documentation.html
