html2canvas页面截图

最新推荐文章于 2021-01-22 18:31:02 发布

weixin_33901641

最新推荐文章于 2021-01-22 18:31:02 发布

阅读量54

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/GracefulTing/blog/1649353

版权

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	<a type="button" id="btn"><button id="copy">点击复制图片</button></a>
	<div class="myImg" style="position:relative;">
	    <img src="1.jpg">
	</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script>

	$("#copy").click(function(){
	    html2canvas($(".myImg"),{ // $("body")截图是全部内容，$(".myImg")是你要复制生成canvas的区域，可以自己选
	        onrendered:function(canvas){
	            dataURL =canvas.toDataURL("image/png");
	            $("body").append(canvas);

	            //下载图片
	            $('#btn').attr( 'href' ,  dataURL ) ;
	            $('#btn').attr( 'download' , 'download.png' ) ;

	        },
	        width:300,
	        height:300
	    })
	})

	
</script>
</html>

这就是全部代码，要下载html2canvas.js或者引入cdn。

截图看效果：