手機端3d旋轉木馬效果+保存圖片到本地
阿新 • • 發佈：2018-05-26
偏移 旋轉木馬 ndb AC fun AI tee com select
<!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旋轉木馬效果+保存圖片到本地