<!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>
手机端3d旋转木马效果+保存图片到本地
猜你喜欢
转载自www.cnblogs.com/weiwei0111/p/9093566.html
今日推荐
周排行