代码改变世界

html2canvaces用法，js截屏并且下载

2016-12-20 21:40  muamaker  阅读(476)  评论(0)  编辑  收藏  举报

1、首先自己下载引入html2canvaces和jquery（我的demo路径是自己本地的）

2、点击截屏按钮后，跳出层的其他部分是取消保存，点击截取获得的图片区域，表示保存

 

 

 

 

<!DOCTYPE >
<html>
<head>
<title>截图</title>
<meta name="" content="" charset="utf-8" />
<style type="text/css">
#box{
width: 400px;
height: 300px;
border: 4px solid yellowgreen;
color: deeppink;
text-align: center;
line-height: 300px;
font-size: 50px;
}
button{
width: 200px;
height: 50px;
font-size: 20px;
}
#imgContent{
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
background: rgba(0,0,0,0.4);
display: none;
}
</style>
</head>
<body>

<div id="box">
截屏效果测试
</div>

<button id="btn1">点击截图</button>
<div id="imgContent"></div> <!--用来装图片-->
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script type="text/javascript">
$("#btn1").on("click",function(){
$("#imgContent").show(); /*装图片的盒子显示出来*/
$("#imgContent").css({"height":$("body").outerHeight()});/*装图片的盒子高度出来*/
html2canvas( $("#box") ,{ //box为要截屏的dom元素
onrendered: function(canvas){
var url = canvas.toDataURL(); /*获得的图片路径，base64*/
$("#imgContent").html(' <a href=""><img src="'+ url +'" /></a>');

/*避免事件重复绑定*/
$("#imgContent").off("click","img");

$("#imgContent").on("click","img",function (event) {
/*点击下载功能*/
$("#imgContent").find("a").attr( 'href' ,url) ;
$("#imgContent").find("a").attr( 'download' , 'caibao.png' ) ;
});
}
});
});
/*隐藏弹出层*/
$("#imgContent").on("click",function(){
$(this).hide();
});
</script>
</html>