js使用html2canvas实现屏幕截取

最新推荐文章于 2024-08-20 11:35:04 发布

Leo-hzj

最新推荐文章于 2024-08-20 11:35:04 发布

阅读量1w

点赞数

分类专栏： javascript 文章标签： html2canvas 截屏 js截屏 js屏幕截取屏幕截取

本文链接：https://blog.csdn.net/q36835109/article/details/70862588

版权

本文介绍了如何利用html2canvas的v0.4.1版本解决最新版中屏幕截取的问题。在使用时需要注意页面加载完成后再调用，背景图片无法截取，而<img>标签的图片需转为base64以解决跨域导致的截取失效问题。

摘要由CSDN通过智能技术生成

<!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','share.png') ; 
				document.body.appendChild(canvas);
			}
//可以带上宽高截取你所需要的部分内容
//			,
// 			width: 300,
// 			height: 300
		});
	});
});
</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:;" class="btn" id="download">截图下载</a>
		</div>
	</div>
	<div class="container" id="container">
		<p style="text-align:center">以下是测试内容</p>
		<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAYAAABccqhmAAAZ2ElEQVR4Xu2d4Xoquw5DT9//oXs/6N20wCTjJTTO0Or8PU5sy7LiBMr++O+//z7/e5P/Pj95qB8fH5vZjfai9gp0Ix/KXs41FF8lD5cPuo+C0yw/yh/Ff8eaS3fwruqIbMOHUnTa0NRegUJpHMUPXUPxVfJw+aD7UCwu9hEABbUD1yhFpw1N7ZV0lcZR/NA1FF8lD5cPug/FIgKgIHbwGqXotKGpvZKy0jiKH7qG4qvk4fJB96FYRAAUxA5eoxSdNjS1V1JWGkfxQ9dQfJU8XD7oPhSLCICC2MFrlKLThqb2SspK4yh+6BqKr5KHywfdh2Lx5wWgA+BRUWgTKkQc+VbypvG6ybi1n/JKTXPvyFvBivJK8UHxpdgqMSl5Dz8FOGPAFHQFRCXvjkagIqdgRXPvyFupodII1A/Fl2JL45nZz7gTAXhATilURyNEAF5vCYrh