背景

今天中午在社区看到一篇要圣诞帽的帖子，于是下午抽了点时间写了两个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: '保存成功'
        })
      }
    })
  }
 })

进阶版

真正的圣诞头像一般是在原有的头像上加一顶圣诞帽，每个人的头像都是不一样的，这样就需要对圣诞帽进行调整大小、旋转等操作，这就需要一些canvas手势操作，在GitHub上随便找了个轮子 点击查看。

这个轮子文档中的一些方法好像并未实现

实现步骤

步骤和简易版大致相同，核心代码轮子里都实现了，我只是调用，这里略…

代码片段 https://developers.weixin.qq.com/s/lk5QFRmQ7DdL

图片素材均来自网络，仅供学习交流，严禁用于商业用途！

本文内容及评论未经允许，禁止任何形式的转载与复制（代码可在程序中使用）