微信小程序 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')
目录
相关文章
|
小程序
小程序消除图片下边距的三个方法
小程序消除图片下边距的三个方法
507 167
|
人工智能 小程序 前端开发
【一步步开发AI运动小程序】十九、运动识别中如何解析RGBA帧图片?
本文介绍了如何将相机抽取的RGBA帧图像解析为`.jpg`或`.png`格式,适用于体测、赛事等场景。首先讲解了RGBA图像结构,其为一维数组,每四个元素表示一个像素的颜色与透明度值。接着通过`uni.createOffscreenCanvas()`创建离屏画布以减少绘制干扰,并提供代码实现,将RGBA数据逐像素绘制到画布上生成图片。最后说明了为何不直接使用拍照API及图像转换的调用频率建议,强调应先暂存帧数据,运动结束后再进行转换和上传,以优化性能。
|
人工智能 自然语言处理
使用企业微信或公众号自动回复图片消息
AppFlow支持企业微信和公众号接收图片消息,并提供两种回复方式。方式一:直接回复图片消息,用户发送图片后立即收到回复,但无法继续追问。方式二:先保存图片,待用户发送文字后再一并处理并回复。配置步骤包括选择模板、配置鉴权信息、设置执行动作参数及发布连接流。详细操作可参考相关文档。
1530 1
使用企业微信或公众号自动回复图片消息
|
前端开发 小程序 JavaScript
小程序 canvas 生成海报 一次搞掂
小程序 canvas 生成海报 一次搞掂
332 1
|
小程序 数据可视化 数据管理
小程序可视化设计工具-支持一键导出小程序,WebApp及后台管理
小程序可视化设计工具-支持一键导出小程序,WebApp及后台管理
333 3
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
3858 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
移动开发 小程序 数据可视化
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
一招学会DIY官网可视化设计支持导出微擎、UNIAPP、H5、微信小程序源码
365 2
|
前端开发 小程序 JavaScript
微信小程序 canvas 备忘
微信小程序 canvas 备忘
217 0
|
算法 小程序 Java
java制作海报三:获取微信二维码详情,并改变大小,合成到海报(另一张图片)上
这篇文章介绍了如何使用Java获取微信小程序的二维码,并将其调整大小后合成到海报(另一张图片)上。
327 0