uni保存canvas图片_uni-app canvas生成图片的一些问题

本文记录了在uni-app中使用canvas生成图片时遇到的挑战,包括draw函数回调不执行的问题,以及canvasToTempFilePath生成模糊图片的解决方案。通过调整canvas尺寸和使用压缩方法,成功实现了清晰的分享图片。同时,由于canvasToTempFilePath生成的临时路径问题,添加延迟解决了图片显示不出来的问题。
摘要由CSDN通过智能技术生成

最近在做一个截图功能,发现uni-app分享自定义图片还是有点问题

APP端的分享和微信小程序分享还是有点不同的,这里APP测试用的是安卓手机

下面列举下我遇到的问题

1.draw函数的回调不执行

一般都是ctx.draw(false,()=>{})的方式执行,但是打印半天都不进入,发现是回调函数的问题,查了一会,最终还是在微信社区找到了解决方案,那就是强制执行函数

ctx.draw(false,(()=>{})())

2.canvasToTempFilePath生成的图片很模糊

这在微信小程序也是存在的,方案大都是W450-H200变成W900-H400的放大画布像素,而我在uni-app试了一点变化都木有还是模糊,还去小程序测了个demo,发现小程序没问题,调大了也变清晰了

就很纳闷,然后疯狂找了半天,uniapp社区方案还是太少了,然后又去微信社区,发现有人跟我碰到一样的问题,作者下面回了句“我的是图片太大的原因”,刚开始感觉应该不是,后面还是试了一下,

真的是图片大的原因。

然后我就将画布W450-H200变成W225-H100的缩小画布像素,输出宽度为原来截取框的宽度(默认像素比2,相当于截取框=W225*像素比),为了减少更多体积,我还用compressImage压缩了一遍,

经过微调后,分享的图片真就清晰了好多,如果原图100%,我这个就能达到85%的清晰,后面尝试继续缩小,那就不行了,开始模糊起来了。

tip:这里虽然分享

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值