<style>
.main{width:100%; background-color: #fff; color:#000;}
.main h2{ text-align: center;}
.main p{ text-align: left; padding: 0;}
.main hr{ margin-top: 0.3rem;}
.main table{ width: 100%;border-collapse: collapse;border-spacing: 0;}
.main table td,.main table th{ padding: 0.5rem; border:1px solid #ccc; text-align: center;}
.btn{ width: 6rem; height: 2rem; line-height: 2rem; text-align: center; color: #fff; background: red; }
</style>
<body>
<div class="btn">点击截图</div>
<div id="wrapper" class="main">
<div style="padding: 0 0.5rem 0.5rem; text-align: center;">
<table>
<thead>
<tr style="height: 1.5rem;">
<th style="vertical-align: middle;">姓名</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 25%;vertical-align: middle;">张三</td>
</tr>
<tr>
<td>
<img src="http://img30.360buyimg.com/jr_image/jfs/t1/16255/5/3354/9151/5c25d60bE3ddca4ec/b3b7cf8a310c375e.jpg" border="0" width="auto" height="auto" alt=""></td> </tr>
</tbody>
</table>
</div>
</div>
</body>
<script>
document.querySelector('.btn').onclick = function(){
html2canvas($("#wrapper")[0],{useCORS: true}).then(function(canvas){
var imgUri = canvas.toDataURL();
$("body").append('<a href="'+imgUri+'" download="下载的图片">保存图片</a>');
})
}
</script>
<script src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>html2canvas实现保存dom节点为图片
猜你喜欢
转载自blog.csdn.net/qq_34527715/article/details/85787103
今日推荐
周排行