最近在做一个截图功能,发现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,缩小画布0.5倍的像素,为了减少更多体积,我还用compressImage压缩了一遍,经过微调后,分享的图片真就清晰了好多,如果原图100%,这个能达到
85%的清晰,后面尝试继续缩小,那就不行了,开始模糊起来了。
tip:这里虽然分享图片虽然清晰了,但如果需要展示的话,展示图片就模糊了,所以我就又生成了一张图片用于展示,是麻烦了点0.0
3.canvasToTempFilePath生成的图片临时路径
_doc/temp 这样的格式,不像小程序http那种临时路径,我用image组件和previewImage打开都是黑的,我以为是要转成file,发现没啥用,最后想了下以前画布生成图片的情况,那就是画布没画完,然
后赶紧去加了个延迟,完美,图片出来了。
ctx.draw(false, (() => { setTimeout(()=>{ uni.canvasToTempFilePath({ canvasId: 'myCanvas', destWidth: _this.cropW*_this.canvasScale*2, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比2 destHeight: _this.cropH*_this.canvasScale*2, quality:1, fileType:'jpg', success: (res) => { // console.log(res,'success') uni.compressImage({ src: res.tempFilePath, quality: 100, success: res => { const share_img=res.tempFilePath uni.canvasToTempFilePath({ canvasId: 'myCanvas', destWidth: _this.cropW*2, //展示图片尺寸=画布尺寸1*像素比2 destHeight: _this.cropH*2, quality:1, fileType:'jpg', success: (res) => { // console.log(res,'success') uni.hideLoading() const img = res.tempFilePath // _this.show = false _this.$emit('confirm', { share_img, img }) }, }, _this); } }) }, }, _this); },500) })())
感觉还是要记下,不然以后真的忘了。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现