国庆马上来临，头像已经先热起来了，为了蹭蹭热度，赶紧加班搞了一个。

本来是想直接github弄一个的，结果下载下来各种混淆加密，虽然也能用，不过总感觉不舒服，于是照着样式，自己实现了一个。

主题：微信小程序实现制作国庆头像

主要还是为了蹭热度，顺便做的这么个东西，为啥自己做，是为了以后再扩展或修改更简单一些，不至于受制于人。

准备

• 小程序帐号，赶紧申请邮箱，注册一个。
• 小程序名字，既然是蹭热度，那国庆妥妥得带着吧
• 服务器/域名，这个主要是为了后期的可配置化，云开发也可以的（不过还没有尝试过）
• 素材，抓的别人的，群里好友送的...反正都不是自己的

思路

目标还是实现一个图片的合并，这个简单（canvas就可以了）。 还有能够拿到用户头像，可以分享出去。 最后的最后，如果用户量上来的话，还可以扔点广告平摊下服务器成本。

开发

图片合并核心代码

let r1 = await that.loadFile(that.data.avatar);
let r2 = await that.loadFile(that.data.iconavatar);
let ctx = wx.createCanvasContext('avatarCanvas');
ctx.clearRect(0,0,250,250);
ctx.drawImage(r1,0,0,250,250);
ctx.drawImage(r2,0,0,250,250);
ctx.draw(false,()=>{
  wx.canvasToTempFilePath({
    x : 0,
    y : 0,
    width : 250,
    height:250,
    destWidth : 250,
    destHeight : 250,
    canvasId : 'avatarCanvas',
    success(res){
      wx.hideLoading({
        success: (res) => {},
      })
      wx.showToast({
        title: '生成成功，保存至相册',
      })
      let tempFilePath = res.tempFilePath;
      App.globalData.result = tempFilePath;
      //保存头像至相册
      wx.saveImageToPhotosAlbum({
        filePath: tempFilePath,
        success : function(data){
          //跳转到成功页面
          wx.navigateTo({
            url: '/pages/done/index',
          })
        },
        fail(er){
          console.log(er);
          if(er.errMsg == 'saveImageToPhotosAlbum:fail auth deny'){
            wx.openSetting({
              withSubscriptions: true,
              success (sdata){
                if(sdata.authSetting['scope.address.writePhotosAlbum']){
                  wx.showToast({
                    title: '请重新点击保存头像',
                  })
                }else{
                  wx.showToast({
                    title: '获取授权失败，无法保存头像',
                  })
                }
              }
            })
          }
        }
      })
    },
    fail(err){
      console.log(err)
    }
  })
})

通过canvas将两个图片合并在一起然后渲染即可。