master

分支 (1)

管理

管理

master

dynamic_effect
/
pic.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <style type="text/css">
        .screen_shot_btn,
        .screen_save_btn {
            display: inline-block;
            width: 72px;
            height: 36px;
            text-align: center;
            line-height: 36px;
            text-decoration: none;
            background: #4473C2;
            border: none;
            border-radius: 8px;
            margin: 0 5px;
            color: #fff;
            outline: none;
        }

        .btn-wrap {
            margin: 15px 0;
        }

        .img_show_wrap {
            width: 720px;
            height: 450px;
            margin: 15px 0;
            position: relative;
        }

        #image_el,
        #V2I_canvas {
            position: absolute;
            width: 720px;
            height: 450px;
            top: 0;
            left: 0;
        }


        .active {
            margin-left: 200px;
            transition: all 2s ease;
        }
    </style>
</head>

<body>
    <div class="pageTwo">
        <!--  要截图的区域，因为是动态生成的答案， 所以写入了js -->
        <div class="con01" id="con"></div>

        <!--截图生成图片所存放的url-->
        <img id="screenShotImg" class="pic">
        <!--  截图按钮  -->
        <img src="测试.gif" class="share" />
        <p class="share_txt">长按保存，分享朋友圈引爆颜值暗战！</p>
    </div>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.slim.min.js"></script>
    <script type="text/javascript" src="html2canvas.js"></script>
    <script type="text/javascript">

        $(document).ready(function () {

            document.querySelector('.share').onclick = function () {

                html2canvas(document.querySelector("#con")).then(function (canvas) {

                    //获取截取图片路径

                    var base64Url = canvas.toDataURL('image/png');

                    console.log(base64Url);

                    //存入页面指定位置

                    document.getElementById("screenShotImg").src = base64Url;

                    //后台操作处理

                    var base64 = "<img src=" + base64Url + " />"

                    $('.share').css('display', 'none');

                    $('.share_txt').css('display', 'block');

                });

            }


            setTimeout(() => {
                document.querySelector(".share").setAttribute("class", "share active");
            }, 1000);

        });
    </script>
</body>

</html>