可以自定义选区截图网页，适合需要生成网页截图的网站使用。
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<title>我爱搜www.wuisou.com网页截图html代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript" >
$(document).ready( function(){
$(".example1").on("click", function(event) {
$(".example1").hide();
html2canvas(document.querySelector("body")).then(canvas => {
var dataUrl = canvas.toDataURL();
$(".myimg").show();
var element = document.getElementById('myimage');
element.src = dataUrl;
});
});
$(".close").click(function(){
$(".myimg").hide();
});
});
</script>
<style>.myimg{width: 60%;
height: auto;
display: none;
position: fixed;
z-index: 99;margin:12px;
top: 10%;
left: 10%;
background-color: #fff;
text-align: center;
-webkit-background-clip: content;
box-shadow: 1px 1px 50px rgba(0,0,0,.3);}
#myimage{ width: 100%;height: 100%;}</style>
</head>
<body>
<div id="tu" style="background-color: #abc;padding:200px;">截图部分 </div>
<input class="example1" type="button" value="截图">
<br><br><br>
<div class="myimg">点击下方图片保存
<a href="javascript:;" class="close">点我关闭</a><p>
<a><img id="myimage" src="" alt="长按保存" title="长按保存图片"/></a></p></div>
</body>
</html>
可以直接复制代码使用，或者保存为html文件测试。
支持点击隐藏。
更多网页代码可以访问：我爱搜技术资源