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

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

效果图：

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，完工