CN113434243B - 基于Weex页面的截图方法、装置、设备及存储介质 - Google Patents

Abstract

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

Description

基于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组件的实例；其次，通过截屏当前页面并显示为遮蔽图片，用于防止后续截图过程中重新布局页面时给用户以页面抖动感；保存实例的属性值作为现场参数，用于截图完成后还原现场；再次，根据现场参数计算目标截图的显示参数并重新赋值于属性值，触发目标显示组件并调用系统函数对实例进行渲染，从而完成截屏长图。

本方案的有益效果为：针对目前越来越多使用Weex框架构建的APP，解决了Weex页面各种截图需求，包括全屏截图、指定组件显示区域的局部截图，以及长截图的问题；同时，整个方案不需要做图片的拼接，极大的减轻了复杂度；与通过服务端实现截图的方式相比，移动端就可实现，减少了服务器端业务逻辑的复杂度，降低开发难度。

附图说明

为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1是本发明一实施例中基于Weex页面的截图方法的主要流程图；

图2是本发明一实施例中基于Weex页面的截图方法的完整流程图；

图3是本发明一实施例中基于Weex页面的截图装置的示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

本发明提供的基于Weex页面的截图方法，应用在iOS系统的移动终端，如智能手机，平板电脑等，如图1所示，包括如下步骤：

S1：获取Weex页面的截图指令:。

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

S3：调用系统方法将原生组件渲染成目标图片。

其中，Weex页面是指基于Weex框架所构建的Web页面；Weex页面的组件树是指Weex框架下组成所显示的Web页面的UI组件；wx_ref属性是用于索引Weex框架所构建的页面的参数；目标组件是包含wx_ref属性的UI组件；目标图片即为截图的图片。

具体地，iOS原生系统在接收到到Weex页面发出的截图指令后，Weex调用iOS原生的函数，传递一个wx_ref属性作为参数；同时，iOS原生系统通过一层一层遍历整个页面的组件树，找到对应的目标组件，然后调用系统方法对目标组件进行渲染，得到目标图片。

在本实施例中，利用wx_ref属性可被iOS原生代码获取的特点，实现了获取Weex页面全屏的截图和Weex页面指定组件显示区域的局部截图。

在一实施例中，针对包含UIScrollView组件的滚动页面，即针对截长图的问题的，步骤S2包括如下步骤：

S21：将当前页面截屏，并通过添加临时UImageView组件将当前页面截屏渲染成遮蔽图片。

S22：递归遍历Weex页面的组件树，并从组件树中获取与wx_ref属性相同的UIScrollView组件的实例。

S23：保存实例的属性值作为现场参数。

S24：根据现场参数计算目标截图的显示参数，并将显示参数赋值于目标组件。

步骤S3包括：

S31：触发目标显示组件，并调用系统函数对实例进行渲染，得到目标截图。

其中，UImageView组件是iOS系统中用于显示图片的UI组件，UIScrollView组件是iOS系统中用于滚动显示页面的UI组件；现场参数包括偏移量offset、框架区域值oldRect、内容尺寸值Csize；显示参数是显示目标截图时UI组件的长度、高度等参数，并包括视窗的高度self.view.height；目标显示组件是布局、绘制整个页面视图的组件，包括self.view。

具体地，截长图的流程如图2所示，包括：

1）将目前屏幕整体截屏，并用UIImageView组件显示，以用于当后续展开实例的时候，会改变实例的偏移量、高度等等信息，同时会触发整个页面重新布局，会导致用户看到的页面有明显的抖动，因此，需要在开始截图之间先将用户看到的界面保留下来并显示在界面上，以到达一种视觉上的错觉效果；

2）通过递归遍历wx_ref属性找到iOS原生UIScrollView组件的实例sv；

3）保存目前sv现场参数：偏移量offset = sv.contentOffset；框架区域值oldRect = sv.frame；内容尺寸值Csize= sv.contentSize；

4）计算内容尺寸值的高度与框架区域值的高度之间的差值extendHeight：extendHeight = Csize.height - oldRect.size.height；

5）在显示参数中视窗的高度self.view.height之上增加差值extendHeight，即，self.view.height = self.view.height + extendHeight；

6）将实例的偏移量offset 置为空值，即赋值0，以用于完整的截取长图；

7）触发目标显示组件self.view进行重新布局、重新绘制以及子视图重新布局；

8）设定预设时间的延迟时间，如2秒，并待延迟时间达到后调用系统函数对实例进行渲染；

9）调用系统函数对实例进行渲染，从而完成长截图的绘制；

10）还原现场：将步骤3）中所保存的现场参数重新赋值于实例；

11）移除临时UImageView组件。

在本实施例中，针对包含UIScrollView的页面，其高度一般大于屏幕的可见区域，通过在对当前页面截屏临时显示给用户的同时，在后台将UIScrollView组件的内容全部展开，然后生成一张完整的图片进行截取，使截取过程对用户透明，避免了页面抖动。

在一实施例中，如图3所示，提供一种基于Weex页面的截图装置，包括：

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

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

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

其中，若Weex页面包含UIScrollView组件，则递归遍历模块，包括：

递归遍历子模块，用于递归遍历Weex页面的组件树，并从组件树中获取与wx_ref属性相同的UIScrollView组件的实例；

截屏子模块321，用于将当前页面截屏，并通过添加临时UImageView组件将当前页面截屏渲染成遮蔽图片；

保存现场子模块322，用于保存实例的属性值作为现场参数；

调整子模块323，用于根据现场参数计算目标截图的显示参数，并将显示参数赋值于目标组件；

渲染模块33，包括：

渲染子模块331，触发目标显示组件，并调用系统函数对实例进行渲染，得到目标截图。

在本实施例中，基于Weex页面的截图装置的功能与上述基于Weex页面的截图方法一一对应，此处不再赘述。

在一个实施例中，提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例中基于Weex页面的截图方法的步骤，例如图2所示的步骤S1至步骤S3。

在一实施例中，提供一计算机可读存储介质，其上存储有计算机程序，计算机程序被处理器执行时实现上述方法实施例中基于Weex页面的截图方法。

以上所述实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围，均应包含在本发明的保护范围之内。

Claims (8)

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

获取Weex页面的截图指令；

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

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

若所述Weex页面包含UIScrollView组件，则所述递归遍历所述Weex页面的组件树，并从所述组件树中获取与wx_ref属性相同的目标组件，包括：

将当前页面截屏，并通过添加临时UImageView组件将所述当前页面截屏渲染成遮蔽图片；

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

保存所述实例的属性值作为现场参数；

根据所述现场参数计算目标截图的显示参数，并将所述显示参数赋值于所述目标组件；

所述调用系统方法将所述目标组件渲染成目标图片，包括：

触发目标显示组件，并调用系统函数对所述实例进行渲染，得到所述目标截图。

2.如权利要求1所述的基于Weex页面的截图方法，其特征在于，在所述得到所述目标截图之后，所述基于Weex页面的截图方法，还包括：

使用所述现场参数对所述实例的属性值进行重新赋值。

3.如权利要求2所述的基于Weex页面的截图方法，其特征在于，在所述使用所述现场参数对所述实例的属性值进行重新赋值之后，所述基于Weex页面的截图方法，还包括：

移除所述临时UImageView组件。

4.如权利要求1所述的基于Weex页面的截图方法，其特征在于，所述现场参数包括实例的偏移量、实例的框架区域值、实例的内容尺寸值；所述显示参数包括视窗的高度；所述根据所述现场参数计算目标截图的显示参数，包括：

计算所述内容尺寸值的高度与所述框架区域值的高度之间的差值，并在所述显示参数中视窗的高度之上增加所述差值；

将所述实例的偏移量置为空值。

5.如权利要求1所述的基于Weex页面的截图方法，其特征在于，在所述触发目标显示组件之后，并且在所述调用系统函数对所述实例进行渲染之前，所述基于Weex页面的截图方法，还包括：

设定预设时间的延迟时间，并待所述延迟时间达到后调用系统函数对所述实例进行渲染。

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

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

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

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

若所述Weex页面包含UIScrollView组件，则所述递归遍历模块，包括：

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

截屏子模块，用于将当前页面截屏，并通过添加临时UImageView组件将所述当前页面截屏渲染成遮蔽图片；

保存现场子模块，用于保存所述实例的属性值作为现场参数；

调整子模块，用于根据所述现场参数计算目标截图的显示参数，并将所述显示参数赋值于所述目标组件；

所述渲染模块，包括：

渲染子模块，触发目标显示组件，并调用系统函数对所述实例进行渲染，得到所述目标截图。

7.一种计算机设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现如权利要求1至5任一项所述基于Weex页面的截图方法的步骤。

8.一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，其特征在于，所述计算机程序被处理器执行时实现如权利要求1至5任一项所述基于Weex页面的截图方法的步骤。

Images