【记录】uniapp 小程序 canvas 在 ios 上超出一定距离绘制失败
业务要求做一个小程序详情页的保存图片功能。计划使用截图功能实现,发现截图功能只支持APP和H5,原生 canvas 绘制代码量太大,最后使用 painter 这个插件完成.
painter
绘制起来比 canvas
绘制方便了不少,使用 Json
格式传入数据和样式到组件即可绘制,且支持用 rpx
计算。绘制成功后在开发者工具和安卓机上显示正常,但后继发现在过长情况下会出现页面变为空白的问题,参考文档:
- 【报Bug】uni canvas 在IOS系统下 ,高度超过1000px 不显示绘制内容 - DCloud问答
- iOS canvas 尺寸过大导致绘制失败 | 微信开放社区 (qq.com)
- canvas高度超过4096真机IOS就直接报错不显示,怎么解决? | 微信开放社区 (qq.com)
但实际上并没有很好的解决方案,在已知固定高度的情况下,可以通过缩放比例来提高可绘制高度,使用这个方法可能导致画面失真,且无法解决动态绘制的图片仍有超过高度(4096px)的问题。所以在使用 canvas
绘制时尤其需要注意高度的问题,及时反映调整需求。
希望小程序尽快出个保存页面截图的功能,canvas
手绘还是太麻烦了。