小程序canvas绘制微信头像

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

最后

以上就是暴躁冬日为你收集整理的小程序canvas绘制微信头像的全部内容，希望文章能够帮你解决小程序canvas绘制微信头像所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。