微信小程序生成海报带用户头像

效果如图

image.png

既然需要头像，就需要在开发设置下downloadFile合法域名配上头像的域名

image.png

最重要的一点，原来一直好使的，突然间生成不了海报了，在canvasToTempFilePath这步报错fail no image，终于找到原因：canvas不能hidden，也就是不能display:none，所以下面对canvas的样式做了调整。
html

<button  open-type="getUserInfo" lang="zh_CN" bindgetuserinfo="shares">晒到朋友圈</button>
<view class="zhezao" hidden="{{hidden}}">
<canvas  canvas-id="shareImg" style="width:1080px;height:1920px;display:block;position:absolute;top:0px;left:-1080px;"></canvas>
    <view class="t_w">
        <view class="roca_canvas">
            <image src="{{prurl}}"></image>
        </view>
        <view class="save_img" hover-class="liangdu" bindtap="saveImg">保存到图库</view>
        <view class="close_img" hover-class="liangdu" bindtap="closeImg"><image src="/img/stepPage_closeWindow.png"></image></view>
    </view>
</view>

js

data: {
   ...
    hidden: true,//控制弹窗显示
    userImg:'',//用户的头像
    prurl:'',
    bgImg:'',//背景图
  },
shares: function (info) {
    var that = this
    if(info.detail.userInfo){
      that.setData({
        userImg:info.detail.userInfo.avatarUrl
      })
      that.setData({
          hidden: false
        })
        if(that.data.prurl==''){
            wx.showLoading({
              title: '努力生成中...',
            })
            that.canvas();
        }
        if(that.data.prurl!='')
          wx.showToast({
            title: '努力生成中...',
            icon:'loading',
            duration: 200
          })
    }    
  },
canvas:function(){
    var that = this
    let promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: '../../resources/img/stepPage_poster.png',
        success: function (res) {
            that.setData({
                bgImg:res.path
            })
          resolve(res);
        }
      })
    });
    
    var path3 = that.data.userImg;    
    let promise3 = new Promise(function (resolve, reject) {
        wx.getImageInfo({
          src: path3,
          success: function (res) {
            that.setData({
              bdcode3:res.path
            })
            resolve(res);
          }
        })
    });
    
    Promise.all([
      promise1,promise3
    ]).then(res => {
      const ctx = wx.createCanvasContext('shareImg')
      ctx.setFillStyle('white');
      ctx.fillRect(0, 0, 1080, 1920);
      ctx.stroke();
      //主要就是计算好各个图文的位置
      ctx.drawImage('/'+that.data.bgImg, 0, 0, 1080, 1920);//背景图
      //白字
      ctx.setFillStyle('#ffffff');
      ctx.setTextAlign('center');
      ctx.font = 'normal normal 130px Bebas Neue Book';
      ctx.fillText(that.data.all_num, 1080 / 2, 1050)
      //黑字
      ctx.setFillStyle("#000000")
      ctx.setTextAlign('center')
      ctx.font = 'normal normal 48px Bebas Neue';
      ctx.fillText(that.data.now, 1080 / 2, 1170)
      ctx.fill()
      ctx.stroke()
      //头像
      ctx.beginPath()
      ctx.arc(540, 520, 130, 0, Math.PI * 2,false);
      ctx.setStrokeStyle('#ffffff')  //设置边的
      ctx.clip();

      ctx.drawImage(that.data.bdcode3, 410, 390, 260, 260)
      
      ctx.closePath()
      ctx.stroke()
      ctx.draw(true,function(){
        that.canvasTo()
      })
    })
  },
canvasTo:function(){
    var that = this
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      width: 1080,
      height: 1920,
      destWidth: 1080,
      destHeight: 1920,
      canvasId: 'shareImg',
      success: function (res) {
        that.setData({
          prurl: res.tempFilePath,
        })
        wx.hideLoading()
      },
      fail: function (res) {
        console.log(res)
      }
    })
  },
//关闭弹层
  closeImg:function(){
    wx.hideLoading();
    this.setData({
      hidden: true
    })
  },
//保存到相册
  saveImg: function () {
    var self = this;
    var e = this.data.prurl;
    //保存到相册授权
    app.getPhotosAlbum(self);
    wx.saveImageToPhotosAlbum({
      filePath:e,
      success(res){
        self.closeImg();
        wx.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000
        }) 
      }
    })
  },