公众号留言小程序「柒留言」已更新至 v2.1.0 版本,欢迎入驻使用!

教程 | 小程序七十二变之 canvas 绘制国旗头像

Share 玖柒 518℃ 0评论

昨天朋友圈被「请给我一面国旗@微信官方」刷屏,虽然知道是假的,但是从另一个角度来看,弄清楚如何实现更有趣。

1、canvas

这就不得不提到小程序中的 API canvas,H5 中也是有 canvas 的,不过之前也一直没有机会用,这次正好乘机试试水。

晚上回家看了下官方文档,网上搜了一些类似的功能实现,最后写好了一个 demo,基本上是能初步绘制国旗头像了。

当然以后如果想要绘制其他带挂件的头像,只需要更改挂件素材即可,提前预约帮你们定做今年的圣诞帽。

2、代码来了

实现过程主要分为以下几个步骤:

1、新建 canvas 画板

2、绘制头像当做背景(demo 目前是自行上传头像制作)

3、绘制国旗边框

4、保存到手机相册(需授权)

废话不多说,直接上代码:

  1. // wxml 页面  
  2. <view class="container">  
  3.   <!-- 头像绘制区域 -->  
  4.   <canvas canvas-id="myAvatar" class="canvas"></canvas>  
  5.   
  6.   <!-- 按钮 -->  
  7.   <button class="btn-save" bindtap="upload">上传头像</button>  
  8.   <button disabled="{{ !save }}" class="btn-save" bindtap="saveImg">保存到相册</button>  
  9. </view>  
  1. // 部分功能 js  
  2. // 绘制头像背景  
  3. drawAvatar() {  
  4.   var that = this;  
  5.   var p = that.data;  
  6.   context = wx.createCanvasContext('myAvatar', this);  
  7.   context.drawImage(p.src, 0, 0, 256, 256);  
  8.   context.draw(true)  
  9.   context.save();  
  10.   context.translate(p.hat.x, p.hat.y)  
  11.   context.scale(p.hat.b, p.hat.b)  
  12.   context.rotate(p.hat.rotate * Math.PI / 180)  
  13.   context.drawImage(p.hat.url, 0, 0, p.hat.w, p.hat.h)  
  14.   context.draw(true)  
  15.   this.setData({  
  16.     save: true  
  17.   })  
  18. },  
  19.   
  20. // 保存图片  
  21. saveImg() {  
  22.   wx.canvasToTempFilePath({  
  23.     canvasId: 'myAvatar',  
  24.     success(res) {  
  25.       wx.saveImageToPhotosAlbum({  
  26.         filePath: res.tempFilePath,  
  27.         success(res) {  
  28.           wx.showToast({  
  29.             title: '保存成功'  
  30.           })  
  31.         },  
  32.         fail(res) {  
  33.           wx.showToast({  
  34.             title: '取消保存...',  
  35.             icon: 'none'  
  36.           })  
  37.         }  
  38.       })  
  39.     }  
  40.   })  
  41. }  

3、最后

demo 写完了,以小程序的尿性,怎么会没有坑呢?发现真相的我眼泪差点掉下来,而且这个坑不是一般的坑,弄了老半天都没解决。

具体是啥坑小程序留言区揭晓,感兴趣的欢迎来留言讨论如何解决,到发文为止依旧是个巨坑。

公众号「我是玖柒后」后台回复「头像」即可获取 demo 源码,填坑不忘挖坑人,我太南了。

微信识别二维码,在线体验!

转载请注明:我是玖柒后 » 教程 | 小程序七十二变之 canvas 绘制国旗头像

喜欢 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址