1. 持久化步骤
因为通过微信头像昵称填写功能获取到头像是一个临时头像，这个url只能一段时间内在微信访问，并且无法在公网访问这个url。所以非常有必要把这个url转成我么实际可用的头像到数据库中。让头像持久化的在微信和公网任何位置都能访问。
这里我们使用url转base64字符串的方式，持久化图片成base64字符串。如果是自己上传图片还需要考虑图片大小和压缩图片的问题，这里我们直接采用微信的头像上传接口，直接帮我们快捷压缩和裁剪图片，灰常的好用。话不多说，来看代码
2. 页面效果
3. 代码实现
1. uniapp小程序
安装image-tools
npm i image-tools --save2. 原生小程序
新建一个util工具类js。加上一个function
const imgUrlToBase64 = (url) => { return new Promise((resolve, reject) => { if (!url) { reject('请传入url内容'); } if (/\.(png|jpe?g|gif|svg)(\?.*)?$/.test(url)) { // 图片地址 const image = new Image(); // 设置跨域问题 image.setAttribute('crossOrigin', 'anonymous'); // 图片地址 image.src = url; image.onload = () => { const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); canvas.width = image.width; canvas.height = image.height; ctx.drawImage(image, 0, 0, image.width, image.height); // 获取图片后缀 const ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase(); // 转base64 const dataUrl = canvas.toDataURL(`image/${ext}`); resolve(dataUrl || ''); } } else { // 非图片地址 reject('非(png/jpe?g/gif/svg等)图片地址'); } });};2. 页面使用
1. 完善用户信息（昵称头像）弹窗
![]()
{{bname}} 邀请您补全个人信息
（昵称、头像） 拒绝 允许 2. js部分
3. css部分
.auth-card{ text-align: center; .avatar-img{ width: 150rpx; height: 150rpx; overflow: hidden; border-radius: 100%; margin-top: 30rpx; } .title{ font-size: 20rpx; } .content{ margin-top: 10rpx; }}.avatar-wrapper{ width: 150rpx; height: 100rpx; color: #333 !important; text-align: center !important; border: none !important; border-radius:0 !important; background-color:transparent !important;}.avatar-wrapper::after {border: none !important;}.auth-btncard{ .btn-unok{ width: 50%; float: left; } .btn-ok{ width: 50%; float: left; margin: 0; padding: 0; border: 0px solid transparent; //自定义边框 outline: none; //消除默认点击蓝色边框效果 u-button{ margin: 0; padding: 0; border: 0px solid transparent; //自定义边框 outline: none; //消除默认点击蓝色边框效果 } }}来源地址：https://blog.csdn.net/qq_35921773/article/details/129106797
