手機端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>
相關文章
- 1. CSS3 實現3D旋轉木馬效果
- 2. CSS:3D旋轉木馬效果
- 3. CSS3 transform實現圖片旋轉木馬3D瀏覽效果
- 4. swiper 旋轉木馬效果
- 5. 圖片輪播實現旋轉木馬的效果
- 6. 使用iCarousel的旋轉木馬效果請求圖片
- 7. JQuery——banner旋轉木馬效果
- 8. HTML+CSS旋轉木馬效果
- 9. 【前端】javascript+jQuery實現旋轉木馬效果輪播圖slider
- 10. jQuery仿3D旋轉木馬效果插件(帶索引按鈕)
- 更多相關文章...
- • SVG 模糊效果 - SVG 教程
- • Markdown 圖片 - Markdown 教程
- • 漫談MySQL的鎖機制
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
