接到了一个任务，就是，我们的整个页面，是一个大的轮播，然后到了固定的时间，比方说晚上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>