­

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

  • 2019 年 10 月 8 日
  • 筆記

最近朋友圈里经常有看到这样的头像

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

老规矩，先看效果图

仔细研究了下，发现实现起来并不难，核心代码只有下面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()            }         })

一，首先要创建一个小程序

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

二，创建好小程序后，我们就开始来布局

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

<!-- 画布大小按需定制 这里我按照背景图的尺寸定的  -->  <canvas canvas-id="shareImg"></canvas>  <!-- 预览区域  -->  <view class='preview'>    <image src='{{prurl}}' mode='aspectFit'></image>    <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="1">生成头像1</button>    <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="2">生成头像2</button>    <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="3">生成头像3</button>    <button size='mini' open-type="getUserInfo" bindgetuserinfo="shengcheng" data-k="4">生成头像4</button>    <button type='primary' bindtap='save'>保存分享图</button>  </view>

实现效果图如下

三，使用canvas来画图

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

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

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,            confirmText: '好哒',            confirmColor: '#72B9C3',            success: function(res) {              if (res.confirm) {                console.log('用户点击确定');              }            }          })        }      })    }

来看下保存后的效果图

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

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

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

VirMach 便宜 VPS

QNews

QNews