纵有疾风起
人生不言弃

小程序10行代码实现微信头像挂红旗

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

小程序10行代码实现微信头像挂红旗插图

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

老规矩,先看效果图

小程序10行代码实现微信头像挂红旗插图(1)

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

实现效果图如下

小程序10行代码实现微信头像挂红旗插图(2)

三,使用canvas来画图

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

小程序10行代码实现微信头像挂红旗插图(3)

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

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()          }        })      })    })

来看下画出来的效果图

小程序10行代码实现微信头像挂红旗插图(4)

四,头像加红旗画好以后,我们就要想办法把图片保存到本地了

小程序10行代码实现微信头像挂红旗插图(5)

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

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('用户点击确定');            }          }        })      }    })  }

来看下保存后的效果图

小程序10行代码实现微信头像挂红旗插图(6)

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

小程序10行代码实现微信头像挂红旗插图(7)

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

小程序10行代码实现微信头像挂红旗插图(8)

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

文章转载于:https://www.jianshu.com/p/7fef3db4b67c

原著是一个有趣的人,若有侵权,请通知删除

未经允许不得转载:起风网 » 小程序10行代码实现微信头像挂红旗

分享到: 生成海报
avatar

评论 抢沙发

评论前必须登录!

立即登录   注册

切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活