微信小程序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(); }
