小程序canvas绘制微信头像

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010326875/article/details/89493702

微信小程序canvas是不支持绘制网络图片的，所以逻辑就是先下载到本地，使用本地临时路径去绘制：

   // 查看是否授权
    wx.getSetting({
      success(res) {
        if (res.authSetting['scope.userInfo']) {
          // 已经授权，可以直接调用 getUserInfo 获取头像昵称
          wx.getUserInfo({
            success(resInfo) {
              wx.downloadFile({
                url: resInfo.userInfo.avatarUrl, 
                success(downloadRes) {
                  if (downloadRes.statusCode === 200) {
                    that.setData({
                      userIcon: downloadRes.tempFilePath
                    })
                    that.onDrawResultInfoForIos();
                  }
                }
              })
            }
          })
        } else {
          that.setData({
            userIcon:'../../../images/qr_code.png'
          })
          that.onDrawResultInfoForIos();
        }
      }
    })
  },
  
  
   <canvas style="margin-top:80rpx;width:{{windowWidth/10*9}}px;height:{{windowHeight/10*9}}px;  image-rendering: pixelated" canvas-id="qrResultCanvas" bindlongtap="saveCanvasImage"></canvas>
  
    /**
   * 绘制结果内容，ios平台
   */
  onDrawResultInfoForIos() {
    let that = this;

    let paddingWidth = 20;

    // 使用 wx.createContext 获取绘图上下文 context
    const context = wx.createCanvasContext('qrResultCanvas')

	//绘制圆形头像
    context.save();
    context.beginPath();
    // 圆的圆心的 x 坐标和 y 坐标，25 是半径，后面的两个参数就是起始和结束，这样就能画好一个圆了
    context.arc(paddingWidth + 25, paddingWidth + 25, 25, 0, 2 * Math.PI);
    context.closePath();
    // 下面就裁剪出一个圆形了，且坐标在 （paddingWidth + 25， paddingWidth + 25）
    context.clip();



    context.drawImage(that.data.userIcon, paddingWidth, paddingWidth, 50, 50);


    context.restore();
	
  }