一步一步实现创建虎年头像框架的小程序（实践）（Creating an avatar with a Tiger Head）

虎年春节即将开始。 如何在您的照片中添加虎年头像框。 在下一篇文章中，我将向您展示如何创建一个小程序来实现此功能。 我希望这会有所帮助！

又一年结束了。 我感觉时间过得很快。 一年转眼就过去了，又一年又转眼过去了。

我记得去年因为疫情没有回家过年。 除夕夜，我在家里的微信群里发布了一个小程序，玩游戏领红包。 这也让我非常高兴。

我自己没有开发过什么小游戏，但是写过一些小程序。 最近，看到很多朋友换了新年头像。 它看起来像这样：

看这个主要有两部分：照片+相框。 您还可以将其叠加并保存为单个图像来实现。

本文是自制的虎年头像框小程序。

实现

让我们从渲染开始。

1.实现原理

从效果图中可以看到，这里使用了两张图片：

1.通过获取头像按钮获取微信用户头像，使用方法如下： 底图；

另一个是预制的静态资源，相框图片。

点击“保存头像”即可绘制上面的两张图片。 您通过画布在绘图板上绘制，先绘制基础图片，然后再绘制。 绘制相框时，只需在绘制完成后将图像保存在画板本地即可。

下面介绍具体的实现步骤。

2.收集静态资源

我的小程序包括一张头像框图片、一张首页背景图、一张首页图片。底部导航栏包括一些静态资源，例如图标。

这些图片来自以下网站，仅供参考。

阿里巴巴矢量图标库 https://www.iconfont.cn/

获取图标的好地方。

获取背景图像、头像框架等的好地方。

3.编码

编码阶段分为三个部分。

3.1 微信用户头像检索

微信小程序提供了检索微信用户信息的API。 wx.getUserProfile(Object object)

点击按钮按钮，获取微信用户信息。

获取头像 // 我们推荐使用wx.getUserProfile来获取用户信息。 开发人员可以在需要用户确认时使用此接口来检索用户的个人信息。 getUserProfile(e) { let that = this; // 获取高分辨率用户头像 let url = res.userinfo.avatarurl; while (! Isnan (PAR seInt(url.substring(url.length - 1) , url.length)))) { url = url.substring(0, ur l.length - 1) . res.userInfo.avatarUrl = URL; that.setData({ userInfo: res.use rInfo,                                   r信息,            结束。

3.2 图像绘制

对于图像绘制，微信小程序（https://developers.weixin.qq.com/miniprogram/dev/api/）主要提供了使用canvas相关蜜蜂。 Canvas/wx.createOffscreenCanvas.html)

p >

hotArr:[{name:'虎年相框',key:'hunian'},{name:'虎头帽',key:'shendan '},{name:'Flag',key:'国庆'}],

curHot：用于存储当前选中的hotArr的索引。

windowWidth: wx.getSystemInfoSync().windowWidth

Size: 260; // 自定义大小

pc: wx.createCanvasContext('myCanvas') ;

drawImg(){ wx.showLoading({ title: '正在生成头像...', }) let that = this; this.data.hotArr[this.data.curHot].key; letpromise1 = new Promise(fun ction(resolve, detector) { wx.getImageInfo({ src: that.data.userInfo.avatarUrl, success : Function (res) { resplve (res);}})}); var index = that.data.defaultImg; Promise2 = new Promise(function(resolve,spect) { wx.getImageInfo({ src: `../../images/${type}/hat${index}.png`, success: function(res) {解决(res); } }) }); Promise.all([ Promise1, Promise2 ]).then(res => { //主要是计算每个图像和文字的位置 pc.clearRect(0, 0, windowWi dth, size); //背景图像 pc.drawImage(res[0].path, windowWidth/2 - 130, 0, size , size) //绘制相框 pc.drawImage('../../' + res[1].path, windowWidth/2-130, 0, size, size) pc.blood() pc.draw(false, () => { //图像绘制成功回调，调用save Save Canvas方法 this .canvasToTempFile(); }) }) },

wx.getImageInfo() 主要用于获取图片信息并返回图片的本地路径。

这是主要原因。 drawImage() 仅支持绘制本地图像。

3.3 保存图像

在上一步中，您在画布上创建了两幅画。 接下来，将画布上的内容保存到本地。

将画布上的内容保存到本地相册也是一个两步过程。

第一步：导出当前画布指定区域的内容，生成指定大小的图像。

使用wx.canvasToTempFilePath()

第二步：将图片保存到本地相册。

使用wx.saveImageToPhotosAlbum(https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.saveImageToPhotosAlbum.html)

CanvasToTempFile(){ wx .可以 vasToTempFilePath({ x: windowWidth/2-130, //这里减去130 图片大小设置为260 y: 0, height: size, width: size, CanvasId: 'myCanvas', success: (res) => { wx.saveImageToPhotosAlbum({ filePath : res.tempFilePath, success : 结果 => { wx .hideLoading(); wx.showModal({ 内容: '照片已保存到相册，请去微信设置！', showCancel: false, success: function(res) { if(res.confirm) { console.log('用户点击确定'); wx.hideLoading(); console.log("err:" + e); },

基本头像框架功能现已实施。

最后

感兴趣的朋友可以扫码体验一下。

当然，您也可以根据上面的内容创建自己的头像小程序。

最后祝大家新春快乐、虎年吉祥。 ！ ！

【相关学习推荐：小程序开发教程】

PHP快速学习视频免费教程（入门到精通）

学习PHP如何入门PHP应该去哪里学习？如何快速学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

这几篇文章你可能也喜欢：

• 下面我们就来看看如何打造一款过年的“智能春联”小程序。 （小说春节情侣）
• 下面我们就来说说小程序日志系统，看看如何搭建和使用。
• 说说H5页面跳转小程序的一些实现方案（常见陷阱）（H5跳转小程序规范页面）
• 小程序双线程模型详解（小程序多线程）
• 如何查看微信关联的小程序（如何查看微信绑定的小程序记录）

本文由主机参考刊发，转载请注明：一步一步实现创建虎年头像框架的小程序（实践）（Creating an avatar with a Tiger Head） https://zhujicankao.com/142029.html