一种长截屏方法、装置、存储介质和终端设备与流程

本发明涉及计算机技术领域，尤其涉及一种长截屏方法、装置、存储介质和终端设备。

背景技术：

长截屏即滚动截屏，可以截取超出屏幕范围的内容。在现有技术中，用户在使用长截屏工具对app的窗口进行截屏时，若该窗口中包含滚动条，则长截屏工具调用该app提供的接口来控制滚动条滚动，以在窗口中显示完整界面各个不同部分的内容，并在每次控制滚动条滚动之后对窗口中显示的部分内容进行截屏，最后将多次截屏获得的图像进行拼接，即可以获得该窗口的完整界面的长截屏图像。然而，上述长截屏的方法只适用于原生开发的app，对于混合开发(原生+html5)的app来说，目前尚无一种有效的长截屏方式。

技术实现要素：

有鉴于此，本发明实施例提供了一种长截屏方法、装置、存储介质和终端设备，能够基于混合开发的app实现长截屏。

本发明实施例的第一方面，提供了一种长截屏方法，包括：

当基于混合开发的目标app运行时，若检测到输入的长截屏指令，则获取所述目标app当前展示的html5页面，所述html5页面的大小超出终端设备的屏幕范围；

确定所述html5页面包含的各个区域；

使用画布组件分别截取每个所述区域的图像数据，所述图像数据为base64格式；

将所述图像数据还原为所述各个区域的截图；

按照预设的规则将所述各个区域的截图拼接起来，得到所述目标app的长截屏图像。

本发明实施例的第二方面，提供了一种长截屏装置，包括：

指令检测模块，用于当基于混合开发的目标app运行时，若检测到输入的长截屏指令，则获取所述目标app当前展示的html5页面，所述html5页面的大小超出终端设备的屏幕范围；

区域确定模块，用于确定所述html5页面包含的各个区域；

图像截取模块，用于使用画布组件分别截取每个所述区域的图像数据，所述图像数据为base64格式；

截图还原模块，用于将所述图像数据还原为所述各个区域的截图；

截图拼接模块，用于按照预设的规则将所述各个区域的截图拼接起来，得到所述目标app的长截屏图像。

本发明实施例的第三方面，提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如本发明实施例的第一方面提出的长截屏方法的步骤。

本发明实施例的第四方面，提供了一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，所述处理器执行所述计算机可读指令时实现如本发明实施例的第一方面提出的长截屏方法的步骤。

本发明提出的长截屏方法应用于混合开发的目标app，当目标app运行时，若检测到输入的长截屏指令，则获取所述目标app当前展示的html5页面，并确定所述html5页面包含的各个区域；使用画布组件分别截取每个所述区域的图像数据；将所述图像数据还原为所述各个区域的截图；按照预设的规则将所述各个区域的截图拼接起来，得到所述目标app的长截屏图像。上述过程使用画布组件截取html5页面各个区域的图像数据，然后对图像数据进行还原、拼接，得到长截屏图像，成功填补了混合开发类型app无法实现长截屏的空白。

附图说明

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

图1是本发明实施例提供的一种长截屏方法的第一个实施例的流程图；

图2是本发明实施例提供的一种长截屏方法的第二个实施例的流程图；

图3是本发明实施例提供的一种长截屏装置的一个实施例的结构图；

图4是本发明实施例提供的一种终端设备的示意图。

具体实施方式

本发明实施例提供了一种长截屏方法、装置、存储介质和终端设备，能够基于混合开发的app实现长截屏。

为使得本发明的发明目的、特征、优点能够更加的明显和易懂，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，下面所描述的实施例仅仅是本发明一部分实施例，而非全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其它实施例，都属于本发明保护的范围。

请参阅图1，本发明实施例中一种长截屏方法的第一个实施例包括：

101、当基于混合开发的目标app运行时，若检测到输入的长截屏指令，则获取所述目标app当前展示的html5页面；

目标app是一个混合开发的app，即hybridapp。用户在使用目标app时，若想执行长截屏的操作，可以通过各种方式输入长截屏指令，比如点击屏幕显示界面中设置的用于触发长截屏指令的图标，或者按压用于触发长截屏指令的物理按键组合等。终端系统在检测到用户输入的长截屏指令之后，会获取所述目标app当前展示的html5页面的相关信息，所述html5页面的大小超出终端设备的屏幕范围，即需要长截屏操作才可以完整地截取该html5页面的图像。

102、确定所述html5页面包含的各个区域；

在获得所述目标app当前展示的html5页面之后，确定该html5页面包含的各个区域，具体可以确定页面包含的区域数量、各个区域的名称、大小、形状和位置等信息。

103、使用画布组件分别截取每个所述区域的图像数据，所述图像数据为base64格式；

然后，使用画布组件分别截取每个所述区域的图像数据，得到的图像数据是base64格式。比如，可以使用html5的canvas组件截取图像数据。在html5中，对于图像数据来说，父元素、子元素不管是否超出当前屏幕范围，其最外层都是包裹着一个终极的父元素，该终极的父元素指示出一块区域的起始位置和结束位置。故在使用canvas组件截取图像时，即便一块区域的大小超出屏幕范围，仍然可以通过该区域图像数据对应的终极的父元素来确定该区域的起始位置和结束位置，从而可以获取该超出屏幕范围的区域完整的图像数据。

104、将所述图像数据还原为所述各个区域的截图；

在截取到每个所述区域的图像数据之后，需要将base64格式的图像数据还原为各个区域的截图。具体的，可以将这些图像数据存储到数组中，然后采用交互通知的方式将该数组从目标app的html5开发端发送至原生开发端，在原生开发端执行图像数据还原为截图的操作，具体可以采用现有的base64转图片算法或工具，将base64格式的图像数据还原为图片格式的截图。

105、按照预设的规则将所述各个区域的截图拼接起来，得到所述目标app的长截屏图像。

最后，按照预设的规则将所述各个区域的截图拼接起来，得到所述目标app的长截屏图像。在拼接截图的时候，具体可以按照各个区域的原有位置拼接，比如在该html5页面中，由上往下依次为区域a、区域b和区域c，则在拼接时，由上往下依次拼接区域a、区域b和区域c的截图。

本发明实施例提出的长截屏方法应用于混合开发的目标app，当目标app运行时，若检测到输入的长截屏指令，则获取所述目标app当前展示的html5页面，并确定所述html5页面包含的各个区域；使用画布组件分别截取每个所述区域的图像数据；将所述图像数据还原为所述各个区域的截图；按照预设的规则将所述各个区域的截图拼接起来，得到所述目标app的长截屏图像。上述过程使用画布组件截取html5页面各个区域的图像数据，然后对图像数据进行还原、拼接，得到长截屏图像，成功填补了混合开发类型app无法实现长截屏的空白。

请参阅图2，本发明实施例中一种长截屏方法的第二个实施例包括：

201、当基于混合开发的目标app运行时，若检测到输入的长截屏指令，则获取所述目标app当前展示的html5页面；

202、确定所述html5页面包含的各个区域；

在本发明实施例中，所述html5页面的大小超出终端设备的屏幕范围，所述html5页面包含的各个区域包括头部导航区域、主体内容区域和底部导航区域。头部导航区域是位于该html5页面顶部的导航区，用户可在该导航区输入搜索的关键词，查找相关的内容。主体内容区域是位于该html5页面中部的展示区，用于展示页面的主体内容。底部导航区域是位于该html5页面底部的导航区，用于链接不同的站点或页面。

203、使用画布组件分别截取每个所述区域的图像数据，所述图像数据为base64格式；

204、将所述图像数据还原为所述各个区域的截图；

步骤201-204与步骤101-104相同，具体可参照步骤101-104的相关说明。

205、将所述头部导航区域的截图的下端和所述主体内容区域的截图的上端拼接；

206、将所述主体内容区域的截图的下端和所述底部导航区域的截图的上端拼接，得到所述目标app的长截屏图像。

在本发明实施例中，所述各个区域的截图总共包含头部导航区域的截图、主体内容区域的截图和底部导航区域的截图。在拼接时，遵循各个区域在html5页面中的布局，即将所述头部导航区域的截图的下端和所述主体内容区域的截图的上端拼接，将所述主体内容区域的截图的下端和所述底部导航区域的截图的上端拼接，从而得到一幅长截屏图像。

进一步的，在步骤205之前，还可以包括：

(1)确定所述主体内容区域的截图的尺寸；

(2)若所述截图的尺寸超过预设阈值，则按照水平方向上的尺寸不变，竖直方向上的尺寸按预设比例缩小的方式调整所述截图的尺寸，直至所述截图的尺寸小于所述阈值。

在某些情况下，所述主体内容区域包含的内容较多，导致获得的主体内容区域的截图在竖直方向上的尺寸过大，不利于用户查看拼接后的截屏图像。因此，在拼接截图之前可以先对主体内容区域的截图的尺寸进行相应的处理，即若所述截图的尺寸超过预设阈值，则按照水平方向上的尺寸不变，竖直方向上的尺寸按预设比例缩小的方式调整所述截图的尺寸，直至所述截图的尺寸小于所述阈值。

进一步的，在步骤205之前，还可以包括：

(1)确定所述主体内容区域的截图的尺寸；

(2)若所述尺寸超过预设阈值，则将所述主体内容区域的截图按照由上至下的方向平均划分为n个子截图，n为大于1的整数；

(3)将所述n个子截图在水平方向上的尺寸缩小至原尺寸的1/n。

对于主体内容区域的截图在竖直方向上的尺寸过大的问题，还可以采用将主体内容区域的截图按照由上至下的方向平均划分为n个子截图的方式，每个子截图在水平方向上的尺寸缩小至原尺寸的1/n。然后，在拼接截图时，将所述头部导航区域的截图的下端和缩小尺寸后的所述n个子截图的上端拼接，将缩小尺寸后的所述n个子截图的下端和所述底部导航区域的截图的上端拼接，拼接时所述n个子截图按照划分的顺序由左至右依次排列。比如，主体内容区域由上至下平均划分为子截图1、子截图2和子截图3，则将每个子截图在水平方向上的尺寸缩小至原尺寸的1/3，子截图1在拼接时排列到最左端，子截图2在拼接时排列到中间，子截图3在拼接时排列到最右端。

进一步的，所述长截屏方法还可以包括：

(1)确定所述主体内容区域的截图的尺寸；

(2)若所述尺寸超过预设阈值，则创建界面尺寸未超过所述阈值的内容展示控件；

(3)将所述头部导航区域的截图的下端和所述内容展示控件的界面上端拼接；

(4)将所述内容展示控件的界面下端和所述底部导航区域的截图的上端拼接；

(5)在所述内容展示控件中滚动展示所述主体内容区域的截图。

另外，在得到各个区域的截图之后，还可以通过构建显示控件的方式，展示尺寸较大的主体内容区域的截图。具体的，可以创建一个界面尺寸适中的内容展示控件，然后用该内容展示控件的界面分别和头部导航区域的截图的下端以及底部导航区域的截图的上端拼接，最后在所述内容展示控件中滚动展示所述主体内容区域的截图。

本发明实施例提出的长截屏方法应用于混合开发的目标app，当目标app运行时，若检测到输入的长截屏指令，则获取所述目标app当前展示的html5页面，并确定所述html5页面包含的各个区域，包括头部导航区域、主体内容区域和底部导航区域3个区域；使用画布组件分别截取每个所述区域的图像数据；将所述图像数据还原为所述各个区域的截图；将所述头部导航区域的截图的下端和所述主体内容区域的截图的上端拼接；将所述主体内容区域的截图的下端和所述底部导航区域的截图的上端拼接，得到所述目标app的长截屏图像。与本发明的第一个实施例相比，本实施例提出了一种具体的页面区域布局以及各个区域截图的拼接方式。

应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本发明实施例的实施过程构成任何限定。

上面主要描述了一种长截屏方法，下面将对一种长截屏装置进行详细描述。

请参阅图3，本发明实施例中一种长截屏装置的一个实施例包括：

指令检测模块301，用于当基于混合开发的目标app运行时，若检测到输入的长截屏指令，则获取所述目标app当前展示的html5页面，所述html5页面的大小超出终端设备的屏幕范围；

区域确定模块302，用于确定所述html5页面包含的各个区域；

图像截取模块303，用于使用画布组件分别截取每个所述区域的图像数据，所述图像数据为base64格式；

截图还原模块304，用于将所述图像数据还原为所述各个区域的截图；

截图拼接模块305，用于按照预设的规则将所述各个区域的截图拼接起来，得到所述目标app的长截屏图像。

进一步的，所述html5页面包含的各个区域包括头部导航区域、主体内容区域和底部导航区域，所述截图拼接模块可以包括：

第一拼接单元，用于将所述头部导航区域的截图的下端和所述主体内容区域的截图的上端拼接；

第二拼接单元，用于将所述主体内容区域的截图的下端和所述底部导航区域的截图的上端拼接。

进一步的，所述截图拼接模块还可以包括：

截图尺寸确定单元，用于确定所述主体内容区域的截图的尺寸；

截图尺寸调整单元，用于若所述截图的尺寸超过预设阈值，则按照水平方向上的尺寸不变，竖直方向上的尺寸按预设比例缩小的方式调整所述截图的尺寸，直至所述截图的尺寸小于所述阈值。

进一步的，所述截图拼接模块还可以包括：

截图划分单元，用于若所述尺寸超过预设阈值，则将所述主体内容区域的截图按照由上至下的方向平均划分为n个子截图，n为大于1的整数；

子截图缩小单元，用于将所述n个子截图在水平方向上的尺寸缩小至原尺寸的1/n；

所述第一拼接单元，具体用于：

将所述头部导航区域的截图的下端和缩小尺寸后的所述n个子截图的上端拼接，拼接时所述n个子截图按照划分的顺序由左至右依次排列；

所述第二拼接单元，具体用于：

将缩小尺寸后的所述n个子截图的下端和所述底部导航区域的截图的上端拼接，拼接时所述n个子截图按照划分的顺序由左至右依次排列。

进一步的，所述长截屏装置还可以包括：

展示控件创建模块，用于若所述尺寸超过预设阈值，则创建界面尺寸未超过所述阈值的内容展示控件；

第一控件界面拼接模块，用于将所述头部导航区域的截图的下端和所述内容展示控件的界面上端拼接；

第二控件界面拼接模块，用于将所述内容展示控件的界面下端和所述底部导航区域的截图的上端拼接；

滚动展示模块，用于在所述内容展示控件中滚动展示所述主体内容区域的截图。

本发明实施例还提供一种计算机可读存储介质，所述计算机可读存储介质存储有计算机可读指令，所述计算机可读指令被处理器执行时实现如图1或图2表示的任意一种长截屏方法的步骤。

本发明实施例还提供一种终端设备，包括存储器、处理器以及存储在所述存储器中并可在所述处理器上运行的计算机可读指令，所述处理器执行所述计算机可读指令时实现如图1或图2表示的任意一种长截屏方法的步骤。

图4是本发明一实施例提供的终端设备的示意图。如图4所示，该实施例的终端设备4包括：处理器40、存储器41以及存储在所述存储器41中并可在所述处理器40上运行的计算机可读指令42。所述处理器40执行所述计算机可读指令42时实现上述各个长截屏方法实施例中的步骤，例如图1所示的步骤101至105。或者，所述处理器40执行所述计算机可读指令42时实现上述各装置实施例中各模块/单元的功能，例如图3所示模块301至305的功能。

示例性的，所述计算机可读指令42可以被分割成一个或多个模块/单元，所述一个或者多个模块/单元被存储在所述存储器41中，并由所述处理器40执行，以完成本发明。所述一个或多个模块/单元可以是能够完成特定功能的一系列计算机可读指令段，该指令段用于描述所述计算机可读指令42在所述终端设备4中的执行过程。

所述终端设备4可以是桌上型计算机、笔记本、掌上电脑及云端终端设备等计算设备。所述终端设备4可包括，但不仅限于，处理器40、存储器41。本领域技术人员可以理解，图4仅仅是终端设备4的示例，并不构成对终端设备4的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件，例如所述终端设备4还可以包括输入输出设备、网络接入设备、总线等。

所述处理器40可以是中央处理单元(centralprocessingunit，cpu)，还可以是其他通用处理器、数字信号处理器(digitalsignalprocessor，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现成可编程门阵列(field-programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。

所述存储器41可以是所述终端设备4的内部存储单元，例如终端设备4的硬盘或内存。所述存储器41也可以是所述终端设备4的外部存储设备，例如所述终端设备4上配备的插接式硬盘，智能存储卡(smartmediacard,smc)，安全数字(securedigital,sd)卡，闪存卡(flashcard)等。进一步地，所述存储器41还可以既包括所述终端设备4的内部存储单元也包括外部存储设备。所述存储器41用于存储所述计算机可读指令以及所述终端设备所需的其他程序和数据。所述存储器41还可以用于暂时地存储已经输出或者将要输出的数据。

所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统，装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。

另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。

所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端设备，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：u盘、移动硬盘、只读存储器(rom，read-onlymemory)、随机存取存储器(ram，randomaccessmemory)、磁碟或者光盘等各种可以存储程序代码的介质。

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