微信小程序 Canvas导出图片模糊?(已解决)

首先确定 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')

效果扫码:
微信小程序 Canvas导出图片模糊?(已解决)_第1张图片

你可能感兴趣的:(前端)