html2canvas网页截图

最新推荐文章于 2025-10-30 13:49:29 发布

原创最新推荐文章于 2025-10-30 13:49:29 发布 · 4.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #前端 #javascript #截图

WEB前端专栏收录该内容

13 篇文章

订阅专栏

本文展示了如何使用HTML2Canvas工具将HTML页面截图并下载。通过实例演示了截图后将其追加到原页面及下载功能的实现。

html2canvas工具请自行搜索:

将相应的引入的js库的路径改变后存到本地即可使用:

HTML页面一:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--此网页演示了html2canvas截图后将截图后的网页追加到了原网页之上 -->
	<head>
	    <!-- base.js实际上是jquery库,html2canvas.js是html2canvas自带的js库 -->
		<script type="text/javascript" src="./WEB-INF/JS/html2canvas.js"></script>
		<script type="text/javascript" src="./WEB-INF/JS/base.js"></script>
		<title>MyHtml.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!--需要注意的是,这里一定要等待js库和网页加载完毕后再执行函数  -->
		<script type="text/javascript">
$(function(){
     alert("函数调用成功");
	html2canvas(document.body, {
		onrendered : function(canvas) {
			document.body.appendChild(canvas);
		}
	});
});
</script>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style>
.feedback-overlay-black {
	background-color: #000;
	opacity: 0.5;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}
</style>

		<style>
div {
	padding: 20px;
	margin: 0 auto;
	border: 5px solid black;
}

h1 {
	border-bottom: 2px solid white;
}

h2 {
	background: #efefef;
	padding: 10px;
}
</style>
	</head>
	<body>
		<div style="background: red;">
			<div style="background: green;">
				<div style="background: blue; border-color: white;">
					<div style="background: yellow;">
						<div style="background: orange;">
							<h1>
								Heading
							</h1>
							Text that isn't wrapped in anything.
							<p>
								Followed by some text wrapped in a
								<b><p> paragraph.</b>
							</p>
							Maybe add a
							<a href="#">link</a> or a different style of
							<a href="#" style="background: white;" id="highlight">link
								with a highlight</a>.
							<hr />
							<h2>
								More content
							</h2>
							<div
								style="width: 10px; height: 10px; border-width: 10px; padding: 0;">
								a
							</div>
						</div>
					</div>

				</div>

			</div>
		</div>
		此网页演示了html2canvas截图后将截图后的网页追加到了原网页之上
		<br>
		<br>
		这里可以看作是边界线
		<hr/>
	</body>
</html>

第二个示例:

将网页截图下载:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<!--此网页演示了html2canvas网页截图下载 -->
	<head>
	    <!-- base.js实际上是jquery库,html2canvas.js是html2canvas自带的js库 -->
		<script type="text/javascript" src="./WEB-INF/JS/html2canvas.js"></script>
		<script type="text/javascript" src="./WEB-INF/JS/jquery-1.6.2.js"></script>
		<title>MyHtml.html</title>

		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="this is my page">
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<!--需要注意的是,这里一定要等待js库和网页加载完毕后再执行函数  -->
<!-- html2canvas()中,第一个参数是要截图的Dom对象，第二个参数时渲染完成后回调的canvas对象。  -->
		<script type="text/javascript">
$(function(){
	print();
});

function print()
{
	html2canvas( $("body") , 
	{
  		onrendered: function(canvas) 
  		{   
    		$('#down_button').attr( 'href' , canvas.toDataURL() ) ;
    		$('#down_button').attr( 'download' , 'myjobdeer.png' ) ;
    		//$('#down_button').css('display','inline-block');
  		}
  	});
}

</script>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	</head>
	<body>
		此网页演示了html2canvas截图后将截图后的网页追加到了原网页之上
		<br>
		<br>
		这里可以看作是边界线
		<hr/>
<a type="button" id="down_button">下载</a>
	</body>
</html>