一种长截屏方法、装置、存储介质和终端设备制造方法及图纸

本发明专利技术涉及计算机技术领域，提出一种长截屏方法、装置、存储介质和终端设备。该方法应用于混合开发的目标APP，当目标APP运行时，若检测到输入的长截屏指令，则获取目标APP当前展示的html5页面，并确定所述html5页面包含的各个区域；使用画布组件分别截取每个所述区域的图像数据，所述图像数据为base64格式；将所述图像数据还原为所述各个区域的截图；按照预设的规则将所述各个区域的截图拼接起来，得到所述目标APP的长截屏图像。上述过程使用画布组件截取html5页面各个区域的图像数据，然后对图像数据进行还原、拼接，得到长截屏图像。

A Method, Device, Storage Medium and Terminal Device for Long Screen Capture

【技术实现步骤摘要】
一种长截屏方法、装置、存储介质和终端设备
本专利技术涉及计算机
，尤其涉及一种长截屏方法、装置、存储介质和终端设备。
技术介绍
长截屏即滚动截屏，可以截取超出屏幕范围的内容。在现有技术中，用户在使用长截屏工具对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页本文档来自技高网...

【技术保护点】
1.一种长截屏方法，其特征在于，包括：当基于混合开发的目标APP运行时，若检测到输入的长截屏指令，则获取所述目标APP当前展示的html5页面，所述html5页面的大小超出终端设备的屏幕范围；确定所述html5页面包含的各个区域；使用画布组件分别截取每个所述区域的图像数据，所述图像数据为base64格式；将所述图像数据还原为所述各个区域的截图；按照预设的规则将所述各个区域的截图拼接起来，得到所述目标APP的长截屏图像。

【技术特征摘要】
1.一种长截屏方法，其特征在于，包括：当基于混合开发的目标APP运行时，若检测到输入的长截屏指令，则获取所述目标APP当前展示的html5页面，所述html5页面的大小超出终端设备的屏幕范围；确定所述html5页面包含的各个区域；使用画布组件分别截取每个所述区域的图像数据，所述图像数据为base64格式；将所述图像数据还原为所述各个区域的截图；按照预设的规则将所述各个区域的截图拼接起来，得到所述目标APP的长截屏图像。2.根据权利要求1所述的长截屏方法，其特征在于，所述html5页面包含的各个区域包括头部导航区域、主体内容区域和底部导航区域，所述按照预设的规则将所述各个区域的截图拼接起来包括：将所述头部导航区域的截图的下端和所述主体内容区域的截图的上端拼接；将所述主体内容区域的截图的下端和所述底部导航区域的截图的上端拼接。3.根据权利要求2所述的长截屏方法，其特征在于，在将所述头部导航区域的截图的下端和所述主体内容区域的截图的上端拼接之前，还包括：确定所述主体内容区域的截图的尺寸；若所述截图的尺寸超过预设阈值，则按照水平方向上的尺寸不变，竖直方向上的尺寸按预设比例缩小的方式调整所述截图的尺寸，直至所述截图的尺寸小于所述阈值。4.根据权利要求2所述的长截屏方法，其特征在于，在将所述头部导航区域的截图的下端和所述主体内容区域的截图的上端拼接之前，还包括：确定所述主体内容区域的截图的尺寸；若所述尺寸超过预设阈值，则将所述主体内容区域的截图按照由上至下的方向平均划分为N个子截图，N为大于1的整数；将所述N个子截图在水平方向上的尺寸缩小至原尺寸的1/N；所述将所述头部导航区域的截图的下端和所述主体内容区域的截图的上端拼接为：将所述头部导航区域的截图的下端和缩小尺寸后的所述N个子截图的上端拼接，拼接时所述N个子截图按照划分的顺序由左至右依次排列；所述将所述主体内容区域的截图的下端和所述底部导航区域的截图的上端拼接为：将缩小尺寸后的所述N个子截图的下端和所述底部导航区域的截图的上端拼接，拼接时所述N个子截图按照划分的顺序由左至右依次排列。5.根据权利要求2所述的长截屏方法，其特征在于，所述长截屏方法还包括：确定所述主体内容区域的截图的尺寸；若所述尺寸超过预设阈值，则创建界面尺寸未超过所述阈值的内容展示控件；将所述头部导航区域的截图的下端和所述内容展示控件的界面上端拼接；将所述内容展示控件的界面下端和所述底部导航区域的截图的上端拼接；在所述内容展示控件中滚动展示所述主体内容区域的截图。6.一种长截屏装置，其特征在于，包括：指令检测模块，用于当基于混合开发...

【专利技术属性】
技术研发人员：贺少锋，
申请(专利权)人：中国平安人寿保险股份有限公司，
类型：发明
国别省市：广东,44