小程序10行代码实现微信头像挂红旗，国庆节个性化头像

既然这么火，大家要图又这么难，作为程序员的自己当然要自己动手实现一个。

仔细研究了下，发现实现起来并不难，核心代码只有下面10行。

wx.canvasToTempFilePath({
   x: 0,
   y: 0,
   width: num,
   height: num,
   destWidth: num,
   destHeight: num,
   canvasId: 'shareImg',
   success: function(res) {
     that.setData({
prurl: res.tempFilePath
     })
     wx.hideLoading()
   },
   fail: function(res) {
     wx.hideLoading()
   }
})

至于如何创建小程序，我这里就不在细讲了，我也有写过创建小程序的文章，也有路过相关的学习视频，去翻下我历史文章找找就行。

布局很简单，只有下面几行代码。

  
  生成头像1
  生成头像2
  生成头像3
  生成头像4
  保存分享图

实现效果图如下

其实我们实现微信头像挂红旗，原理很简单，就是把头像放在下面，然后把有红旗的相框盖在头像上面

下面就直接把核心代码贴给大家

let promise1 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
 src: "../../images/xiaoshitou.jpg",
 success: function(res) {
   console.log("promise1", res)
   resolve(res);
 }
      })
    });
    let promise2 = new Promise(function(resolve, reject) {
      wx.getImageInfo({
 src: `../../images/head${index}.png`,
 success: function(res) {
   console.log(res)
   resolve(res);
 }
      })
    });
    Promise.all([
      promise1, promise2
    ]).then(res => {
      console.log("Promise.all", res)
      //主要就是计算好各个图文的位置
      let num = 1125;
      ctx.drawImage('../../'+res[0].path, 0, 0, num, num)
      ctx.drawImage('../../' + res[1].path, 0, 0, num, num)
      ctx.stroke()
      ctx.draw(false, () => {
 wx.canvasToTempFilePath({
   x: 0,
   y: 0,
   width: num,
   height: num,
   destWidth: num,
   destHeight: num,
   canvasId: 'shareImg',
   success: function(res) {
     that.setData({
prurl: res.tempFilePath
     })
     wx.hideLoading()
   },
   fail: function(res) {
     wx.hideLoading()
   }
 })
      })
    })

来看下画出来的效果图

保存图片的代码也很简单。

save: function() {
    var that = this
    wx.saveImageToPhotosAlbum({
      filePath: that.data.prurl,
      success(res) {
 wx.showModal({
   content: '图片已保存到相册，赶紧晒一下吧~',
   showCancel: false,
   /confirm/iText: '好哒',
   /confirm/iColor: '#72B9C3',
   success: function(res) {
     if (res./confirm/i) {
console.log('用户点击确定');
     }
   }
 })
      }
    })
  }

来看下保存后的效果图

到这里，我的微信头像就成功的加上了小红旗了。

源码我也已经给大家准备好了，有需要的同学在文末留言即可。

后面我准备录制一门视频课程出来，来详细教大家实现这个功能，敬请关注。