前端Vue H5生成带二维码的分享海报,实现长按保存到手机相册

前言:关于H5分享海报的需求,经常会遇到,通常就是一个分享的二维码+分享文案,生成一张图片,供用户在手机上长按保存到手机,然后就可以将保存的图片发给别人,实现扫码进入分享页,从而实现分佣、引流等目的。
目标海报:
在这里插入图片描述

实现思路步骤:
a:二维码的生成;
b:图片的生成;
c:用户可长按的同时不影响查看分享效果(即当分享海报较长时,可以滚动查看)。
根据上述思路步骤:
1,使用qrcodejs2生成二维码;

安装:

npm install qrcodejs2 --save 

使用:

import QRCode from 'qrcodejs2'
// 生成二维码方法
            qrcode(url) {
                let myurl = this.projectUrl +'/#'+ url;
                let qrcode = new QRCode('qrcode', {
                    width: $("#qrcode")[0].clientWidth,
                    height:$("#qrcode")[0].clientHeight,
                    text: myurl, // 二维码地址
                });
            },

其中projectUrl,为项目地址,url为页面路径地址(即扫码打开的目标页,就是别人扫码之后,你希望别人进入的页面);#qrcode为二维码显示的父级元素id
2,使用html2canvas生成图片(通过截屏的方式)
安装:

npm install html2canvas --save 

使用:
海报html结构:

<div class="container_box" v-if="showShare" >
 <img class="close_img" src="../../assets/image/close-size.png" alt="" @click="hideShare()">
 <div class="share_box" style="background:#C41D1D;">
     <div style="background:#C41D1D;height:10rem;overflow:auto;">
         <div id="shareImg">
             <div class="offer_msg">
                 <div class="left">
                     <img src="../../assets/image/bjd_logo@2x.png" alt="">
                     <p>报价日期:{{new_date}}</p>
                     <p>报价单号:{{orderDetail.proNumber}}</p>
                 </div>
                 <img class="right_img" src="../../assets/image/bjd_word@2x.png" alt="">
             </div>

             <div class="msg_container">
                     <div class="goods_msg">
                         <div class="total_msg">
                             <div class="left">
                                 <p class="p">分享人:{{userInfo.nickname}}</p>
                                 <p class="p">产品名称:{{orderDetail.name}}</p>
                                 <p class="p_money">总价(RMB):<span>¥{{orderDetail.price}}</span></p>
                             </div>
                             <div class="right" id="qrcode"></div>
                         </div>
                         <div class="goods_list">
                             <div class="title">商品明细:</div>
                             <div class="goods-item" v-for="(items,i) in shareGoodsImg" :key="i">
                                 <div class="msg-img">
                                     <img :src="items.goods_img" crossorigin="anonymous"  alt=""  class="details_commodity_img">
                                 </div>
                                 <div class="msg-right">
                                     <div class="goods-money">
                                         <p class="goods_title">{{items.goods_name|filterText}}</p>
                                         <div class="goods-moneyR">
                                             <p class="money">¥{{items.price}}</p>
                                             <p class="num">x{{items.num}}</p>
                                         </div>
                                     </div>
                                     <p class="specText">{{items.specs_name}}</p>
                                 </div>
                             </div>
                         </div>
                     </div>
                     
             </div>
     </div>
     </div>
     
    

    <!-- 生成得海报图片 -->
    <img :src="img" alt="" class="fixed-img">
 </div>
import html2canvas from 'html2canvas';
// 生成海报方法
drawImage(){
    this.$Loading("加载中")
    var that = this;
    var node = document.getElementById("shareImg");
    console.log(node)
    console.log($("#shareImg"))
    html2canvas(node, {
        allowTaint: true,
        useCORS: true,
        logging:true,
        taintTest: false,
        scale: 6,
        width: $("#shareImg")[0].clientWidth,
        height:$("#shareImg")[0].clientHeight,
    }).then(function(canvas) {
        $(".fixed-img").css("display","block")
        that.img  = canvas.toDataURL("image/png")
        that.$Loading().clear();
        that.$NotifySuccess("图片已生成,长按可保存到相册")
    }).catch(function(error){
        console.log(error)
    });
},

3,不影响查看的话,其实就是将生成完成的海报,通过定位+透明度的方式,使它浮在正常弹框的正上方,这样既不影响滚动下方的海报弹框,也能保证长按进行保存。

至此,分享海报基本就已经好了!
总结:分享海报的关键点其实就在于html2canvas,生成图片这一步,
1,最容易遇到的问题就是生成出来的图片某些原本的图片(线上图片时)空白,解决办法就是添加html2canvas配置项useCORS: true,允许跨域,另外还需配置远程图片允许跨域,以阿里云的为例,需要登录后台配置图片资源允许跨域,配置不会立马生效,需要等待十分钟左右。
2,如果仍然出现图片存在空白,终极解决办法就是让后端添加一个图片转base64的接口,借助后端转换,将海报中的线上图片替换成转完base64的图片。
3,生成的海报有白边,未铺满,解决办法:检查宽高样式有无问题,一般都是宽高样式的问题。
4,生成的海报模糊不清,解决办法就是添加html2canvas配置项scale: 6,数值越大越清晰,一般3就够用了。
5,重中之重,因为生成海报时,页面进来是先生成二维码,其次再生成海报,结合页面数据接口的时候,一定要注意时序问题,不然可能生成图片的时候二维码还没生成,导致空白!!!,可通过适当添加settimeout来解决,或者在生成完毕二维码之后再调用生成图片的方法。

Logo

前往低代码交流专区

更多推荐