<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面截屏</title>
<script src="https://cdn.bootcss.com/jquery/3.3.0/jquery.min.js"></script>
<script src="https://blog-static.cnblogs.com/files/lovling/html.canvas.js"></script>
</head>
<style type="text/css">
#box {
width: 360px;
}
.dom-area {
width: 360px;
background: white;
}
.dom-area-line {
height: 44px;
font-size: 0;
border-bottom: 1px solid #e5e5e5;
}
.dom-area-line > span {
display: inline-block;
vertical-align: top;
line-height: 44px;
width: 60px;
font-size: 14px;
text-indent: 14px;
}
.dom-area-line > input {
display: inline-block;
vertical-align: top;
border: none;
height: 42px;
line-height: 42px;
width: 300px;
outline: none;
}
.cut-button {
font-size: 0;
height: 44px;
background: #000000;
}
.cut-button > a {
display: inline-block;
width: 180px;
line-height: 44px;
font-size: 16px;
color: #ffffff;
text-align: center;
text-decoration: none;
}
.cut-area {
width: 360px;
}
.cut-area > canvas {
width: 360px;
}
</style>
<body>
<div id="box">
<div class="dom-area">
<div class="dom-area-line">
<span>姓名:</span>
<input type="text" />
</div>
<div class="dom-area-line">
<span>性别:</span>
<input type="text" />
</div>
<div class="dom-area-line">
<span>生日:</span>
<input type="text" />
</div>
</div>
<div class="cut-button">
<a id="cuts-outs">截屏</a>
<a id="down-load">下载</a>
</div>
<div class="cut-area"></div>
</div>
</body>
<script type="text/javascript">
var domArea = $('.dom-area');
var cutArea = $('.cut-area');
var downLoad = $("#down-load");
$("#cuts-outs").on("click", function (ev) {
html2canvas(domArea, {
onrendered: function (canvas) {
// 将生成的 canvas 放入到 dom 中, 这里可以做画布操作
cutArea.append(canvas);
// 将操作完成的画布转化为 base64 编码的文件
dataURL = canvas.toDataURL("image/png");
console.log(dataURL);
// 将文件设置到下载区, 点击就能下载了
downLoad.attr("href", dataURL);
downLoad.attr("download", 'myjobdeer.png');
}
});
});
</script>
</html>
网友评论