<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>Test</title>
<style type="text/css">
*{
margin:0 auto;
padding:0;
}
.btn{
width:100px;
height:30px;
line-height:30px;
background:green;
color:#fff;
border-radius:10px;
-webkit-border-radius:10px;
text-align:center;
display:block;
text-decoration:none;
}
.container{
background:#e5e5e5;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script>
<script>
$(function(){
$("#btn").click(function(){
html2canvas($("#container"), {
onrendered: function(canvas) {
//把截取到的图片替换到a标签的路径下载
$("#download").attr('href',canvas.toDataURL());
//下载下来的图片名字
$("#download").attr('download',new Date().getTime() + ".png");
//展示图片
document.body.appendChild(canvas);
}
});
});
});
</script>
</head>
<body>
<div style="padding:10px 0">
<div class="btn" id="btn">截取屏幕</div>
<p style="color:red; text-align:center;">先点击截取屏幕后再点击截图下载</p>
<div style="margin-top:10px">
<a href="javascript:;" rel="external nofollow" class="btn" id="download">截图下载</a>
</div>
</div>
<div class="container" id="container">
<p style="text-align:center">这里是待截取模块</p>
</div>
</body>
</html>
