uniapp生成带有产品信息和二维码的海报

需求：后端返回产品图片和个人信息，前端根据产品链接生成二维码，然后将产品图片、用户信息、二维码生成海报，并点击下载。

这里使用了qrcodejs2、html2canvas、file-saver插件，使用前分别进行安装。

点击海报列表在弹层中显示对应的海报产品，并且生成组合的图片供用户下载。

<u-popup
     v-model="show" 
     mode="center" 
     width="650" 
     height="80%"
     @close="closePop"
     :closeable="closeable" 
     border-radius="15">
     <div class="currentPost" id="currentPost" ref="qrCodeUrl">
         <view class="malone" v-if="isPicture">
             <image :src="picture" class="m-img" >
             <view class="save" @tap="savePoster">
                 <image src="../../../static/images/index/download.png" >
                 <text>保存图片</text>
             </view>
         </view>
         <view class="jordan" v-else>
             <view class="current"><image :src="posterImg" ></image></view>
             <view class="content">
                 <view class="con-user">
                     <view class="snow"> <image :src="picSrc" ></image></view>
                     <view class="con-info">
                         <view class="txt job">
                             {{info.nickname}}
                             <text>顾问</text>
                         </view>
                         <view class="txt">{{info.phone}}</view>
                     </view>
                 </view>
                 <view class="con-ewm" id="qrcode" ref="qrcode">
                     <div id="qrCode" ref="qrCodeDiv"></div>
                 </view>
             </view>
         </view>
     </div>
 </u-popup>

//获取海报列表
async getPosterList() {
    let p = await getListByParentCodes({ parentCodes: [ "poster" ] });
    this.posterList = p.data.data.poster;
},
//点击查看海报
handlePoster(item) {
    this.show = true;
    // this.posterImg = item.image1Url;
    this.posterImg = this.localhostimg;
    this.posterUrl = this.href + '#' + item.url;
    setStorageSync('poster_image1Url', this.posterUrl)
    console.log(this.posterUrl, '海报', item.configName)
    this.couponQrCode(this.posterUrl);
    setTimeout(() => {
        this.generatePic();
        uni.showLoading({ title: '海报生成中' });
    }, 300)
},
//生成二维码
couponQrCode(posterUrl) {
    const el = this.$refs.qrCodeDiv;
    if (!el) {
        this.timer = setTimeout(() => {
            this.couponQrCode();
        },300)
    } 
    this.$nextTick(() => {
        new QRCode(this.$refs.qrCodeDiv, {
            width: 70,
            height: 70,
            text: posterUrl,
            //容错率，L/M/H 容错率越高,越复杂
            correctLevel: QRCode.CorrectLevel.L, 
            render: "canvas",
        });
    })
},
//生成拼合后的海报图片
generatePic() {
    let that = this;
    html2canvas(this.$refs.qrCodeUrl,{
        // 设置截图的起始位置，否则图片会不显示
        scrollY: 0,  
        scrollX: 0,
    }).then(canvas => {
        uni.hideLoading();
        let img = canvas.toDataURL("image/png").split(",")[1];
        that.completePic = "data:image/png;base64," + img;
        that.isPicture = true;
        that.picture = that.completePic;
        // console.log('生成后的海报',this.picture)
     })
},
//保存图片
savePoster() {
    if (!this.completePic) {
         uni.$showMsg('图片生成中，请稍后')
         return
    }
    saveAs(this.completePic, '分享海报')
},
clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer)
    }
},
closePop() {
    console.log('关闭')
    this.isPicture = false;
    this.clearTimer();
}