带你开发一个虎年春节头像生成小程序

带你开发一个虎年春节头像生成小程序

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

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

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

先上最终效果图：

说下实现流程

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

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

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

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

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

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

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

原文地址：https://juejin-/post/7057807283463389191作者：hackun

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。