vue项目中使用swiper和canvas画轮播海报，海报可下载

1、安装swiper

npm install swiper vue-awesome-swiper --save

2、在vue页面引入swiper

import {
      swiper, swiperSlide } from 'vue-awesome-swiper';
import 'swiper/dist/css/swiper.min.css';
let activeIndex = 0; //定义swiper当前索引值

3、在data里面配置swiper的数据

data() {
     
        return {
     
            swiperOptions: {
     
                pagination: {
     
                    el: '.swiper-pagination'
                },
                navigation: {
     
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev'
                },
                autoplay:false,
                on: {
     
                    slideChangeTransitionEnd: function(){
     
                        activeIndex = this.activeIndex;//切换结束时，获取当前index素银，赋值给activeIndex
                    }
                }
            },
       }
 }

4、html页面的代码

<div class="code">
   <swiper :options="swiperOptions" ref="mySwiper">
        <swiper-slide v-for="(item,index) in imageUrlList" :key="index">
            <div class="imgBox">
                <canvas :id="'canvas' + index" class="myCanvas" width="320" height="466"></canvas>
            </div>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev"></div>
        <div class="swiper-button-next" slot="button-next"></div>
    </swiper>
</div>
<div  class="footer" >
    <el-button type="primary" @click="unloadPic">下 载</el-button>
    <el-button @click="codeVisible=false">关 闭</el-button>
</div>

5、js代码

//下载推广码
 unloadPic(){
     
     let curCanvas = document.getElementById('canvas' + activeIndex);
     let a = document.createElement('a');
     a.href = curCanvas.toDataURL('image/png');
     a.download = new Date().getTime();
     a.click();
 },

 //画推广码
 initCanvas(qrcodeUrl) {
     
     //这里必须要使用$nextTick()才能获取到canvas
     this.$nextTick(() => {
     
         let myCanvas = document.querySelectorAll('.myCanvas');
         let ctx = [];
         Array.from(myCanvas).map((item, index) => {
      
             ctx[index] = item.getContext('2d');
             ctx[index].fillStyle = '#fff';
             ctx[index].fillRect(0, 0, item.width, item.height);
             let avatarUrl = {
     };
             avatarUrl = new Image();
             avatarUrl.setAttribute('crossOrigin', 'anonymous');
             avatarUrl.src = this.avatarUrl + '?tamp='+(new Date()).valueOf();
             avatarUrl.onload = () =>{
       
             	 //将图片剪切为原型画出来
                 ctx[index].save();
                 ctx[index].beginPath();
                 ctx[index].arc(41, 433, 25, 0, Math.PI * 2, false);
                 ctx[index].clip();
                 ctx[index].drawImage(avatarUrl, 16, 408, 50, 50);
             };
             let img = [];
             img[index] = new Image(); //创建img对象
             img[index].setAttribute('crossOrigin', 'anonymous');
             img[index].src = this.imageUrlList[index] + '?tamp='+(new Date()).valueOf();
             img[index].onload = () => {
       //必须要图片加载完成才能实现
                 ctx[index].restore();
                 ctx[index].drawImage(img[index], 0, 0, 319, 400);
             };
             ctx[index].fillStyle = '#000';
             ctx[index].font = '16px PingFangSC-Regular,PingFang SC';
             ctx[index].fillText(this.nickName,80,440);
         });
     });
 },