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

偏执的太偏执、 2023-06-01 05:54 5阅读 0赞

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

**1、canvas**

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

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

![1062070-20190925201042452-30965094.png][]

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

**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 源码**，填坑不忘挖坑人，我太南了。

![1062070-20190925201742109-1674933522.png][]

**推荐文章：**

[小程序九九八十一坑之跳转传参][Link 1]

转载于:https://www.cnblogs.com/msunh/p/11587120.html

[1062070-20190925201042452-30965094.png]: /images/20230601/55b368550ec045b78b58444e4d9db49f.png
[1062070-20190925201742109-1674933522.png]: /images/20230601/d22aeef6b6ab49ef837b14b6e9acdc78.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzUyNjk2NDE0MQ==&mid=2247484278&idx=1&sn=277bfc7099034ee160987ada3aa3f4c1&chksm=fa0787b4cd700ea219235424006e132cb34ef4542272840b05a936322044e1e861b203a05389&scene=21#wechat_redirect