手把手带你实现虎年头像框制作小程序（实践）

手把手带你实现虎年头像框制作小程序（实践）

虎年春节快来了，如何给图片添加上虎年头像框，下面本篇文章带大家制作一个小程序来实现这个功能，希望对大家有所帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

又到了一年的结尾，感觉时间过的逝贼鸡儿快，一晃一年就没了，一晃一年又没了。

记得去年由于疫情的原因没有回家过年，年三十的晚上就在家族微信群里面发那种通过玩游戏获得红包的小程序，也是很欢乐的。

虽然我自己没开发过小游戏，但是小程序还是写过一些，这不最近看到很多朋友都换上了新年头像。就像下面这种的：

看了下主要就是两部分：图片 + 相框 叠加保存为一张图片，那我也可以去实现一个。

于是就有了这篇文章，自制虎年头像框小程序。

实现

话不多说，先上效果图。

1、实现原理

通过效果图可以看到，在这个地方用到了两张图片：

一张是通过“获取头像”按钮获取的微信用户的头像，用作底图；

另外一张是相框图片，这是预制的静态资源；

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

2、收集静态资源

在我这个小程序中内置了一些静态资源，比如：头像框图片、首页背景图片、底部导航栏图标等。

这些图片来源于下面这几个网站，仅供参考。

阿里巴巴矢量图标库https://iconfont-/

获取图标的好去处。

千图网https://58pic.com/

获取背景图片、头像框等的好去处。

3、编码

分为三个部分介绍编码这个阶段。

3.1 获取微信用户头像

微信小程序提供有api获取微信用户信息。 wx.getUserProfile(Object object)

获取头像-

getUserProfile实现如下：

到这里获取微信用户头像已经完成。

备注： 通过res.userInfo默认返回来的用户头像是低分辨率的，要获取用户头像高清图需要进行处理。

3.2 绘制图像

绘制图主要用到了微信小程序提供画布相关API（https://developers.weixin.qq.com/miniprogram/dev/api/canvas/wx.createOffscreenCanvas.html）

变量说明：

hotArr:[{name:'虎年相框',key:'hunian'},{name:'虎头帽子',key:'shendan'},{name:'国旗',key:'guoqing'}],

curHot：用于存放当前选择的hotArr的索引。

windowWidth: wx.getSystemInfoSync().windowWidth

size: 260; //自定义的大小

pc : wx.createCanvasContext('myCanvas');

drawImg(){ wx.showLoading({ title: '生成头像中...', }) let that = this; let type = this.data.hotArr[this.data.curHot].key; let promise1 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: that.data.userInfo.avatarUrl, success: function(res) { resolve(res); } }) }); var index = that.data.defaultImg; let promise2 = new Promise(function(resolve, reject) { wx.getImageInfo({ src: `../../images/${type}/hat${index}.png`, success: function(res) { resolve(res); } }) }); Promise.all([ promise1, promise2 ]).then(res => { //主要就是计算好各个图文的位置 pc.clearRect(0, 0, windowWidth, size); //绘制背景图 pc.drawImage(res[0].path, windowWidth/2-130, 0, size, size) //绘制相框图 pc.drawImage('../../' + res[1].path, windowWidth/2-130, 0, size, size) pc.stroke() pc.draw(false, () => { //图片绘制成功回调,调用保存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）

到这里也就实现了基本的头像框功能。

最后

感兴趣的小伙伴可以扫码体验：

当然了，基于上面的内容你也可以制作自己的头像小程序。

最后 提前恭祝大家春节快乐，虎年大吉！！！

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。