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

前端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/[email protected]" alt="">
                     <p>报价日期：{{new_date}}p>
                     <p>报价单号：{{orderDetail.proNumber}}p>
                 div>
                 <img class="right_img" src="../../assets/image/[email protected]" 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来解决，或者在生成完毕二维码之后再调用生成图片的方法。