如下图为小程序页面的基本效果，下面将介绍该小程序的功能
页面template代码如下：
<template>
<view class="avatar-containner">
<block v-if="!showCropper">
<image class="pageback" src="../../static/images/pageback.jpg" mode="aspectFill"></image>
<view style="width: 100%;height: 60rpx;"></view>
<!-- canvas绘制区域 -->
<view class="canvas_wrap">
<canvas canvas-id="avatarAreaRef" hidpi="false" class="canvas_box"></canvas>
</view>
<!-- 按钮交互区 -->
<view class="fun_box">
<view @click="chooseImage" class="btn">获取头像</view>
<view class="btn " @click="saveToPhoto">
<text>保存到相册</text>
</view>
<view class="btn sharephoto">
<button class="share_btn" hover-class="none" openType="share"></button>
分享给好友
</view>
</view>
<!-- 头像挂件元素 -->
<view class="avatar_element">
<view class="avatar_classify">
<view class="avatar-title-box">
<view class="avatar-title" @click="chooseClassify(index)" v-for="(item,index) in avatarCategoryList" :class="{'avatar-title-check':checkIndex==index}">
{
{item.name}}
</view>
</view>
<scroll-view lower-threshold="20" :scroll-x="true" class="scroll-view" show-scrollbar="false" >
<view class="scroll-item" @click="addPendant(item)" v-for="(item,index) in pictureList">
<image mode="aspectFill" style="width: 100%;height: 100%;" :src="item.pic"></image>
</view>
</scroll-view>
</view>
</view>
<!-- 原生模板广告 -->
<view class="adContainer" style="width: 100%;height: 260rpx;z-index: 10;" v-if="adverAd != null && adverAd != ''">
<ad :unit-id="adverAd" ad-type="video" @load="adLoadSuccess" @error="adLoadError"></ad>
</view>
</block>
<cropper ref="cropper" :class="{'croppercss':showCropper}" class="hidden" :aspectRatio="1" @complete="complete" @cancel="cancel" ></cropper>
</view>
</template>1、获取头像
小程序会调用手机相册，让用户选择一张图片作为基础头像，这里调用了uni.chooseImage接口能力，并默认设置选择的图片以原图的形式展示出来，并且以500*500像素进行裁剪。
当然有伙伴会有疑惑为什么不让用户直接选择自己的微信头像，我这里的解释是目前腾讯提供给开发者的微信头像是比较模糊的（除了一些小程序还在用旧的获取用户信息接口）
代码如下：
//选择图片然后裁剪
chooseImage(){
var that = this;
uni.chooseImage({
count: 1, //默认9
sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
crop:{
width:500,
height:500
},
success: function (res) {
that.showCropper = true;
//拿到相册的图片，然后进入裁剪组件进行裁剪
that.$refs.cropper.init(res.tempFilePaths[0]);
}
});
//接收cropper页面传递的图片路径
uni.$on('Cropper', path => {
if(path){
console.log("返回路径：",path)
// 上传图片方法
that.avatarPath = path;
that.drawAvatar();
}
});
}
2、点击头像框素材
点击头像框时会对画布的元素进行重新绘制，先清除画布元素，然后先绘制头像，再绘制头像框，这样的顺序保证了头像框的图层在头像的上面！
代码如下：
//点击任意头像框素材事件函数
addPendant(item){
this.avatarFramePath = item.pic;
this.drawAvatar();
},
async drawAvatar(){
uni.showLoading({
title:"处理中"
})
if(!this.avatarPath && !this.avatarFramePath){
return;
}
//先清除画布
this.clearCanvas();
//先绘制头像
if(this.avatarPath){
await this.drawImage(this.avatarPath);
}
//再绘制头像框
if(this.avatarFramePath){
await this.drawImage(this.avatarFramePath);
}
uni.hideLoading();
},
async drawImage(url){
// 加载第一张图片到canvas上
const imageInfo = await this.loadImage(url);
this.canvasContext.drawImage(imageInfo.path, 0, 0, 350*this.powerW, 350*this.powerW );
this.canvasContext.draw(true);
}
3、保存到相册
这一个步骤是最后一步，会提前检查用户有无获取头像并且选择头像框，如果没有则弹出提示；
条件通过后调用uni.canvasToTempFilePath能力对画布转换为图像，并自动保存到手机相册里面，
值得注意的是用户如果没有赋予scope.writePhotosAlbum写入相册权限，则无法进行该功能，所以在保存相册之前，程序会检查用户是否赋予了该权限，再去执行对应功能代码！
代码如下：
saveToPhoto(){
if(!this.avatarPath || this.avatarPath == "" ){
uni.showToast({
title:"请获取头像",
icon:"none",
duration:1000
})
return;
}
if(!this.avatarFramePath || this.thisavatarFramePath == "" ){
uni.showToast({
title:"请选择头像框",
icon:'none',
duration:1000
})
return;
}
uni.showLoading({
title:"正在保存中"
})
uni.canvasToTempFilePath({// res.tempFilePath临时路径
canvasId: 'avatarAreaRef',
success: (res) => {
console.log(res, '临时路径');
uni.saveImageToPhotosAlbum({ // 保存本地
filePath: res.tempFilePath,
success: (response) => {
uni.showToast({
title: '保存成功',
icon: 'success'
})
console.log(response, 'success');
},
fail: (response) => {
console.log(response, 'error');
uni.openSetting({ //打开权限
success: (response) => {
if (!response.authSetting['scope.writePhotosAlbum']){
uni.showToast({
title: '获取权限成功, 再次点击即可保存',
icon: none
})
} else {
uni.showToast({
title: '获取权限失败, 无法保存',
icon: none
})
}
}
})
},
complete: (response)=>{
uni.hideLoading();
}
})
},
fail:(err)=>{
console.log("canvasToTempFilePath失败：",err)
}
})
}
此外，小程序里面的头像框素材图片是通过开放接口获取的，该接口需要加入到域名白名单下：https://bzadmin.ajiexcx.cn，否则真机测试没有预览到真实效果；
最后小伙伴们拿到源码后，记得去mainifest.json文件里，到微信小程序配置里面修改自己的小程序appid哦，本次小程序案例可以前往《青枫壁纸》小程序查看效果，源码获取请前往《星梦Blog》小程序中获取😘😘
如果喜欢本文章，欢迎点赞+收藏😆，如果疑惑可在评论区留言
