html2canvas 轮播保存每个图片内容

2021-09-12 12:28:55

　　接到了一个任务，就是，我们的整个页面，是一个大的轮播，然后到了固定的时间，比方说晚上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" >
 62             </div>
 63             <div class="swiper-slide">
 64                 <img src="./img/69.9K.jpg" >
 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

html2canvas 轮播保存每个图片内容

码农公寓

相关文章