页面长按截图+保存页面截图到本地功能
程序员文章站
2022-06-14 08:45:28
...
利用的是html2canvas插件实现该该功能
长按3秒后触发截图功能，并自动下载所截图片
一次刷新只能触发一次功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/bluebird/latest/bluebird.js"></script>
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta3/html2canvas.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/canvas2image.js"></script> -->
<!-- <script src = "https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
<style>
body{
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
touch-action: none;
}
.biger{
width: 100%;
position: relative;
height: 100%;
/*background: url("../../assets/others/cxbg.png") no-repeat;*/
background-size: cover;
z-index: -1;
overflow: hidden;
}
.logos{
position: absolute;
left: 0;
top: 40px;
z-index: 7;
}
.centerBox{
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
z-index: 7;
position: absolute;
/*background: url("../../assets/others/1.png") no-repeat;*/
/*background-size: cover;*/
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
}
.bgImgs{
width: 823px;
height: 1187px;
position: relative;
transform: scale(1.30)
}
.header{
height: 140px;
width: 140px;
background: #fff;
border-radius: 50%;
overflow: hidden;
}
.header>img{
width: 140px;height: 140px;
}
.headers{
width: 100%;
position: absolute;
top: 41px;
display: flex;
justify-content: center;
}
.bird{
position: absolute;top: 20px;
right: 84px;
}
.textBox{
width: 100%;
text-align: center;
position: absolute;
top: 213px;
}
.names{
font-size: 30px;
color: #000;
}
.ranking{
margin-top: 10px;
font-size: 42px;
color: #5f9567;
}
.circle{
position: absolute;
top: 500px;
right: 104px;
z-index: 8;
transform: scale(1.3);
}
.section{
position: absolute;
top: 640px;
right: 115px;
z-index: 8;
}
.hintText{
position: absolute;
z-index: 9;
top: 520px;
/*right: 115px;*/
font-size: 32px;
color: #333;
width: 100%;
text-align: center;
}
.hintText>div{
width: 100%;
text-align: center;
margin-top: 10px;
}
.bottomImgs{
position: absolute;
bottom: 49px;
z-index: 9;
width: 100%;
height:auto;
display: flex;
justify-content: center;
left: 36px;
}
#content{
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="content">
<div class="biger">
<img src="../assets/others/logo.png" alt="" class="logos">
<div class="centerBox">
<div class="bgImgs">
<img src="../assets/others/1.png" alt="">
<div class="headers">
<div class="header">
<img src="../assets/others/water.png" alt="">
</div>
</div>
<img src="../assets/others/bird.png" class="bird" alt="">
<div class="textBox">
<div class="names">抱团取暖</div>
<div class="ranking">我是成都市第1位</div>
</div>
<img src="../assets/others/section.png" alt="" class="section">
<div class="hintText">
<div>我承诺坚持低碳出行，</div>
<div>选择共享服务，</div>
<div>让城市活力“蓉”光焕发！</div>
</div>
</div>
</div>
<img src="../assets/others/carcle.png" alt="" class="circle">
<div class="bottomImgs">
<img class="showImg" alt="" style="transform: scale(1.4)">
</div>
</div>
</div>
<script>
var numbers = Math.floor(Math.random()*7); //随机数设置背景样式
var bodys = document.getElementsByTagName('body')[0];
tion jietu(event){ //截图功能
event.preventDefault(); //组织默认
var userAgent = navigator.userAgent; //判断打开来源
var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1;
html2canvas($('#content'), {
allowTaint: true,
taintTest: false,
useCORS:true,//火狐浏览器添加项
onrendered: function (canvas) {
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
var userAgent = navigator.userAgent;
//判断是否是IE11
// debugger
if(-1 !== userAgent.indexOf("Trident")){
var arr = image.split(',');
var mime = arr[0].match(/:(.*?);/)[1];
var bstr = atob(arr[1]);
var n = bstr.length;
var u8arr = new Uint8Array(n);
while(n--){
u8arr[n] = bstr.charCodeAt(n);
}
window.navigator.msSaveBlob(new Blob([u8arr], {type:mime}), "download.png");
}else{
canvas.id = "mycanvas";
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.src = dataUrl;
var a = $("<a></a>").attr("href", dataUrl).attr("download", "img.png");
$("body").append(a);//火狐浏览器添加项
a[0].click();
a.remove();
}
}
});
}
var timer ;
var i = 0;
bodys.addEventListener('touchstart',function (e) { //监听按下
timer = setInterval(function () {
i++;
if (i==2){
jietu(e)
}else if (i>2) {
clearInterval(timer);
}
},1000);
});
bodys.addEventListener('touchmove',function (e) { //监听按下移动
clearInterval(timer);
i = 0
});
bodys.addEventListener('touchend',function (e) { //监听弹起
clearTimeout(timer);
i = 0
})
</script>
</body>
</html>
上一篇： 简单的Spring整合Shiro
下一篇： PLSQL存储过程及游标的使用