html2canvas 轮播保存每个图片内容
作者：互联网
接到了一个任务，就是，我们的整个页面，是一个大的轮播，然后到了固定的时间，比方说晚上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>
View Code
标签：function,imgNumber,轮播,保存,html2canvas,download,var,mySwiper,swiper 来源： https://www.cnblogs.com/daniao11417/p/14776674.html