微信小程序之用canvas给微信头像加小红旗(canvas无法使用网络资源绘画)

微信小程序之使用canvas给微信头像加小红旗

情境：新中国成立70周年，普天同庆。昨天看到朋友圈中被刷屏的@官方微信 给自己的头像加小红旗。服务器被卡爆，很多朋友说换头像不成功。
任务：打算自己写一个小程序实现这个换小红旗的功能。
行动：于是去看了一眼给头像加小红旗的入口页面，看了下里面的功能。
结果：自己写了一个小程序并实现了加小红旗的功能，与官方的不完全一致，功能点是差不多的。
实现效果如下：

其实这里面主要就是读取了一下用户登录的信息，头像是从用户信息中取的，然后小图标是在网上找了几个自己比较喜欢的图标放上去的。
首先分析一下整个过程：先读取用户的登录信息，将用户头像渲染出来，然后把自己喜欢的小图标放在右下角，最后使用canvas把用户的头像和小图标画出来再保存到本地相册。
小程序存储用户信息中返回的用户头像是一个链接，在这里面遇到的坑就是canvas无法直接用链接进行绘画，所以需要使用getImageInfo方法把这个链接转换成本地资源才能进行绘画
我的wxml代码如下：

<view class="container">
  <canvas canvas-id="shareImg" style="width:200px;height:200px;position:absolute;left:100%"></canvas>
  <view class="userinfo">
    <button wx:if="{
  {!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="userBtn"> 获取头像 </button>
    <block wx:else>
      <text class="title