[发明专利]基于Weex页面的截图方法、装置、设备及存储介质

说明书

本发明公开了一种基于Weex页面的截图方法、装置、设备及存储介质，所述基于Weex页面的截图方法包括：获取Weex页面的截图指令；递归遍历所述Weex页面的组件树，并从所述组件树中获取与wx_ref属性相同的目标组件；调用系统方法将所述目标组件渲染成目标图片。本发明的技术方案能够获取Weex页面全屏的截图、Weex页面指定组件显示区域的局部截图，以及Weex页面的长截图。

技术领域

本发明涉及信息处理领域，尤其涉及一种基于Weex页面的截图方法、装置、设备及存储介质。

背景技术

随着App应用承担的功能越来也多、业务日益复杂，且受制于iOS原生开发审核的原因，所以大部分开发者都开始转型使用跨端的动态开发框架，而Weex作为其中一种非常不错的框架，也变得越来越流行。

用户在使用App时，常需要用到分享截图到其他应用的功能，而这些场景要求能够获取界面的局部截图或者长图。但是，因Weex官方并未提供相应的Api和解决方案，使得使用weex编写的页面目前没有很好的解决方案，大多数通过分块截图然后拼接的方式实现，复杂度高；同时，如果图片不在前端生成，而是服务器端生成，则既不能保证生成的图片和前端展示的一样，还亦会使服务器端的业务逻辑变得更加复杂，增加开发难度。

发明内容

本发明实施例提供一种基于Weex页面的截图方法、装置、计算机设备及存储介质，能够获取Weex页面全屏的截图、Weex页面指定组件显示区域的局部截图，以及Weex页面的长截图。

一种基于Weex页面的截图方法，其特征在于，所述基于Weex页面的截图方法包括：

获取Weex页面的截图指令；

递归遍历所述Weex页面的组件树，并从所述组件树中获取与wx_ref属性相同的目标组件；

调用系统方法将所述目标组件渲染成目标图片。

一种基于Weex页面的截图装置，其特征在于，所述基于Weex页面的截图装置包括：

监听模块，用于获取Weex页面的截图指令；

递归遍历模块，用于递归遍历所述Weex页面的组件树，并从所述组件树中获取与wx_ref属性相同的目标组件；

渲染模块，用于调用系统方法将所述目标组件渲染成目标图片。

一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述基于Weex页面的截图方法的步骤。

一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现上述基于Weex页面的截图方法的步骤。

上述基于Weex页面的截图方法、装置、计算机设备及存储介质，其原理为：由于Weex编写的页面的最终UI展示层会通过原生组件渲染，同时在Weex 端可以为weex组件设置wx_ref属性，因此，通过递归遍历的方式，从Weex页面的组件树中获取与wx_ref属性相同的目标组件，并调用iOS系统函数进行渲染，从而实现全屏的截图和指定组件显示区域的局部截图。

此外，针对包含UIScrollView组件的滚动页面，通过把UIScrollView组件的内容全部展开后再生成截图而实现。具体地，首先递归遍历找到与wx_ref属性相同的UIScrollView组件的实例；其次，通过截屏当前页面并显示为遮蔽图片，用于防止后续截图过程中重新布局页面时给用户以页面抖动感；保存实例的属性值作为现场参数，用于截图完成后还原现场；再次，根据现场参数计算目标截图的显示参数并重新赋值于属性值，触发目标显示组件并调用系统函数对实例进行渲染，从而完成截屏长图。