vue 实现qrcode二维码功能 并实现htmlCanvas页面截图

页面效果是 在同一个页面，点击“邀请好友按钮”，页面弹出对话框

<template>

  <div class="share-wrap">
    <!--组件传值-->
    <Header :pageName="pageTitle"  />

    <!--分享图片-->
    <div class="share-img">
      <img style="    width: 50%;" src="http://www.itdream.site/upload/202004/03.jpg" />
    </div>
    <!--分享排名-->
    <div class="share-rank">
      <span>您是第</span><span class="rank-value">{{rankValue}}</span><span>位参与此次武汉低碳快闪的用户</span>
    </div>
    <!--分享正文-->
    <div class="share-content">
      <div class="img-invite">
        <div class="user-img">
          <div  :style="{backgroundImage:'url('+userImg+')'}"></div>
        </div>
        <div class="friend-share" @click="inviteFriend">
          <span>邀请好友</span>
        </div>
      </div>
      <div class="share-user">
        <span>{{userName}}</span>
        <span>恭喜您！~</span>
      </div>
      <div class="integral-wrap">
        获得<span>{{integralVlaue}}</span>个碳积分
      </div>
      <div class="tan-target">
        减少碳排放，2030我们一起<span>碳达峰</span>
      </div>
      <div class="activity-button" @click="nextProcess()">
        <span>参与更多需求响应活动</span>
      </div>
    </div>

    <!--分享面板-->
    <van-action-sheet v-model="show" title="分享活动" get-container="#img-to">

      <div v-if="popShow" class="share-pop-wrap image_tofile" id="img-to"  ref="imageTofile">
        <div class="share-pop-img">

          <div class="user-info" style="width: 50%">
<!--            <div class="user-info-img" :style="{backgroundImage:'url('+userImg+')'}">-->
            <div class="user-info-img" >
            </div>
            <div class="user-info-name" >{{userName}}</div>
          </div>

          <div></div>

        </div>
        <div class="share-pop-content">
          <div>
            <span>
              环保事小，你我相关。
            我是已加入低碳快闪活动，
            </span>
          </div>
          <div>
            <span>
              邀请你一起来，
            还有电费红包，等你领。
            </span>
          </div>
        </div>
        <div class="share-pop-qrcode">
          <div class="right-qrcode">
              <div ref="qrcode" style="padding: 29px;margin: 0px auto"></div>
          </div>
        </div>


      </div>
      <!-- 如果需要展示截取的图片,给一个img标签 -->
      <div v-if="tagetImg" style="width: 100%;    text-align: center;">
        <img style="width: 80%" :src="htmlUrl">
      </div>
      <div class="activity-button" @click="saveImg">
        <span>长按图片区域保存</span>
      </div>

    </van-action-sheet>




  </div>

</template>

<script>
    import Vue from 'vue';
    import {getLocal} from "../../../../assets/service/auth";
    import { ShareSheet,Toast  } from 'vant';

    Vue.use(Toast);
    Vue.use(ShareSheet);

    import Header from "../../../template/header";

    import QRCode from 'qrcodejs2';

    import html2canvas from 'html2canvas'

    export default {
        name: "share",
        components: {Header,QRCode,html2canvas},
        data() {
            return {
                pageTitle:'活动分享页',
                rankValue : '20',
                userImg : 'http://www.itdream.site/upload/202004/cut.jpg',
                userName: 'Jeff',
                integralVlaue:30,
                popShow:true,
                show: false,
                tagetImg: false,
                qrcode: '',
                htmlUrl: ''
            }
        },

        methods: {
            nextProcess(url) {
                // 根据用户信息的状态，路由到对应页面
                let userBind = getLocal("userBind");
                if(userBind){
                    if(!userBind.mobilePhone){
                        this.$router.push("/activity/confirm");
                    }else if(!userBind.sign){
                        this.$router.push("/activity/sign");
                    }else{
                        this.$router.push("/activity/share");
                    }
                }else{
                    this.$router.push("/activity/confirm");
                }
            },
            // 邀请好友
            inviteFriend() {
                this.popShow=true;
                this.tagetImg=false;
                this.show=true;
                this.getQrcode('https://blog.csdn.net/SpringHASh?spm=1001.2101.3001.5343');

                Toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                    loadingType: 'spinner',
                });
                setTimeout(this.toImage, 1000);

            },
            // 保存图片
            saveImg() {
                const save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                save_link.href = this.htmlUrl;
                save_link.download =  new Date().toLocaleString();

                const event = document.createEvent('MouseEvents');
                event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                save_link.dispatchEvent(event);

            },

            // 页面元素转图片
            toImage () {
                // 第一个参数是需要生成截图的元素,第二个是自己需要配置的参数,宽高等
                html2canvas(this.$refs.imageTofile, {
                    backgroundColor: null,
                    useCORS: true // 如果截图的内容里有图片,可能会有跨域的情况,加上这个参数,解决文件跨域问题
                }).then((canvas) => {
                    let url = canvas.toDataURL('image/png')
                    this.htmlUrl = url;

                    this.popShow=false;
                    this.tagetImg=true;
                    Toast.clear();
                    // 把生成的base64位图片上传到服务器,生成在线图片地址
                    // this.sendUrl()
                })
            },

            // 图片上传服务器
            // sendUrl () {
            //     // 如果图片需要formData格式,就自己组装一下,主要看后台需要什么参数
            //     const formData = new FormData()
            //     formData.append('base64', this.company.fileUrl)
            //     formData.append('userId', 123)
            //     formData.append('pathName', 'pdf')
            //     this.$ajax({
            //         url: apiPath.common.uploadBase,
            //         method: 'post',
            //         data: formData
            //     }).then(res => {
            //         if (res.code && res.data) {
            //
            //         }
            //     })
            // },

            getQrcode(text) {
                this.$nextTick(function () {
                    this.$refs.qrcode.innerHTML = '' // 用于清空生成的二维码
                    let qrcode = new QRCode(this.$refs.qrcode, {
                        text: text, // 二维码内容
                        width: 200,
                        height: 200,
                        colorDark: '#333333', // 二维码颜色
                        colorLight: '#ffffff', // 二维码背景色
                        correctLevel: QRCode.CorrectLevel.L// 容错率，L/M/H
                    })
                    this.qrcode = qrcode
                })
            }
        },

    }
</script>

<style scoped lang="less">




  .share-wrap{

    width: 100%;
    margin: auto;
    .share-img{
      text-align: center;
      width: 90%;
      margin: 20px auto 20px;
    }
    .share-rank{
      width: 90%;
      margin: 20px auto 20px;
      text-align: center;
      font-size: 1rem;
      .share-rank{
        font-size: 2rem;
        font-weight: bold;
        color: red;
      }
    }

    .share-content{
      width: 80%;
      margin: 20px auto 20px;
      border-color: rgb(37, 155, 36);
      border-width: 2px;
      border-style: solid;
      border-radius: 10px;
      padding: 10px 20px 10px 20px;

      .img-invite{
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        .user-img{

          div{
            background-size: 100% 100%;
            width: 4rem;
            height: 4rem;
            border-radius: 35px;
          }
        }
        .friend-share{
          width: 30%;
          border-radius: 15px;
          border: 1px solid rgb(37, 155, 36);
          height: 2rem;
          display: flex;
          justify-content: center;
          align-items: center;
          color: rgb(37, 155, 36);
        }

      }

      .share-user,.integral-wrap,.tan-target{
        margin: 30px 0;
      }

      .activity-button{
        width: 100%;
        height: 2.5rem;
        z-index: 13;
        background-color: #259b24;
        color: #ffffff;
        border-radius: 25px;
        font-size: 1rem;
        text-align: center;
        opacity: 1;
        margin: 25px auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    /deep/ .van-action-sheet__content {
      padding: 16px 16px ;

      .share-pop-wrap{
        width: 100%;
        height: 35rem;
        .share-pop-img{
          height: 10rem;
          background: #00D3CC;
          /*background-image: url(http://www.itdream.site/upload/202004/03.jpg);*/
          /*background-size: 100% 100%;*/
          display: flex;

          .user-info{
            position: relative;
            .user-info-img{
              position: absolute;
              left: 18%;
              top: 75%;
              background-size: 100% 100%;
              width: 4rem;
              height: 4rem;
              border-radius: 35px;
              margin: auto;
            }

            .user-info-name{
              position: absolute;
              left: 62%;
              top: 100%;
              font-size: 1.5rem;
            }
          }

        }

        .share-pop-content{
          margin: 80px 20px;
          div {
            margin: 20px auto;
            span {
              font-size: 1rem;
            }
          }
        }

        .share-pop-qrcode{

          .right-qrcode{
            float: right;

            img{
              width: 80px;
            }
          }

        }

      }

      .activity-button{
        width: 85%;
        height: 2.5rem;
        z-index: 13;
        background-color: #259b24;
        color: #ffffff;
        border-radius: 25px;
        font-size: 1rem;
        text-align: center;
        opacity: 1;
        margin: 25px auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }

    }


  }

</style>