【记录】uniapp 小程序 canvas 在 ios 上超出一定距离绘制失败

【记录】uniapp 小程序 canvas 在 ios 上超出一定距离绘制失败

业务要求做一个小程序详情页的保存图片功能。计划使用截图功能实现,发现截图功能只支持APP和H5,原生 canvas 绘制代码量太大,最后使用 painter 这个插件完成.

painter 绘制起来比 canvas 绘制方便了不少,使用 Json 格式传入数据和样式到组件即可绘制,且支持用 rpx 计算。绘制成功后在开发者工具和安卓机上显示正常,但后继发现在过长情况下会出现页面变为空白的问题,参考文档:

  1. 【报Bug】uni canvas 在IOS系统下 ,高度超过1000px 不显示绘制内容 - DCloud问答
  2. iOS canvas 尺寸过大导致绘制失败 | 微信开放社区 (qq.com)
  3. canvas高度超过4096真机IOS就直接报错不显示,怎么解决? | 微信开放社区 (qq.com)

但实际上并没有很好的解决方案,在已知固定高度的情况下,可以通过缩放比例来提高可绘制高度,使用这个方法可能导致画面失真,且无法解决动态绘制的图片仍有超过高度(4096px)的问题。所以在使用 canvas 绘制时尤其需要注意高度的问题,及时反映调整需求。

希望小程序尽快出个保存页面截图的功能,canvas 手绘还是太麻烦了。

  • 10
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值