### [带你开发一个虎年春节头像生成小程序](https://www.prosaas.cn/article/16308)

**Published:** 2022-01-28T02:16:11

**Author:** 5201314

**Excerpt:** 本篇文章带大家跟风做一个虎年春节头像制作小程序，获取微信头像，选择头像边框，即可合成不同的虎年春节头像，希望对…

本篇文章带大家跟风做一个虎年春节头像制作小程序，获取微信头像，选择头像边框，即可合成不同的虎年春节头像，希望对大家有所帮助！

![](https://img.php.cn/upload/article/000/000/024/61f351303e639375.jpg)

马上就到春节了，今天看到有网友分享了网页版的虎年头像制作工具，感觉很不错，正好打算做个小程序练手没啥主题，那就用这个试试吧。

先上最终效果图：

![](https://img.php.cn/upload/image/191/696/323/1643335600313823.jpg)

**说下实现流程**

第一步：先获取到当前微信的头像图片，主要代码如下，注意默认获取到的头像图片不是高清的，需要先转换成高清图片，避免生成之后很模糊。

 getUserProfile(e) {
    console.log(e)
    let that = this;
    wx.getUserProfile({
      desc: '仅用于生成头像使用',
      success: (res) => {
        var url = res.userInfo.avatarUrl;
        while (!isNaN(parseInt(url.substring(url.length - 1, url.length)))) {
          url = url.substring(0, url.length - 1)
        }
        url = url.substring(0, url.length - 1) + "/0";
        res.userInfo.avatarUrl = url;
        console.log(JSON.stringify(res.userInfo));
        that.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
        that.drawImg();
      }
    });
  },

第二步：合成头像，把素材图片和第一步获取到的头像图片，获取到本地文件，然后利用小程序的cavas组件进行合成。

drawImg() {
    let that = this;
    wx.showLoading({
      title: '生成头像中...',
    })
    let promise1 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: that.data.userInfo.avatarUrl,
        success: function (res) {
          resolve(res);
        }
      })
    });
    var mask\_id = that.data.now\_mask;
    let promise2 = new Promise(function (resolve, reject) {
      wx.getImageInfo({
        src: \`../../assets/img/mask0${mask\_id}.png\`,
        success: function (res) {
          console.log(res)
          resolve(res);
        }
      })
    });
    Promise.all(\[
      promise1, promise2
    \]).then(res => {
      console.log(res)
      var windowWidth = wx.getSystemInfoSync().windowWidth
      var context = wx.createCanvasContext('myAvatar');
      var size = windowWidth /750 \* 500
      // var size = 500
      context.drawImage(res\[0\].path, 0, 0, size, size);
      context.draw(true)
      context.save();
      context.drawImage('../../'+res\[1\].path, 0, 0, size, size);
      context.draw(true)
      context.save();

    })
    wx.hideLoading()
  },

第三步：下载合成的图片到本地相册。

canvasToTempFile(){
    if(!this.data.userInfo){
      wx.showModal({
        title: '温馨提示',
        content: '请先点击上方获取微信头像',
        showCancel: false,
      })
      return
    }
    var windowWidth = wx.getSystemInfoSync().windowWidth
    var size = 500
    // var dpr = 750 / windowWidth
    wx.canvasToTempFilePath({
      x: 0,
      y: 0,
      height: size,
      width: size,
      canvasId: 'myAvatar',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: result => {
            wx.hideLoading();
            wx.showModal({
              content: '图片已保存到相册,请前往微信去设置哟!',
              showCancel: false,
              success: function(res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                }
              }
            })
          }, fail(e) {
            wx.hideLoading();
            console.log("err:" + e);
          }
        })
      }
    });
  },

这样就实现了主要的功能了。

最后放上小程序码，欢迎大家扫码体验一下：

![](https://img.php.cn/upload/image/632/221/867/1643335606128985.jpg)

> 最后 当前项目已开源：https://github.com/hackun666/new-year-face

祝大家春节快乐，虎年大吉！

> 原文地址：https://juejin.cn/post/7057807283463389191
> 
> 作者：hackun 

【相关学习推荐：小程序开发教程】

以上就是带你开发一个虎年春节头像生成小程序的详细内容，更多请关注知企PROSAAS其它相关文章！

**Tags:** github, https

**Categories:** 后端开发

---