首先确定 userInfo 的 avatar 不是 132,原图是 0;
其次确定你的 destWidth 和 destHeight 不是 width 和 height;
width: 200,
height: 200,
destWidth: 200 * wx.getSystemInfo().pixelRatio,
destHeight: 200 * wx.getSystemInfo().pixelRatio,
canvasId: 'shareImg',
quality: 1,
重点:
getUserInfo 的 avatar 一定要替换了,不然页面上的图也很模糊。
我是采用 wxs 的方式
index.wxs
var filter = {
replaceAvatar: function( str ) {
return str.replace('132','0')
}
}
module.exports = {
replaceAvatar: filter.replaceAvatar
}
index.wxml
<image class="userinfo-avatar" src="{{filter.replaceAvatar(userInfo.avatarUrl)}}" mode="cover"></image>
index.js downloadFile
let that = this;
const ctx = wx.createCanvasContext('shareImg')
let src = that.data.userInfo.avatarUrl.replace('132','0').replace('https://thirdwx.qlogo.cn', 'https://wx.qlogo.cn')
效果扫码: