接到了一個任務，就是，我們的整個頁面，是一個大的輪播，然後到了固定的時間，比方說晚上12點的時候，截取每個屏幕，然後發送郵件給指定的郵箱。當然了，發送郵件的這些操作，不用前端來關心，前端只需要把屏幕的當前頁截圖保存下來，然後發送給後臺就行了。剩下的交給後臺就行了。廢話不多說，先說一下用到的插件，最主要的是當然是html2canvas.js了，這是一個把屏幕內容，繪製到canvas的一個插件。他的主要調用方式也很簡單，請看下面的函數
1 function html2Img() { 2 html2canvas($("body"), { 3 onrendered: function (canvas) { 4 //把截取到的圖片替換到a標籤的路徑下載 5 $("#download").attr('href', canvas.toDataURL()); 6 $("<img class='newImg' />").attr("src",canvas.toDataURL()).appendTo($("#imgList")); 7 console.log("應該能看到圖片了") 8 //下載下來的圖片名字 9 $("#download").attr('download', 'share.png'); 10 $("#download").click(); 11 } 12 }); 13 }
第2行，就是你要保存的DOM元素。然後就能得到一個canvas，剩下的想要怎麼做。就看自己的操作了。
第二個需要注意的點就是，因爲是輪播，我們需要等到到達了約定的時間，開始執行咱們的函數，請看下面的函數
1 function beignImg(hour, min, s) { 2 var now = new Date(); 3 var setHour = hour || now.getHours(); 4 var setMin = min || now.getMinutes(); 5 var setSec = s || now.getSeconds(); 6 setInterval(function () { 7 var thisDate = new Date(); 8 console.log(setHour,setMin,setSec); 9 10 if (thisDate.getHours() == setHour && thisDate.getMinutes() == setMin && thisDate.getSeconds() == 11 setSec) { 12 swiperChange(); 13 } 14 }, 1000) 15 }
整體的方法是比較簡單的，就是根據時分秒相等，然後截圖就可以了。遇到的一點問題，就是，swiper 的函數有幾個和以前的版本不同了，需要使用新的函數，請看下面的代碼
1 function swiperChange() { 2 console.log("開始截圖"); 3 mySwiper.autoplay.stop(); 4 mySwiper.slideToLoop(0); 5 setTimeout(()=>{ 6 html2Img(); 7 },1000) 8 var index = mySwiper.realIndex; 9 var imgNumber = mySwiper.slides.length - 2; 10 console.log('imgNumber: ', imgNumber); 11 var i = 1; 12 var changeTime = setInterval(() => { 13 mySwiper.slideNext(1); 14 setTimeout(()=>{ 15 html2Img(); 16 },100) 17 i++; 18 if (i == imgNumber) { 19 clearInterval(changeTime); 20 mySwiper.autoplay.start(); 21 } 22 }, 3000) 23 }
上面代碼的第3，4行，就是swiper 最新的函數（我這裏使用的是swiper6）；最新的版本和原來的不一樣，簡單的敘述就是，新的版本的循環播放的下標不一樣了，這裏需要注意一下。
然後我們因爲業務需求，我們的輪播圖中，都是echart圖表，所以，我在第三張輪播中，我插入 一個echart圖表，也是能正確的截圖的。下面把所有的代碼都放在下面，裏面的js都是CDN的方式引入的。所以，大家可以複製到任意的html文件中，然後運行就能看到效果了。圖片的話，大家隨便放上兩張就可以了
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 7 <title>Test</title> 8 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css"> 9 <style type="text/css"> 10 * { 11 margin: 0; 12 padding: 0; 13 } 14 15 html, 16 body { 17 height: 100%; 18 width: 100%; 19 } 20 21 .swiper-container { 22 width: 100%; 23 height: 100%; 24 } 25 26 .swiper-container img { 27 width: 100%; 28 max-height: 100%; 29 } 30 31 #download { 32 /* display: none; 33 */ 34 position: fixed; 35 z-index: 1000; 36 left: 0; 37 top: 0; 38 39 } 40 #imgList{ 41 position: fixed; 42 z-index: 1000; 43 left: 50px; 44 top: 0; 45 width: 1000px; 46 height: 100px; 47 float: left; 48 } 49 #imgList img{ 50 width: 100px; 51 height: 100px; 52 } 53 </style> 54 55 </head> 56 57 <body> 58 <div class="swiper-container"> 59 <div class="swiper-wrapper"> 60 <div class="swiper-slide"> 61 <img src="./img/457K.jpg" alt=""> 62 </div> 63 <div class="swiper-slide"> 64 <img src="./img/69.9K.jpg" alt=""> 65 </div> 66 <div class="swiper-slide"> 67 <div id="main" style="width: 600px;height:400px;"></div> 68 </div> 69 70 </div> 71 <!-- 如果需要分頁器 --> 72 <div class="swiper-pagination"></div> 73 <!-- 如果需要導航按鈕 --> 74 <div class="swiper-button-prev"></div> 75 <div class="swiper-button-next"></div> 76 77 78 79 </div> 80 <a href="" id="download">下載</a> 81 <div id="imgList"> 82 83 </div> 84 85 </body> 86 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 87 <script src="https://cdn.bootcss.com/html2canvas/0.4.1/html2canvas.js"></script> 88 <script src="https://unpkg.com/swiper/swiper-bundle.js"> </script> 89 <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/echarts/5.0.2/echarts.js" type="application/javascript"></script> 90 <script> 91 // 基於準備好的dom，初始化echarts實例 92 var myChart = echarts.init(document.getElementById('main')); 93 94 // 指定圖表的配置項和數據 95 var option = { 96 title: { 97 text: 'ECharts 入門示例' 98 }, 99 tooltip: {}, 100 legend: { 101 data:['銷量'] 102 }, 103 xAxis: { 104 data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] 105 }, 106 yAxis: {}, 107 series: [{ 108 name: '銷量', 109 type: 'bar', 110 data: [5, 20, 36, 10, 10, 20] 111 }] 112 }; 113 114 // 使用剛指定的配置項和數據顯示圖表。 115 myChart.setOption(option); 116 117 118 var mySwiper = new Swiper('.swiper-container', { 119 direction: 'horizontal', // 垂直切換選項 120 loop: true, // 循環模式選項 121 autoplay: true, //可選選項，自動滑動 122 // 如果需要分頁器 123 pagination: { 124 el: '.swiper-pagination', 125 }, 126 // 如果需要前進後退按鈕 127 navigation: { 128 nextEl: '.swiper-button-next', 129 prevEl: '.swiper-button-prev', 130 }, 131 }) 132 133 beignImg(11,54,4) 134 135 function beignImg(hour, min, s) { 136 var now = new Date(); 137 var setHour = hour || now.getHours(); 138 var setMin = min || now.getMinutes(); 139 var setSec = s || now.getSeconds(); 140 setInterval(function () { 141 var thisDate = new Date(); 142 console.log(setHour,setMin,setSec); 143 144 if (thisDate.getHours() == setHour && thisDate.getMinutes() == setMin && thisDate.getSeconds() == 145 setSec) { 146 swiperChange(); 147 } 148 }, 1000) 149 } 150 151 function swiperChange() { 152 console.log("開始截圖"); 153 mySwiper.autoplay.stop(); 154 mySwiper.slideToLoop(0); 155 setTimeout(()=>{ 156 html2Img(); 157 },1000) 158 var index = mySwiper.realIndex; 159 var imgNumber = mySwiper.slides.length - 2; 160 console.log('imgNumber: ', imgNumber); 161 var i = 1; 162 var changeTime = setInterval(() => { 163 mySwiper.slideNext(1); 164 setTimeout(()=>{ 165 html2Img(); 166 },100) 167 i++; 168 if (i == imgNumber) { 169 clearInterval(changeTime); 170 mySwiper.autoplay.start(); 171 } 172 }, 3000) 173 } 174 175 function html2Img() { 176 html2canvas($("body"), { 177 onrendered: function (canvas) { 178 //把截取到的圖片替換到a標籤的路徑下載 179 $("#download").attr('href', canvas.toDataURL()); 180 $("<img class='newImg' />").attr("src",canvas.toDataURL()).appendTo($("#imgList")); 181 console.log("應該能看到圖片了") 182 //下載下來的圖片名字 183 $("#download").attr('download', 'share.png'); 184 $("#download").click(); 185 } 186 }); 187 } 188 </script> 189 190 </html>