小程序生成圣诞头像 Plus - WXOPEN Club

背景

今天中午在社区看到一篇要圣诞帽的帖子，于是下午抽了点时间写了两个demo发一篇文章吧。

实际上的内心OS：这么基础的东西，还需要来社区要？这届开发者那么菜的吗？

简易版

国庆的时候一波要小国旗的热度火了，当时在群里花了半小时写了个demo，没有发文章，这次改成简易版的圣诞头像框一起发出来吧。

实现步骤

1、获取用户头像

…略（这个要是不会就别写往下看了）

2、将头像绘制到canvas中

获取到的头像为网络地址，小程序的canvas不支持网络图片，所以需要先使用 wx.getImageInfo 或 wx.downloadFile 获取一个本地图片地址才可以绘制到canvas中，然后再绘制一个头像框就ok了

代码

wx.getImageInfo({
  src: 头像URL,
  success: result => {
    let ctx = wx.createCanvasContext('head')
    ctx.drawImage(result['path'], 0, 0, 300, 300)
    ctx.drawImage(头像框图片地址, 0, 0, 300, 300)
    ctx.draw()
  }
})

3、将canvas导出为图片并保存到相册

使用 wx.canvasToTempFilePath 将canvas导出为图片，然后调用 wx.saveImageToPhotosAlbum 将图片保存到相册

代码

wx.canvasToTempFilePath({
  x: 0,
  y: 0,
  width: 300,
  height: 300,
  destWidth: 300,
  destHeight: 300,
  canvasId: 'head',
  success: result => {
    wx.saveImageToPhotosAlbum({
      filePath: result.tempFilePath,
      success: () => {
        wx.showToast({
          title: '保存成功'
        })
      }
    })
  }
 })