如下图为小程序页面的基本效果，下面将介绍该小程序的功能

页面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, //默认9sizeType: ['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》小程序中获取😘😘

如果喜欢本文章，欢迎点赞+收藏😆，如果疑惑可在评论区留言