头像生成小程序搭建（免费分享）

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

页面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》小程序中获取😘😘

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