微信小程序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 获取绘图上下文 contextconst 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();}
如果觉得《小程序canvas绘制微信头像》对你有帮助，请点赞、收藏，并留下你的观点哦！
