带你开发一个虎年春节头像生成小程序
2022-01-28 10:26:32
本篇文章带大家跟风做一个虎年春节头像制作小程序,获取微信头像,选择头像边框,即可合成不同的虎年春节头像,希望对大家有所帮助!
马上就到春节了,今天看到有网友分享了网页版的虎年头像制作工具,感觉很不错,正好打算做个小程序练手没啥主题,那就用这个试试吧。
先上最终效果图:
说下实现流程
第一步:先获取到当前微信的头像图片,主要代码如下,注意默认获取到的头像图片不是高清的,需要先转换成高清图片,避免生成之后很模糊。
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://github.com/hackun666/new-year-face
祝大家春节快乐,虎年大吉!
原文地址:https://juejin.cn/post/7057807283463389191
作者:hackun
【相关学习推荐:小程序开发教程】
以上就是带你开发一个虎年春节头像生成小程序的详细内容,更多请关注dnjidi.com其它相关文章!
相关阅读
- 小程序如何自定义tabbar组件,实现底部tab切换
- 浅谈小程序跨页面之间通信的几种方式
- 浅谈小程序怎么实现“五星评价”功能(支持点击+滑动)
- 教你怎么仿做得物APP微信小程序
- 深入讲解小程序中实现搜索功能的方法
- 关于小程序的request封装(附详细流程)
- 聊聊怎么利用小程序生成海报(插件推荐)
- 小程序集成环信IM怎么用?(附代码实例)
- 微信小程序中echarts的用法和可能遇见的坑,快来收藏避雷!!
- 手把手教你使用小程序创建画布时钟(实例)
- 手把手教你怎么实现微信小程序自定义底部导航栏
- 深入解析小程序template模板的使用方法
- 小程序中Component组件怎么使用?实用指南分享
- 微信小程序中如何实现子向父传参(页面通信)
- 手把手教你在小程序中怎么实现悬浮按钮(代码示例)
- 小程序怎么配置Twoxml,让其完美支持Markdown!
- 什么是思维导图?怎么使用F6在小程序中绘制思维导图?
- 详解微信小程序中如何安装和引用ECharts?