昨天朋友圈被「请给我一面国旗@微信官方」刷屏,虽然知道是假的,但是从另一个角度来看,弄清楚如何实现更有趣。
1、canvas
这就不得不提到小程序中的 APIcanvas,H5 中也是有 canvas 的,不过之前也一直没有机会用,这次正好乘机试试水。
晚上回家看了下官方文档,网上搜了一些类似的功能实现,最后写好了一个 demo,基本上是能初步绘制国旗头像了。
当然以后如果想要绘制其他带挂件的头像,只需要更改挂件素材即可,提前预约帮你们定做今年的圣诞帽。
2、代码来了
实现过程主要分为以下几个步骤:
1、新建 canvas 画板
2、绘制头像当做背景(demo目前是自行上传头像制作)
3、绘制国旗边框
4、保存到手机相册(需授权)
废话不多说,直接上代码:
// wxml 页面<view class="container"><!-- 头像绘制区域 --><canvas canvas-id="myAvatar" class="canvas"></canvas><!-- 按钮 --><button class="btn-save" bindtap="upload">上传头像</button><button disabled="{{ !save }}" class="btn-save" bindtap="saveImg">保存到相册</button></view>
// 部分功能 js// 绘制头像背景drawAvatar() {var that = this;var p = that.data;context = wx.createCanvasContext('myAvatar', this);context.drawImage(p.src, 0, 0, 256, 256);context.draw(true)context.save();context.translate(p.hat.x, p.hat.y)context.scale(p.hat.b, p.hat.b)context.rotate(p.hat.rotate * Math.PI / 180)context.drawImage(p.hat.url, 0, 0, p.hat.w, p.hat.h)context.draw(true)this.setData({save: true})},// 保存图片saveImg() {wx.canvasToTempFilePath({canvasId: 'myAvatar',success(res) {wx.saveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {wx.showToast({title: '保存成功'})},fail(res) {wx.showToast({title: '取消保存...',icon: 'none'})}})}})}
3、最后
demo 写完了,以小程序的尿性,怎么会没有坑呢?发现真相的我眼泪差点掉下来,而且这个坑不是一般的坑,弄了老半天都没解决。
具体是啥坑小程序留言区揭晓,感兴趣的欢迎来留言讨论如何解决,到发文为止依旧是个巨坑。
公众号「我是玖柒后」后台回复「头像」即可获取demo源码,填坑不忘挖坑人,我太南了。
推荐文章:
小程序九九八十一坑之跳转传参
如果觉得《教你制作挂件头像 | 小程序七十二变之 canvas 绘制国旗头像》对你有帮助,请点赞、收藏,并留下你的观点哦!