手机端3d旋转木马效果+保存图片到本地

时间：2023-03-09 20:18:47
手机端3d旋转木马效果+保存图片到本地 
<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">

    <meta name="apple-mobile-web-app-capable" content="yes">

    <!--删除默认的苹果工具栏和菜单栏-->

    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- 控制状态栏显示样式-->

    <link rel="stylesheet" href="css/swiper.min.css">

    <link rel="stylesheet" href="css/index.css">

    <script src="js/jquery-3.1.1.min.js"></script>

    <script src="js/html2canvas.js"></script>

</head>

<body>

<!-- 轮播开始 -->

<div class="wrap">

    <div class="swiper-container">

        <div class="swiper-wrapper">

            <div class="swiper-slide">

                <!-- 大图 -->

                <img src="img/1_01.jpg">

                <img src="img/1_02.jpg">

                <img src="img/1_03.jpg">

                <img src="img/1_04.jpg">

                <!-- 大图end -->

                <div class="code2Top">

                    <!-- 头像 -->

                    <img src="img/xiaotu.jpg" alt="头像"/>

                    <span>我是吴亦凡</span>

                </div>

                <div class="code2Bottom">

                    <!-- 二维码图片 -->

                    <img src="img/ewm.png" alt="" />

                </div>

            </div>

            <div class="swiper-slide code1">

                <!-- 大图 -->

                <img src="img/2_01.jpg">

                <img src="img/2_02.jpg">

                <img src="img/2_03.jpg">

                <img src="img/2_04.jpg">

                <!-- 大图end -->

                <div class="code1Bottom">

                    <!-- 二维码图片 app下载 -->

                    <img src="img/ewm.png" alt="" />

                </div>

            </div>

        </div>

        <div class="swiper-pagination"></div>

    </div>

    <!-- 轮播结束 -->

    <!-- 按钮开始 -->

    <div class="extendBtn">

        <a class="down" href="img/ewm.png" download="downImg">保存到手机</a>

    </div>

    <!-- 按钮结束 -->

</div>

<script src="js/swiper.min.js"></script>

<script type="text/javascript">    

    //画图

    var pic;

    var canvas2 = document.createElement("canvas");

    //let _canvas = document.querySelector('.test');//有些手机不兼容let

    var _canvas = document.querySelector('.swiper-slide');

    var w = parseInt(window.getComputedStyle(_canvas).width);

    var h = parseInt(window.getComputedStyle(_canvas).height);

    //将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了

    canvas2.width = w * 2;

    canvas2.height = h * 2;

    canvas2.style.width = w + "px";

    canvas2.style.height = h + "px";

    //可以按照自己的需求，对context的参数修改,translate指的是偏移量

    var context = canvas2.getContext("2d");

    context.scale(2,2);

    //图片轮播

    var swiper = new Swiper('.swiper-container', {

        loop : true,

        pagination: '.swiper-pagination',

        effect: 'coverflow',

        grabCursor: true,

        centeredSlides: true,

        slidesPerView: 'auto',

        coverflow: {

            rotate: 0,

            stretch: 40,

            depth: 120,

            modifier: 2,

            slideShadows : true

        },

        onSlideChangeEnd:function(swiper){

            //截图

            html2canvas(document.querySelector('.swiper-slide-active'),{canvas:canvas2}).then(function(canvas) {

                pic=canvas;//画布

                //canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载

                document.querySelector(".down").setAttribute('href',canvas.toDataURL());

            });

        }

    });

    //alert(swiper.realIndex)

    var $width = $(".swiper-slide.swiper-slide-active").width();

    var $scale = $(".swiper-slide.swiper-slide-active").width()/0.5625;

    $(".swiper-slide").height($scale);

</script>

</body>

</html>