微信小程序分享生成海报（自带二维码）+头像+昵称

古城微笑少年丶 2023-02-28 11:20 27阅读 0赞

**前言：**  
我的分享海报是弹框，可根据自己要求写成页面，原理都是一样的，背景图是前期测试的，效果是OK的，真机测试手机也是显示的。

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70]  
**wxml:**

<view class='imagePathBox' hidden="{ {maskHidden == false}}">
    		<image src="{ {imagePath}}" class='shengcheng'></image>
    		<button class='baocun' bindtap='baocun'>保存至相册,分享到朋友圈</button>
    	</view>
    	<view hidden="{ {maskHidden == false}}" class="mask"></view>
    	<view class="canvas-box">
    		<canvas style="width:375px;height:670px;position:fixed;top:9999px" canvas-id="mycanvas" />
    	</view>
    </view>

**js:**

// pages/my/my.js
    import api from '../../utils/http'
    const app = getApp()
    Page({ 
    
      /** * 页面的初始数据 */
      data: { 
        userInfo: '', 
        domainURL: "", //图片线上地址
        info: "",
        imgList: '',
        evalatImage: '',
        bgBanner: '',     //背景
        imagePath: "",  //图片
        maskHidden: false, //开关
        qrcode_image: '', //二维码
        headimgurl: '', //头像
        nickName: ''   //名称
      },
    
      /** * 生命周期函数--监听页面加载 */
      onLoad: function (options) { 
        this.setData({ 
          userInfo: wx.getStorageSync("userInfo"),
          headimgurl: wx.getStorageSync("userInfo").headimgurl,
          nickName: wx.getStorageSync("userInfo").nickName,
          domainURL: app.globalData.domainURL
        })
        var that = this;
        api.post("/app/web/poster/list").then(res => { 
          if (res.code == 200) { 
          //domainURL:图片拼接的线上地址， 可根据自身情况修改 
            that.setData({ 
              bgBanner: that.data.domainURL + res.data[0].imageUri,
              evalatImage: that.data.domainURL + res.data[0].imageUri,
            })
            //console.log(that.data.bgBanner)
          }
        }).catch(err => { 
          //console.log(err)
        })
        that.qrcode_image();
        this.getInfo();
      },
    
      /** * 生命周期函数--监听页面初次渲染完成 */
      onReady: function () { 
    
      },
    
      /** * 生命周期函数--监听页面显示 */
      onShow: function () { 
        this.setData({ 
          maskHidden: false
        });
      },
    
    
      //点击生成海报
      formSubmit: function (e) { 
        var that = this;
        wx.showToast({ 
          title: '海报生成中...',
          icon: 'loading',
          duration: 1000
        });
    
        that.createNewImg();
        setTimeout(function () { 
          // wx.hideToast()
          that.setData({ 
            maskHidden: true
          });
        }, 1000);
      },
      //将canvas转换为图片保存到本地，然后将图片路径传给image图片的src
      createNewImg: function () { 
        var that = this;
        console.log(that.data.bgBanner)
        var context = wx.createCanvasContext('mycanvas');
        context.clearRect(0, 0, 375, 660); // （X轴坐标，Y轴坐标，宽，高）
        wx.getImageInfo({ 
          src: that.data.bgBanner,
          success(res) { 
            //console.log(res)
            context.drawImage(res.path, 0, 0, 375, 660);// （X轴坐标，Y轴坐标，宽，高）
            context.setFillStyle("#fff")
            // context.fillRect(0, 0, 375, 660)// （X轴坐标，Y轴坐标，宽，高）
            context.save();
            var path = that.data.evalatImage;
            context.drawImage(path, 0, 0, 375, 660);// （X轴坐标，Y轴坐标，宽，高）
            var path2 = that.data.qrcode_image;
    
           // 里面继续添加图片的话必须要用wx.getImageInfo
            wx.getImageInfo({ 
              src: that.data.headimgurl,
              success(nav) { 
                that.setData({ 
                  headimgurl: nav.path
                })
                console.log(that.data.headimgurl, 1, nav.path)
                var avatarurl_width = 60; //绘制的头像宽度
                var avatarurl_heigth = 60; //绘制的头像高度
                var avatarurl_x = 160; //绘制的头像在画布上的位置
                var avatarurl_y = 115; //绘制的头像在画布上的位置
                context.save();
                context.beginPath();
                context.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y, avatarurl_width / 2, 0, Math.PI * 2, false);
                context.clip();
                context.drawImage(nav.path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
                context.restore();
                context.draw(context);
              },
              fail(err) { 
                //console.log(err)
              }
            });
    
    
    
            var titl = that.data.nickName;
            context.setFontSize(18);
            context.setFillStyle('#333');
            context.setTextAlign('left');
            context.font = 'normal bold 18px sans-serif';
            context.fillText(titl, 160, 200);
            context.stroke();
            context.save();
    
    
    
    
    
            //console.log("海报底部二维码" + path2);
            //绘制头像
            context.save(); //保存之前的画布设置
            context.beginPath();
            context.arc(90, 540, 50, 0, 2 * Math.PI);
            context.setStrokeStyle("#ffe200");
            context.clip(); //裁剪上面的圆形
            context.drawImage(path2, 40, 490, 100, 100);// （X轴坐标，Y轴坐标，宽，高）
            context.restore();
            context.closePath();
            console.log(path2)
    
            context.save(); //保存之前的画布设置
            // context.draw(true); //true表示保留之前绘制内容
            context.draw(context);
          },
          fail(err) { 
            //console.log(err)
          }
        });
    
    
        //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
        setTimeout(function () { 
          wx.canvasToTempFilePath({ 
            canvasId: 'mycanvas',
            success: function (res) { 
              var tempFilePath = res.tempFilePath;
              that.setData({ 
                imagePath: tempFilePath
              });
            },
            fail: function (res) { 
              //console.log(res);
            }
          });
        }, 1000);
      },
    
      //点击保存到相册
      baocun: function () { 
        var that = this
        wx.saveImageToPhotosAlbum({ 
          filePath: that.data.imagePath,
          success(res) { 
            wx.showModal({ 
              content: '图片已保存到相册，赶紧晒一下吧~',
              showCancel: false,
              confirmText: '好的',
              confirmColor: '#333',
              success: function (res) { 
                if (res.confirm) { 
                  //console.log('用户点击确定');
                  /* 该隐藏的隐藏 */
                  that.setData({ 
                    maskHidden: false
                  })
                }
              },
              fail: function (res) { 
                //console.log(11111)
              }
            })
          }
        })
      },
      qrcode_image: function () { 
        let that = this;
        wx.request({ 
          url: 'https://api.weixin.qq.com/cgi-bin/token',
          data: { 
            grant_type: 'client_credential',
            appid: 'XXXXXX', //不能缺少，否则二维码出不来
            secret: 'XXXXXX' //不能缺少，否则二维码出不来
          },
          success: function (res) { 
            wx.request({ 
              url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + res.data.access_token,
              data: { 
                "path": "/pages/login/login", //默认跳转到主页:pages/index/index，可指定
                "width": 200,
                "scene": "evaId=" + that.data.id, //携带的参数
              },
              responseType: 'arraybuffer', // 这行很重要,转为二进制数组
              header: { 
                'content-type': 'application/json;charset=utf-8'
              },
              method: 'POST',
              success(res) { 
                //console.log(res)
                //转为base64
                let bin64 = wx.arrayBufferToBase64(res.data);
                that.setData({ 
                  //base 64设置到页面上
                  qrcode_image: "data:image/png;base64," + bin64
                });
                let fileManager = wx.getFileSystemManager(); //获取文件管理器
                let filePath = wx.env.USER_DATA_PATH + '/code.jpg'; //设置临时路径
                fileManager.writeFile({  //获取到的数据写入临时路径
                  filePath: filePath, //临时路径
                  // encoding: 'binary', //编码方式，二进制
                  data: res.data, //请求到的数据
                  success: function (res) { 
                    // //console.log(res)
                    wx.getImageInfo({ 
                      src: filePath,
                      success(res) { 
                        //console.log(res)
                        that.setData({ 
                          qrcode_image: res.path
                        });
                      }
                    })
                    //console.log(filePath)
                  },
                  fail: function (res) { 
                    //console.log(res)
                  },
                });
              }
            })
          }
        })
      }
    })

**wxss:**

/*海报 */
    .imagePathBox{ 
      width: 100%;
      height: 100%;
      background: rgba(0,0,0,0.7);
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9999;
    }
    .mask{ 
      width: 100%;
      height: 100%;
      /* background: rgba(0,0,0,0.7); */
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 9000;
    }
    .shengcheng{ 
      width: 80%;
      height: 80%;
      position: fixed;
      top: 50rpx;
      left: 50%;
      margin-left: -40%;
      z-index: 10;
    }
    .baocun{ 
      display: block;
      width: 100%;
      height: 80rpx;
      padding: 0;
      line-height: 80rpx;
      text-align: center;
      position: fixed;
      bottom: 50rpx;
      left: 10%;
      background: #45be8d;
      color: #fff;
      font-size: 26rpx;
      border-radius: 44rpx;
    }
     
    .shareFriends{ 
      display: block;
      width: 80%;
      height: 104rpx;
      padding: 0;
      line-height: 80rpx;
      text-align: center;
      position: fixed;
      bottom: 50rpx;
      left: 10%;
      background: #45be8d;
      color: rgb(211, 208, 208);
      font-size: 32rpx;
      border-radius: 44rpx;
    }
     
     
    button[class="baocun"]::after{ 
      border: 0;
    }
    .noLogin{ 
      font-size: 30rpx;
      text-align: center;
      color: #fff;
    }

OK，完工

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3B4aGluZw_size_16_color_FFFFFF_t_70]: /images/20230209/2ba3984d657a4c78b265100efd745b7b.png