使用 QRCode和 html2canvas把隐藏的元素，生成海报 和 二维码

html  默认让生成的海报是隐藏的 posterOnoff 初始值为 false

<div class="card_img" v-if="posterOnoff">
      <img :src="posterImg" />
    </div>
  <div class="code_p" ref="QrcodePageT">
      <div class="card">
        <img class="course_img" :src="courseInfo.imageUrl" alt />
        <div class="price">￥348</div>
        <div class="title">课程标题课程标题课程标题课程标题课程标题课程标题课程标题·</div>
      </div>
      <div class="user">
        <img class="head_img" :src="headImg" alt />
       
        <img :src="codeImgUrl" id="qs" alt />
      </div>
    </div>
   
   css 
 .code_p{ // 这个是让 默认得元素的隐藏，并且能 截图海报 截取到的方法
    margin-top: -999999999px;
  } 
  .code_p{
    width: 6.5rem;
    margin: 0 auto;
    padding:0.05rem;
    background: #fff;
}
.card{
   
    .course_img{
        width: 100%;
    }

}
.user{
    .head_img{
        border-radius:50%;
        width: 1rem;
        height: 1rem;
        float: left;
    }
    .user_name{
        @extend .flex1;
        float: left;
    }
    .qrcode{
        float: left;
        img{
            width:0.5rem;
        }
    }
}
js 部分

  toCode() { // 生成 二维码的方法
            let url = "www.baidu.com";
            let canvas = document.createElement("canvas");
            canvas.width = "100%";
            canvas.height = "100%";
            QRCode.toCanvas(canvas, url, error => {
                if (error) {
                    console.log(error);
                } else {
                    this.codeImgUrl = canvas.toDataURL("image/jpeg");
                }
            });
        },
 createImg() { // 生成海报的方法
           let that = this;
            setTimeout(function () {
                that.posterOnoff = true;
              let shareContent = that.$refs.QrcodePage,
                    width = shareContent.clientWidth, //shareContent.offsetWidth; //获取dom 宽度
                    height = shareContent.clientHeight, //shareContent.offsetHeight; //获取dom 高度
                    canvas = document.createElement("canvas"), //创建一个canvas节点
                    scale = 1; //定义任意放大倍数 支持小数
                canvas.width = width * scale; //定义canvas 宽度 * 缩放
                canvas.height = height * scale; //定义canvas高度 *缩放
                canvas.style.width = (shareContent.clientWidth * scale) / 100 + "rem";
                canvas.style.height = (shareContent.clientHeight * scale) / 100 + "rem";
                canvas.getContext("2d").scale(scale, scale); //获取context,设置scale
                let opts = {
                    scale: scale, // 添加的 scale 参数
                    canvas: canvas, //自定义 canvas
                    logging: false, //日志开关，便于查看html2canvas的内部执行流程
                    width: width, //dom 原始宽度
                    height: height,
                    useCORS: true
                };
                html2canvas(shareContent, opts).then(function (canvas) {
                     that.posterImg = canvas.toDataURL("image/jpeg", 1.0);
                  
                  
                }).catch(function (reason) {
                    alert(reason)
                });
            }, 1000)

        }