突然想到做这样一个小程序的原因是受到国庆微信头像生成的影响。本期推文将向大家介绍如何制作一个微信头像生成的小程序。
效果如下:
![40038aa7ea05ee9e540468fbd6d1c7d4.gif](https://i-blog.csdnimg.cn/blog_migrate/342bacd64c22eca5e1b67532456f7a85.gif)
1、我们首先需要有一个小程序账号,这里申请账号就不再过多介绍,大家直接到官网注册即可。
2、思路分析
想要实现这样一个效果,我们只需要用到小程序提供的画布组件即可。玩过PS的人都应该知道图层的概念,其实,头像生成的原理就是图层的叠加,这么说,大家可能还是有点不清楚,所以,下面简单演示一下不用代码,如何制作一个头像。
相信大家都应该清楚了,所谓的头像生成器只不过是用代码的方式实现视频演示的功能罢了。
接下来我们看一下采用代码的方式如何实现。
以下,只对核心代码做讲解。
我们小时候都学过画画,画画之前,首先需要有一支铅笔,一个画图本子,几支彩色笔。我们一起回忆一下绘画的过程。
我们首先会用铅笔在图画本上描绘一下图形的大概轮廓,然后再用彩色笔给图案上色。一幅画就创作完成了。说白了,代码就是把这个过程写一遍而已。以下为核心代码段
// 绘图过程描述
// 创建一个画布
"shareImg">canvas>// 准备一支笔const ctx = wx.createCanvasContext('shareImg')// 定义图片宽高let num = 960 // 开始在画布上绘制微信头像
ctx.drawImage(avatarUrl, 0, 0, num, num) // 参数说明:图片路径 左上角坐标(0,0)宽高960px// 继续在画布上绘制样式图片(叠加)
ctx.drawImage(”imgPath", 0, 0, num, num)
ctx.stroke()
// 输出图像
ctx.draw(false, () => {
// wx.canvasToTempFilePath 把当前画布指定区域的内容导出生成指定大小的图片
wx.canvasToTempFilePath({
x: 0, // 指定的画布区域的左上角横坐标
y: 0, // 指定的画布区域的左上角纵坐标
width: num, // 指定的画布区域的宽度
height: num, // 指定的画布区域的高度
destWidth: num, // 输出的图片的宽度
destHeight: num, // 输出的图片的高度
canvasId: 'shareImg', // 画布标识
quality: 1,
success: function(res) {
// console.log(res);
that.setData({
prurl: res.tempFilePath
})
wx.hideLoading()
},
fail: function(res) {
wx.hideLoading()
}
})
})
流程图
![df3d15b7f3a63ec28d7b8d5e66463a44.png](https://i-blog.csdnimg.cn/blog_migrate/f0015e2acf40f3e9bd1cd72e16764dd1.png)
如果大家看不懂上面的代码也没有关系,只要思路理解了,代码迟早都会写的。我用大白话简单说一下上面的代码说了个啥。
首先我们需要准备好两张图,一张是微信头像,一张是样式图片(可爱的粽子)两张图片的大小一样大,样式图片的背景为透明的,这样微信头像在下面,样式图片在上面,就不会产生覆盖,因为样式图片的背景是透明的。解释到这里,我想大家都应该明白了头像生成的原理啦。我们只需要要设计师做很多很多样式图片给我们,然后和微信头像叠加即可生成各式各样的微信头像啦。
微信头像生成小程序,我已经发布到微信平台上了,大家可以微信搜索"哥们并肩走过"小程序,或者扫一扫下面的小程序码即可进入小程序。样式图片用了创客贴提供的样式创作的,应该还不算丑。哈哈。
其实,大家可以思考一下,既然我们可以做一个微信头像生成小程序,哪能不能创作出一些更好玩的东西呢?比如校徽生成小程序,艺术签名生成小程序等等,剩下的,就有待各位实践啦。只不过,刚好最近端午快要到了,就选了端午头像生成小程序这样一个题材。大家端午节快乐呀!
那么这一期的推文就到这里啦。拜拜
小程序制作过程参考资料如下:
1、Promise用法
https://www.jianshu.com/p/7e60fc1be1b2
2、国庆头像绘制
https://blog.csdn.net/qiushi_1990/article/details/101511585
3、样式图片制作
https://www.chuangkit.com/
6、小程序官方文档
https://developers.weixin.qq.com/miniprogram/dev/framework/
关注哥们并肩走过
与你分享我的
生活趣事/好物推荐/旅行见闻/编程思考