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

简介: 首先确定 userInfo 的 avatar 不是 132,原图是 0;其次确定你的 destWidth 和 destHeight 不是 width 和 height;

首先确定 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')
目录
相关文章
|
29天前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
45 0
|
4月前
|
前端开发 小程序
微信小程序canvas画布绘制base64图片并保存图片到相册中
微信小程序canvas画布绘制base64图片并保存图片到相册中
|
6天前
|
小程序 开发者
体验版小程序为何无法访问云端服务器后端接口(请求失败...(已完美解决附加图片))?
体验版小程序为何无法访问云端服务器后端接口(请求失败...(已完美解决附加图片))?
12 0
|
4月前
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
【微信公众平台对接】有关【上传图文消息内的图片获取URL】调用示例
63 0
|
4月前
|
前端开发 小程序
微信小程序绘制canvas时在不同 设备上的大小不同的问题
微信小程序绘制canvas时在不同 设备上的大小不同的问题
99 0
|
2月前
|
开发框架 JavaScript 小程序
uniapp、vue、小程序、js图片转base64 示例代码
uniapp、vue、小程序、js图片转base64 示例代码
|
2月前
|
文字识别 小程序 开发工具
mPaaS小程序问题之调用选图片的时候报错如何解决
mPaaS小程序是阿里巴巴移动平台服务(mPaaS)推出的一种轻量级应用解决方案,旨在帮助开发者快速构建跨平台的小程序应用;本合集将聚焦mPaaS小程序的开发流程、技术架构和最佳实践,以及如何解决开发中遇到的问题,从而助力开发者高效打造和维护小程序应用。
38 0
|
3月前
|
小程序 API
微信小程序如何利用createIntersectionObserver实现图片懒加载
微信小程序如何利用createIntersectionObserver实现图片懒加载
|
4月前
|
前端开发 小程序
微信小程序canvas画布绘制;canvas画布图片保存
微信小程序canvas画布绘制;canvas画布图片保存
38 0
|
4月前
|
存储 小程序 JavaScript
微信小程序替换双重循环渲染中报错图片
微信小程序替换双重循环渲染中报错图片
118 0

热门文章

最新文章