H5页面长按截图+保存页面截图到本地功能

最新推荐文章于 2024-07-10 16:55:19 发布

Your-Nikee

最新推荐文章于 2024-07-10 16:55:19 发布

阅读量1.8k

点赞数

分类专栏：杂项文章标签： html2canvas 页面截图网页截图并保存

本文链接：https://blog.csdn.net/YourNikee/article/details/103456462

版权

杂项专栏收录该内容

4 篇文章 0 订阅

订阅专栏

利用的是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/canvas2image@1.0.5/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>