头像生成小程序搭建（免费分享）
如下图为小程序页面的基本效果，下面将介绍该小程序的功能
页面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》小程序中获取😘😘
如果喜欢本文章，欢迎点赞+收藏😆，如果疑惑可在评论区留言
相关文章：
头像生成小程序搭建（免费分享）
如下图为小程序页面的基本效果，下面将介绍该小程序的功能 页面template代码如下： <template><view class"avatar-containner"><block v-if"!showCropper"><image class"pageback" src"../../s…...
Alluxio 联手 Solidigm 推出针对 AI 工作负载的高级缓存解决方案
作者：Wayne Gao, Yi Wang, Jie Chen, Sarika Mehta Alluxio 作为全球领先的 AI 缓存解决方案供应商， 提供针对 GPU 驱动 AI 负载的高速缓存。其可扩展架构支持数万个节点，能显著降低存储带宽的消耗。Alluxio 在解决 AI 存储挑战方面的前沿技…...
【ComfyUI专栏】ComfyUI 部署Kolors
什么是Kolors？我相信一定会有朋友可能第一次听说这个生图的模型，开始我也很难想象，这竟然是快手推出的可灵AI的项目，我们可以直接利用模型来生成图片和视频。 大家可以通过直接访问可灵AI的网址获取到可灵的项目，但是对于我们来说我们需要基于ComfyUI来生成必要的图片和视…...
HBase的原理
一、什么是HBase HBase是一个分布式，版本化，面向列的数据库，依赖Hadoop和Zookeeper （1）HBase的优点 提供高可靠性、高性能、列存储、可伸缩、实时读写的数据库系统 (2) HBase 表的特性 Region包含多行 列族包含多…...
Spring Boot中如何实现异步处理
在 Spring Boot 中实现异步处理可以通过使用 Async 注解和 EnableAsync 注解来实现。以下是如何配置和使用异步处理的步骤和示例代码。 步骤： 启用异步支持： 在 Spring Boot 配置类上使用 EnableAsync 注解启用异步处理。使用 Async 注解异步方法&…...
SSM电子商城系统
🍅点赞收藏关注 → 添加文档最下方联系方式咨询本源代码、数据库🍅 本人在Java毕业设计领域有多年的经验，陆续会更新更多优质的Java实战项目希望你能有所收获，少走一些弯路。🍅关注我不迷路🍅 项目视频 电…...
新版IDEA创建数据库表
这是老版本的IDEA创建数据库表，下面可以自己勾选Not null（非空),Auto inc（自增长),Unique(唯一标识)和Primary key（主键) 这是新版的IDEA创建数据库表，Not null和Auto inc可以看得到，但Unique和Primary key…...
二叉树的存储（下）c++
链式存储 我们可以创建两个数组L[N]、r[N]，分别存储i 号结点的左右孩子的编号，这样就可以通过数组下标实现链式访问。 本质上还是孩子表示法，存储的是左右孩子的信息 #include <iostream>using namespace std;const int N 1e6 10; …...
Flutter中PlatformView在鸿蒙中的使用
Flutter中PlatformView在鸿蒙中的使用 概述在Flutter中的处理鸿蒙端创建内嵌的鸿蒙视图创建PlatformView创建PlatformViewFactory创建plugin，注册platformview注册插件 概述 集成平台视图（后称为平台视图）允许将原生视图嵌入到 Flutter 应用…...
Docker—搭建Harbor和阿里云私有仓库
Harbor概述 Harbor是一个开源的企业级Docker Registry管理项目，由VMware公司开发。它的主要用途是帮助用户迅速搭建一个企业级的Docker Registry服务，提供比Docker官方公共镜像仓库更为丰富和安全的功能，特别适合企业环境使用。12 Harb…...
一篇博文了解JVM的各个内存区域
JVM的内存区域可以细分为程序计数器、虚拟机栈、本地方法栈、堆和方法区 其中，方法区和堆是线程共享的，虚拟机栈、本地方法栈和程序计数器是私有的； 先来说说程序计数器，它也被称为PC寄存器，占据着很小的内存空间…...
无监督学习：聚类、异常检测
聚类 工作原因我对聚类特别熟悉，因此视频课程基本快进看完，不做记录 异常检测 高斯(正态)分布 多特征异常检测 将每个特征作为独立特征（实践证明即使不完全独立也影响不大）计算高斯分布的参数，然后将待预估样本代入…...
pdf与ofd的区别详细对比
PDF（Portable Document Format）和OFD（Open Fixed-layout Document）是两种常见的电子文档格式，它们在设计理念、技术实现、应用场景等方面存在显著差异。以下是对这两种格式的详细对比分析，涵盖其历史背景、…...
DDD架构实战第六讲总结：领域驱动设计中的聚合
云架构师系列课程之DDD架构实战第六讲总结：领域驱动设计中的聚合 聚合提升了对象系统的粒度，保证了业务逻辑的完整性，减少了错误产生的概率 一、引言 本讲将探讨领域驱动设计（DDD）中的重要概念——聚合。聚合是业务完整性的单元，是一个更大力度的封装。在领域驱动设计中…...
CentOS7使用源码安装PHP8教程整理
CentOS7使用源码安装PHP8教程整理 下载安装包解压下载的php tar源码包安装所需的一些依赖扩展库安装前的配置修改配置文件1、进入php8的安装包 配置环境变量开机自启启动服务创建软连接常见问题1、checking for icu-uc > 50.1 icu-io icu-i18n... no2、configure: error: Pa…...
vue3中自定一个组件并且能够用v-model对自定义组件进行数据的双向绑定
1. 基础用法 在 Vue3 中，v-model 在组件上的使用有了更灵活的方式。默认情况下，v-model 使用 modelValue 作为 prop，update:modelValue 作为事件。 1.1 基本示例 <!-- CustomInput.vue --> <template><input:value"mo…...
【win11】解决msrdc.exe窗口启动导致周期性失去焦点
msrdc.exe randomly stealing focus 最近写代码时，经常出现周期性失去焦点的情况非常恼人,不确定是否是Q4的微软更新引起？换了输入法也不行，只能借助工具来查看：大神的工具非常好： 可以发现是remote app 启动了一个UI…...
【2024年终总结】深圳工作生活评测
距离上次写年终总结已经过了一年半了，这一年半中哪怕经历了很多的事情，但是感觉又没发生什么。想写一些骚话，却总觉得自己无法完全表达，便也就这样，静静地记录下这一段时光。 现在是2025年，春节前的时光&am…...
【29】Word：李楠-学术期刊❗
目录 题目 NO1.2.3.4.5 NO6.7.8 NO9.10.11 NO12.13.14.15 NO16 题目 NO1.2.3.4.5 另存为手动/F12Fn光标来到开头位置处→插入→封面→选择花丝→根据样例图片，对应位置填入对应文字 (手动调整即可）复制样式：开始→样式对话框→管理…...
npm常用命令
以往nodejs版本 Node.js — Node.js 版本 CNPM Binaries Mirror 查看当前版本 npm -v 查看node安装在哪里 where node 清除缓存 npm cache clean --force 淘宝镜像（只支持下载，不支持上传发布） npm config set registry https://reg…...
安装最小化的CentOS7后，执行yum命令报错Could not resolve host mirrorlist.centos.org； 未知的错误
文章目录 安装最小化的CentOS7后，执行yum命令报错"Could not resolve host: mirrorlist.centos.org; 未知的错误"错误解决方案： 安装最小化的CentOS7后，执行yum命令报错"Could not resolve host: mirrorlist.centos.org; 未知…...
现代 JavaScript 的入门教程
现代 JavaScript 的定义 现代 JavaScript 通常指的是自 ECMAScript 2015（也称为 ES6）以来的一系列语言更新和改进，以及随之而来的开发工具、库和框架的生态系统。这些变化不仅增强了 JavaScript 的功能性和表达能力，还推动了更高…...
linux naive代理设置
naive linux客户端 Release v132.0.6834.79-2 klzgrad/naiveproxy GitHub Client setup Run ./naive with the following config.json to get a SOCKS5 proxy at local port 1080. {"listen": "socks://127.0.0.1:1080","proxy": "htt…...
))
Java数据结构 (链表反转（LinkedList----Leetcode206))
1. 链表的当前结构 每个方框代表一个节点，每个节点包含两个部分： 左侧的数字：节点存储的值，例如 45、34 等。右侧的地址（如 0x90）：表示该节点 next 指针指向的下一个节点的内存地址。 例子中&a…...
游戏与硬件深度协同，打造更精细的体验优化
高画质的游戏往往带来手机的发热和卡顿从而影响游戏体验。开发者希望能够获取到手机运行的实时状态，从而能够进行主动的负载调节，将手机发热时游戏体验影响降到最低；同时手机也可以通过游戏传入的关键场景如"正在下载资源"“团战中…...
)
C++实现设计模式---命令模式 (Command)
命令模式 (Command) 命令模式 是一种行为型设计模式，它将请求封装为一个对象，从而使得可以用不同的请求对客户端进行参数化、对请求排队或记录日志，以及支持可撤销的操作。 意图 将操作的调用者与接收者分离，通过将请求封装为独…...
office 2019 关闭word窗口后卡死未响应
最近关闭word文件总是出现卡死未响应的状态，必须从任务管理器才能杀掉word 进程，然后重新打开word再保存，很是麻烦。（#其他特征，在word中打字会特别变慢，敲击键盘半秒才出现字符。） office官网…...
flutter入门系列教程＜三＞：tabbar的高度自适用，支持无限滚动
背景 在之前的文章中，简介了tabbar组件的使用，它通常用于顶部放置tabbar标签页头，内容全部都是TabbarView的全部内容，且内容通常是占满屏幕的（尽可能大），如下： 但是有时候我们需要…...
前端三件套详解之 HTML
HTML： 师承b站pink老师【黑马程序员pink老师前端入门教程，零基础必看的h5(html5)css3移动端前端视频教程】 HTML概述 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创…...
【pytorch 】miniconda python3.11 环境安装pytorch
ubuntu24.04 miniconda python3.11 环境安装pytorch 组件：langgraph本身不需要有一些模型是需要的：python3.11环境：报错ModuleNotFoundError: No module named ‘torchaudio’ ModuleNotFoundError: No module named ‘torchaudio’File "/root/miniconda3/envs/05_ep_…...
支持大功率输出高速频闪的图像处理用光源控制器
机器视觉系统中的光源控制器在确保图像质量、提高系统稳定性、降低能耗以及方便系统扩展和升级等方面发挥着重要作用。它可提供稳定光源，调节参数，另外具有操作便捷性。 下面我们来看Gardasoft的光源控制器，Gardasoft拥有作为图像处理用LED光…...
使用 Python 和 Tesseract 实现验证码识别
验证码识别是一个常见且实用的技术需求，尤其是在自动化测试和数据采集场景中。通过开源 OCR（Optical Character Recognition，光学字符识别）工具 Tesseract，结合 Python 的强大生态，我们可以高效实现验证码识…...
Opencv学习
Long time no see!哈哈，假期终于有时间做一点自己喜欢的东西了 还是想说，每天花一点时间投在自己喜欢的事情上，或者专攻一些平时不学的方向，真的很酷！ 图片绘制 对于图像绘制，可以分为：图像创…...
数学大模型MAmmoTH：通过混合说明调整建立数学通才模型
向悦和陈文虎是该项目的主要作者。他们这个项目推出 MAmmoTH，这是一系列专为解决一般数学问题而定制的开源大型语言模型 (LLM)。 MAmmoTH 模型在 MathInstruct 上进行训练，MathInstruct 是我们精心策划的指令调整数据集。 MathInstruct 已编译 来自 13 个…...
springboot 配置多数据源以及动态切换数据源
场景 我们springboot项目，通常会有多个数据库，例如mysql,vertica,postgresql等等数据库，通常我们需要动态切换使用我们想要的数据库，这时候就需要配置多数据源了 多数据源特性 支持多数据库类型：例如，同…...
计算机图形学：实验三 光照与阴影
一、程序功能设计 设置了一个3D渲染场景，支持通过键盘和鼠标控制交互，能够动态调整光源位置、物体材质参数等，具有光照、阴影和材质效果的场景渲染。 OpenGL物体渲染和设置 创建3D物体：代码中通过 openGLObject 结构体表示一个…...
idea修改模块名导致程序编译出错
本文简单描述分别用Idea菜单、pom.xml文件管理项目模块module 踩过的坑： 通过idea菜单创建模块，并用idea菜单修改模块名，结构程序编译报错，出错的代码莫名奇妙。双击maven弹窗clean时，还是报错。因为模块是新建的&am…...
Arcgis国产化替代：Bigemap Pro正式发布
在数字化时代，数据如同新时代的石油，蕴含着巨大的价值。从商业决策到科研探索，从城市规划到环境监测，海量数据的高效处理、精准分析与直观可视化，已成为各行业突破发展瓶颈、实现转型升级的关键所在。历经十年精心打磨…...
RNN实现阿尔茨海默症的诊断识别
本文为为🔗365天深度学习训练营内部文章 原作者：K同学啊 一 导入数据 import torch.nn as nn import torch.nn.functional as F import torchvision,torch from sklearn.preprocessing import StandardScaler from torch.utils.data import TensorDatase…...
- Hive和YARN)
大数据学习(36)- Hive和YARN
&&大数据学习&& 🔥系列专栏： 👑哲学语录: 承认自己的无知，乃是开启智慧的大门 💖如果觉得博主的文章还不错的话，请点赞👍收藏⭐️留言📝支持一下博主哦ᾑ…...
【以音频软件FFmpeg为例】通过Python脚本将软件路径添加到Windows系统环境变量中的实现与原理分析
在Windows系统中，你可以通过修改环境变量 PATH 来使得 ffmpeg.exe 可在任意路径下直接使用。要通过Python修改环境变量并立即生效，如图： 你可以使用以下代码： import os import winreg as reg# ffmpeg.exe的路径 ffmpeg_path …...
计算机的错误计算（二百二十一）
摘要 利用一个数学解题器化简计算 实验表明，即使是数学解题器，也是一派胡言。 有一读者来信，询问数学大模型的推理事宜。现就前面的案例继续做一讨论。 例1. 化简计算摘要中算式。 下面是与一个数学解题器的对话。 点评： &am…...
小利特惠源码/生活缴费/电话费/油卡燃气/等充值业务类源码附带承兑系统
全新首发小利特惠/生活缴费/电话费/油卡燃气/等充值业务类源码附带U商承兑系统 安装教程如下 图片：...
外部flash烧写算法学习笔记（一）
一，STM32CubeProgrammer STM32下载编程工具 | STM32CubeProg介绍、下载、安装和使用教程 - 知乎 1.使用速览 2.外部烧写 二，QSPI外部烧写算法制作 STM32H7的花式玩转SPI Flash章节也更新了，含MDK下载算法制作和STM32CubeProg下载算法制作 …...
嵌入式MCU面试笔记2
目录 串口通信 概论 原理 配置 HAL库代码 1. 初始化函数 2. 数据发送和接收函数 3. 中断和DMA函数 4. 中断服务函数 串口通信 概论 我们知道，通信桥接了两个设备之间的交流。一个经典的例子就是使用串口通信交换上位机和单片机之间的数据。 比较常见的串…...
差分轮算法－两个轮子计算速度的方法-阿克曼四轮小车计算方法
四轮驱小车的话： 转向角度计算方法：float turning_angle z_angular / x_linear; // 转向角度，单位为弧度 速度的话直接用线速度 两轮驱动小车： 计算公式： leftSpeed x_linear - z_angular * ORIGINBOT_WHEEL_TRACK /…...
解释器模式
在软件开发的诸多场景中，我们有时需要处理特定领域的语言或表达式。例如，在数据库查询中，我们使用 SQL 语句来查询数据；在数学计算软件里，需要解析和计算各种数学表达式。解释器模式（Interpreter Pattern&a…...
|（链表篇）02.07. 链表相交（疑点）)
代码随想录刷题day14(2)|（链表篇）02.07. 链表相交（疑点）
目录 一、链表理论基础 二、链表相交求解思路 三、相关算法题目 四、疑点 一、链表理论基础 代码随想录 二、链表相交求解思路 链表相交时，是结点的位置，也就是指针相同，不是结点的数值相同； 思路：定义两个指针…...
戴尔电脑用u盘重装系统_戴尔电脑用u盘重装win10系统教程
戴尔电脑用u盘重装系统？戴尔电脑这几年默认预装win10家庭版和win11家庭版。有的用户用上了预装win11家庭版的戴尔电脑，使用一段时间依然不习惯，于是想退回win10。但不知道怎么重装win10，这几年的戴尔电脑建议采用U盘方式安装系统比…...
http的请求体各项解析
一、前言 做Java开发的人员都知道，其实我们很多时候不单单在写Java程序。做的各种各样的系统，不管是PC的 还是移动端的，还是为别的系统提供接口。其实都离不开http协议或者https 这些东西。Java作为编程语言，再做业务开发时&#…...