开发虎年春节头像生成小程序
马上就到春节了,今天看到有网友分享了网页版的虎年头像制作工具,感觉很不错,正好打算做个小程序练手没啥主题,那就用这个试试吧。
先上最终效果图:
说下实现流程
第一步:先获取到当前微信的头像图片,主要代码如下,注意默认获取到的头像图片不是高清的,需要先转换成高清图片,避免生成之后很模糊。
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);
}
})
}
});
},
这样就实现了主要的功能了。
最后放上小程序码,欢迎大家扫码体验一下:
祝大家春节快乐,虎年大吉!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfgbae
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01