微信小程序开发--个性化头像生成(国庆渐变头像、圣诞帽头像)
1、背景
今年国庆 渐变头像着实火了一把，看到微信里面的好友，很多都换上了新颜。
文章图片
如上图所示，一个渐变的头像。
作为码农，看到上面的效果，首先会想到这个是怎么实现的？我可不可以？
于是就有了今天这篇文章，记录一下自己动手做一个头像制作小工具。
话不多说，上效果图。
制作国庆头像的效果图：
文章图片
操作步骤：
1、获取头像。
2、选择热门图片。
3、保存头像。
制作圣诞头像效果图：
【微信小程序开发--个性化头像生成(国庆渐变头像、圣诞帽头像)】
操作步骤：
1、获取当前微信的用户头像。
2、选择喜欢的圣诞帽、调整圣诞帽角度。
3、保存图片。
好了上面就是最终实现的效果，感兴趣的小伙伴可以扫描下面的小程序二维码进行体验：
文章图片
2、实现原理
先介绍下实现原理，可以看到我们最终生成的头像是由两部分组成。
微信头像 + 选择的圣诞帽
在小程序中要实现这种将两张图片或者多张图片叠加到一起生成一张图片，用到了
Canvas组件。
官方文档链接如下：
https://developers.weixin.qq....
在我们这里主要用到了两个API：
1) drawImage(imageResource, dx, dy, dWidth, dHeight)
将图片绘制到画布上
参数介绍：
string imageResource
所要绘制的图片资源（网络图片要通过 getImageInfo / downloadFile 先下载）
number dx
imageResource的左上角在目标 canvas 上 x 轴的位置
number dy
imageResource的左上角在目标 canvas 上 y 轴的位置
number dWidth
在目标画布上绘制imageResource的宽度，允许对绘制的imageResource进行缩放
number dHeight
在目标画布上绘制imageResource的高度，允许对绘制的imageResource进行缩放
2) draw(boolean reserve, function callback)
将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
参数
boolean reserve
本次绘制是否接着上一次绘制。即 reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制；若 reserve 参数为 true，则保留当前画布上的内容，本次调用 drawCanvas 绘制的内容覆盖在上面，默认 false。
function callback
绘制完成后执行的回调函数
掌握了上面的两个api就可以实现将两张图片叠加到一起了。
3、代码实现
工程结构：
文章图片
images: 存放图片资源;
pages：主要的实现;
guoqing 文件夹实现国庆头像制作;
chrismas 文件夹实现圣诞头像制作;
1) 国庆头像制作代码
布局文件：guoqing.wxml
热门
样式文件: guoqing.wxss
/* pages/guoqing/guoqing.wxss */
page{
background: #FF5651;
display: flex;
flex-direction: column;
align-items: center;
align-content: center;
}.header{
width: 315px!important;
height: 125px!important;
}.canvas-view{
width: 100%;
align-content: center;
align-items: center;
text-align: center;
display: flex;
flex-direction: row;
justify-content: space-between;
}.canvas-view-right{
display: flex;
flex-direction: column;
margin: 10px;
}.btn1{
background-color:#EB9A41;
border-radius: 50px;
color:#ffffff;
width: 130px!important;
height: 40px!important;
font-size: 32rpx;
height: 50rpx;
display: flex;
justify-content: center;
margin-top: 10px;
}/* list公共 */
.hot-biz{
margin-top: 10px;
background: #fff;
}
.hot-biz .tx{
font-size: 15px;
margin-left: 10px;
padding: 9px 0;
font-weight: 700;
color: #FF5651;
}
.hot-top{
display: flex;
}/* 热门壁纸 */
.hot-item-list{
margin: 0 auto;
width: 94%;
margin-bottom: 20px;
align-items: center;
}
.hot-biz-list {
display: flex;
justify-content: space-between;
height: 100%;
align-items: center;
/* flex-wrap: wrap;
*/
}
.hot-biz-list .item {
width: 50px;
flex-direction: column;
align-items: center;
height: 50px;
padding-right: 8px;
}
.hot-biz-list image {
width: 50px;
height: 50px;
border-radius:5px;
margin: 0 auto;
display: block;
border:1px solid rgb(235, 235, 245);
}逻辑文件： guoqing.js
// pages/guoqing/guoqing.js
const ctx = wx.createCanvasContext('shareImg');
const app = getApp();
Page({/**
* 页面的初始数据
*/
data: {
prurl: '',defaultImg: 0,userInfo: {},
hasUserInfo: false,list: [
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11
]
},selectImg: function(e){
var current = e.target.dataset.id;
console.log(current);
this.setData({
defaultImg: current,
prurl: ''
});
console.log("this:",this.data.userInfo);
if(this.data.userInfo.avatarUrl){
this.drawImg(this.data.userInfo.avatarUrl);
} else {
this.initCanvas(this.data.defaultImg);
}
},// 初始化
initCanvas(index){
let that = this;
//主要就是计算好各个图文的位置
let num = 150;
// ctx.drawImage(res[0].path, 0, 0, num, num)
ctx.drawImage(`../../images/hat${index}.png`, 0, 0, num, num)
ctx.stroke()
ctx.draw(false, () => {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: num,
height: num,
destWidth: 960,
destHeight: 960,
canvasId: 'shareImg',
success: function(res) {
that.setData({
prurl: res.tempFilePath
})
// wx.hideLoading()
},
fail: function(res) {
wx.hideLoading()
}
})
})
},// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
getUserProfile(e) {
let that = this;
if(!that.data.userInfo.avatarUrl){
console.log('-- 1 --');
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(res.userInfo.avatarUrl);
app.globalData.userInfo = res.userInfo;
}
});
}else if(that.data.userInfo.avatarUrl){
console.log('-- 2 --');
that.drawImg(that.data.userInfo.avatarUrl);
}},drawImg(avatarUrl){
let that = this;
console.log("-- drawImg --");
// `${that.data.userInfo.avatarUrl}`
let promise1 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: avatarUrl,
success: function(res) {
console.log("promise1", res)
resolve(res);
}
})
});
var index = that.data.defaultImg;
// ../../images/head${index}.png
// hat0.pngavg.jpg
let promise2 = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: `../../images/hat${index}.png`,
success: function(res) {
console.log(res)
resolve(res);
}
})
});
Promise.all([
promise1, promise2
]).then(res => {
console.log("Promise.all", res)
//主要就是计算好各个图文的位置
let num = 150;
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: 960,
destHeight: 960,
canvasId: 'shareImg',
success: function(res) {
that.setData({
prurl: res.tempFilePath
})
// wx.hideLoading()
},
fail: function(res) {
wx.hideLoading()
}
})
})
})},handleShare: function(){
console.log('handleShare method');
this.onShareAppMessage();
},save: function() {
var that = this;
if(!that.data.prurl){
wx.showToast({
title: '请先生成专属头像',
})
return;
}
wx.saveImageToPhotosAlbum({
filePath: that.data.prurl,
success(res) {
wx.showModal({
content: '图片已保存到相册!',
showCancel: false,
success: function(res) {
if (res.confirm) {
console.log('用户点击确定');
}
}
})
}
})
},/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.initCanvas(this.data.defaultImg);
},/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
return {
title: '领取你的国庆专属头像',
success: function (res) {
// 转发成功
console.log("转发成功:" + JSON.stringify(res));
},
fail: function (res) {
// 转发失败
console.log("转发失败:" + JSON.stringify(res));
}
}
},/**
* 用户点击右上角分享朋友圈
*/
onShareTimeline(){}
})好了，国庆头像制作的主要代码就这么多，代码已经上传到github上了，感兴趣的小伙伴可以到github上查看使用：
https://github.com/YMAndroid/...
对下，下面是头像制作小程序的二维码，想制作圣诞头像的小伙伴可以扫描体验哟~
文章图片
推荐阅读
- 一个小故事，我的思考。
- 家乡的那条小河
- 一个人的碎碎念
- 野营记-第五章|野营记-第五章 讨伐梦魇兽
- 昨夜小楼听风
- 2021-02-17|2021-02-17 小儿按摩膻中穴-舒缓咳嗽
- 基于微信小程序带后端ssm接口小区物业管理平台设计
- 2019.4.18感恩日记
- 那件我们忽略的小事叫感恩
- 你有婚内虐待行为吗（）