小程序头像制作
hackun 人气:10马上就到春节了，今天看到有网友分享了网页版的虎年头像制作工具，感觉很不错，正好打算做个小程序练手没啥主题，那就用这个试试吧。
先上最终效果图：
说下实现流程
第一步：先获取到当前微信的头像图片，主要代码如下，注意默认获取到的头像图片不是高清的，需要先转换成高清图片，避免生成之后很模糊。
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);
}
})
}
});
},这样就实现了主要的功能了。
最后放上小程序码，欢迎大家扫码体验一下：
最后 当前项目已开源：hackun666/new-year-face: wechat new year face maker (github.com)
祝大家春节快乐，虎年大吉！
加载全部内容