CN109783759A - 页面截图自动化生成方法、设备及可读存储介质 - Google Patents

Abstract

本发明公开了一种页面截图自动化生成方法、设备及可读存储介质，所述方法通过将预截图页面的页面元素进行元素解析获取目标元素列表，将所述目标元素列表转换为幕布对象，并进一步将所述幕布对象转换为图像文本数据，获取对应的图像文本数据列表，然后根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据，从而获取页面截图。本方案通过页面元素分别提取、分别幕布转换、多图像拼接转换等过程，实现了简洁、高效且精准的网页页面截图自动化生成，有效地避免了目前主流方法存在元素解析失败、元素遗漏、生成图像错位、无法截取页面可视区域外的元素、页面截图生成速度慢等问题。

Description

页面截图自动化生成方法、设备及可读存储介质

技术领域

本发明涉及网页页面截图生成技术领域，具体涉及一种页面截图自动化生成方法、设备及可读存储介质。

背景技术

随着互联网的应用，人们经常在浏览网页的时候需要将浏览的网页内容进行保存，最常用的一种方法就是进行网页页面的截图保存。

当前主流的网页页面截图方法，均是单一依赖html2canvas工具将页面元素转换为幕布对象(canvas)，然后直接在页面中展示或简单将幕布对象内容转换为图像数据在页面中打开展示。上述方法在简单网页页面的应用上效果尚可，对于页面元素较复杂的网页，采用上述方法很容易出现元素解析失败、元素遗漏、生成图像错位、无法截取页面可视区域外的元素、页面截图生成速度慢等问题，大大影响页面截图的生成效果。

因此，亟需要一种简洁、高效且精准的页面截图自动化生成方法

发明内容

本发明提供一种简洁、高效且精准的页面截图自动化生成方法、装置、设备以及可读存储介质，使用该方法进行网页页面截屏时，能够解决目前主流网页截屏方法容易出现元素解析失败、元素遗漏、生成图像错位、无法截取页面可视区域外的元素、页面截图生成速度慢等问题。

根据本发明的一个方面，提供一种页面截图自动化生成方法，该方法包括如下步骤：

将预截图页面的页面元素进行元素解析获取目标元素列表；

将所述目标元素列表转换为幕布对象；

将所述幕布对象转换为图像文本数据，获取对应的图像文本数据列表；

根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据。

在其中一个实施例中，该方法还包括：将所述获取的拼接图像对应的文本数据传输给前端页面进行展示并且/或者进行下载保存的步骤。

在其中一个实施例中，所述将预截图页面的页面元素进行元素解析的步骤，为根据页面特征字典进行页面的元素解析。

在其中一个实施例中，所述将所述幕布对象转换为图像文本数据为根据html2canvas工具将所述目标元素列表中的目标元素转换为图像文本数据。

在其中一个实施例中，所述图像文本数据格式具有预定格式以及预定编码方式。

在其中一个实施例中，所述将所述幕布对象转换为图像文本数据的步骤，为通过异步执行将所述目标元素列表中的目标元素转换为图像文本数据。

在其中一个实施例中，所述获取对应的图像文本数据列表的步骤，为通过记录每一个幕布对象到图像文本数据的转换过程的状态，当所有转换过程的状态均为完成状态时，同步执行输出所述图像文本数据列表。

在其中一个实施例中，所述记录每一个幕布对象到图像文本数据的转换过程的状态的步骤，为通过Javascript Promises机制,记录每一个幕布对象到图像文本数据的转换过程状态。

在其中一个实施例中，所述根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据为通过后端服务器完成。

在其中一个实施例中，所述根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据的步骤，包括：

根据所述图像文本数据列表，对所述图像文本数据列表中的图像文本数据进行清洗，去除文本头解析字段，获取具有预定编码的图像文本数据；

对所述获取的具有预定编码的图像文本数据进行解码，获取图像二进制数据；

将所述获取的图像二进制数据生成图像对象，生成图像对象列表；

创建预定带大小的空白图像，循环所述图像对象列表；

根据所述图像对象的大小属性将所述图像对象拼接到所述空白图像的预定位置。

在其中一个实施例中，为根据python pillow工具创建所述空白图像。

在其中一个实施例中，该方法还包括对拼接图像的内容进行预定格式的编码、加装文件解析头字段的步骤。

根据本发明的另一个方面，还提供一种页面截图自动化生成装置，该装置包括：

目标元素列表生成模块，用于将预截图页面的页面元素进行元素解析获取目标元素列表；

幕布对象转换模块，用于将所述目标元素列表转换为幕布对象；

图像文本数据列表生成模块，用于将所述幕布对象转换为图像文本数据，获取对应的图像文本数据列表；

图像拼接模块，用于根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据。

在其中一个实施例中，该装置还包括：

展示保存模块，用于将所述获取的拼接图像对应的文本数据传输给前端页面进行展示并且/或者进行下载保存。

根据本发明的另一个方面，还提供一种页面截图自动化生成设备，该设备包括：

处理器；以及

存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如上述任何一项所述的页面截图自动化生成方法。

根据本发明的另一个方面，还提供一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被计算设备的处理器执行时，使所述处理器执行如上述任何一项所述的页面截图自动化生成方法。

本发明的有益效果包括：

根据本发明实施例的页面截图自动化生成方法、装置、设备及可读存储介质，通过将预截图页面的页面元素进行元素解析获取目标元素列表，将所述目标元素列表转换为幕布对象，并进一步将所述幕布对象转换为图像文本数据，获取对应的图像文本数据列表，然后根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据，从而获取页面截图。本方案通过页面元素分别提取、分别幕布转换、多图像拼接转换等过程，实现了简洁、高效且精准的网页页面截图自动化生成，有效地避免了目前主流方法存在元素解析失败、元素遗漏、生成图像错位、无法截取页面可视区域外的元素、页面截图生成速度慢等问题。

附图说明

通过阅读以下参照附图对非限制性实施例所作的详细描述，本发明的其它特征、目的和优点将会变得更明显，其中，相同或相似的附图标记表示相同或相似的特征。

图1示出本发明一实施例的页面截图自动化生成方法流程图；

图2示出本发明另一实施例的页面截图自动化生成方法流程图；

图3示出图1所示实施例的步骤S180流程图；

图4示出本发明又一实施例的页面截图自动化生成方法示意图；

图5示出本发明一实施例的页面截图自动化生成装置示意图。

具体实施方式

下面将详细描述本发明的各个方面的特征和示例性实施例，为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及具体实施例，对本发明进行进一步详细描述。应理解，此处所描述的具体实施例仅被配置为解释本发明，并不被配置为限定本发明。对于本领域技术人员来说，本发明可以在不需要这些具体细节中的一些细节的情况下实施。下面对实施例的描述仅仅是为了通过示出本发明的示例来提供对本发明更好的理解。

需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

下面结合图1-4所示实施例对本发明一种页面截图自动化生成方法进行详细阐述。

图1所示，为本发明一实施例的页面截图自动化生成方法流程图。

图2所示，为本发明另一实施例的页面截图自动化生成方法流程图。

图3所示，为图1所示实施例的步骤S180示意图。

图4所示，为本发明又一实施例的页面截图自动化生成方法示意图。

参考图1，一种页面截图自动化生成方法100，该方法100包括如下步骤：

步骤S120:将预截图页面的页面元素进行元素解析获取目标元素列表。

其中，可以是针对预截图的网页页面，或者是其他预截图页面，例如浏览器或者其他操作页面。

其中，将预截图页面的页面元素进行元素解析的步骤，为根据页面特征字典进行页面的元素解析。可以根据预截图的对象，调取对应的页面特征字典，页面特征字典中包括了该页面中可能包含的各种特征。或者，也可以只设置一个页面特征字典，包括了所有可能的页面特征，在截图时直接进行调取。

步骤S140：将所述目标元素列表转换为幕布对象。

本步骤中，将所述幕布对象转换为图像文本数据的操作，为根据html2canvas工具将所述目标元素列表中的目标元素转换为图像文本数据。

将所述幕布对象转换为图像文本数据的步骤，为通过异步执行将所述目标元素列表中的目标元素转换为图像文本数据。并且，获取的图像文本数据格式具有预定格式以及预定编码方式。并且，本此步骤为异步执行，即目标元素列表中各个目标元素转换执行结束的顺序并不一定按照执行开始的顺序进行。

步骤S160：将所述幕布对象转换为图像文本数据，获取对应的图像文本数据列表。

其中，获取对应的图像文本数据列表的步骤，为通过记录每一个幕布对象到图像文本数据的转换过程的状态，当所有转换过程的状态均为完成状态时，同步执行输出所述图像文本数据列表；所述记录每一个幕布对象到图像文本数据的转换过程的状态的步骤，可以通过Javascript Promises机制,记录每一个幕布对象到图像文本数据的转换过程状态。上述图像文本数据可以设置预定的格式，例如png、gif或bmp格式等，并且转换得到的图像文本数据是需要预定编码的，编码格式可以根据需要进行设定，例如编码格式为base64。

步骤S180：根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据。

如上一步骤所说的，根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据为通过后端服务器完成。

并且参考图3，所述根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据的步骤S180，进一步包括如下步骤：

步骤S181：根据所述图像文本数据列表，对所述图像文本数据列表中的图像文本数据进行清洗，去除文本头解析字段，获取具有预定编码的图像文本数据。

步骤S183：对所述获取的具有预定编码的图像文本数据进行解码，获取图像二进制数据。

步骤S185：将所述获取的图像二进制数据生成图像对象，生成图像对象列表。

步骤S187：创建预定带大小的空白图像，循环所述图像对象列表。其中，为根据python pillow工具创建所述空白图像。

步骤S189：根据所述图像对象的大小属性将所述图像对象拼接到所述空白图像的预定位置。

进一步的，步骤S180还包括对拼接图像的内容进行预定格式的编码、加装文件解析头字段的步骤。

并且，在拼接完成后，还包括对拼接图像的内容进行base64编码，加装文件解析头字段的步骤，然后进行输出拼接图像对应的文本数据。

参考附图2，上述页面截图自动化生成方法还包括如下步骤：

步骤S190：将所述获取的拼接图像对应的文本数据传输给前端页面进行展示并且/或者进行下载保存。

本方法通过页面元素分别提取、分别幕布转换、多图像拼接转换等过程，实现了简洁、高效且精准的网页页面截图自动化生成，有效地避免了目前主流方法存在元素解析失败、元素遗漏、生成图像错位、无法截取页面可视区域外的元素、页面截图生成速度慢等问题。

下面以图4所示的实施例，对页面截图自动化生成方法的技术方案进行详细的阐述。这里以对客户浏览器网页进行截图为例进行说明。

首先，将预截图页面的页面元素进行元素解析获取需要截图的元素。根据本步骤的操作，通过输入页面元素特征数据，根据此数据提取页面中带指定标记的元素，这些元素即为欲截图的目标元素，输出目标元素列表。

第二步操作为将所述目标元素列表转换为幕布对象。本步骤的输入为上一步的目标元素列表，利用html2canvas工具将列表的目标元素转换为幕布(canvas)对象，输出幕布对象。并且，本此步骤为异步执行，即目标元素列表中各个目标元素转换执行结束的顺序并不一定按照执行开始的顺序进行。

下一步将幕布对象转换为图像文本数据，获取对应的图像文本数据列表。该步骤的输入为上一步的幕布对象，利用html2canvas工具将幕布对象的内容转换为图像文本数据，图像格式可以为png，数据编码方式可以为base64，此过程可以为异步执行。获取图像文本数据列表的步骤，因为后续要将图像文本数据列表一起回传给后端服务器，因此，此处须保证输出结果的同步性。实现同步执行保证的方法为使用Javascript Promises机制,为每一个幕布对象到图像文本数据的转换过程记录状态，直到所有转换过程的状态均为完成状态时，此步骤输出图像文本数据列表并进一步传输给后端服务器进一步处理。

下一步进行多图像拼接。该步骤的输入为上一步前端回传的图像文本数据列表，获取图像文本数据列表后，首先对图像文本数据进行清洗，去除文本头解析字段，得到纯净的base64编码(此处以base64编码为例)的图像文本数据；然后对图像文本数据进行base64解码，得到图像二进制数据，利用python pillow工具生成图像对象，放入图像对象列表；最后，利用python pillow工具创建一张指定大小的空白图像，循环图像对象列表，根据图像对象的高度及宽度属性将图像对象数据拼接至空白图像适当位置。

并且，在拼接完成后，还包括对拼接图像的内容进行base64编码，加装文件解析头字段的步骤，然后进行输出拼接图像对应的文本数据。

最后，将上一步的图像文本数据传输给前端页面进行展示及下载保存，网页页面截图完成。

本方法利用html2canvas工具、python pillow工具，通过页面元素分别提取、分别幕布转换、多图像拼接转换等过程，实现了简洁、高效且精准的网页页面截图自动化生成，有效地避免了目前主流方法存在元素解析失败、元素遗漏、生成图像错位、无法截取页面可视区域外的元素、页面截图生成速度慢等问题。

上文中已经参考附图1-4详细描述了根据本发明的页面截图自动化生成方法。

此外，根据本发明的方法还可以实现为一种计算机程序或计算机程序产品，该计算机程序或计算机程序产品包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。

或者，本发明还可以实现为一种页面截图自动化生成设备，包括：

处理器；以及存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行根据本发明的上述方法的各个步骤。

或者，本发明还可以实施为一种非暂时性机器可读存储介质(或计算机可读存储介质、或机器可读存储介质)，其上存储有可执行代码(或计算机程序、或计算机指令代码)，当所述可执行代码(或计算机程序、或计算机指令代码)被电子设备(或计算设备、服务器等)的处理器执行时，使所述处理器执行根据本发明的上述方法的各个步骤。

图5所示，为本发明一实施例的页面截图自动化生成装置示意图。

如图5所示，本发明还包括一种基于上述方法的页面截图自动化生成装置200，该装置包括：目标元素列表生成模块210，幕布对象转换模块230，图像文本数据列表生成模块250和图像拼接模块270。

其中，目标元素列表生成模块210将预截图页面的页面元素进行元素解析获取目标元素列表；幕布对象转换模块230将所述目标元素列表转换为幕布对象；图像文本数据列表生成模块250将所述幕布对象转换为图像文本数据，获取对应的图像文本数据列表；图像拼接模块270根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据。

进一步的，该装置200还包括展示保存模块290，用于将所述获取的拼接图像对应的文本数据传输给前端页面进行展示并且/或者进行下载保存。

目标元素列表生成模块210将预截图页面的页面元素进行元素解析获取目标元素列表，为根据输入的页面元素特征数据提取页面中带指定标记的元素，这些元素即为欲截图的目标元素，输出目标元素列表。

幕布对象转换模块230被设置为将所述目标元素列表转换为幕布对象，其输入为上一步的目标元素列表，利用html2canvas工具将列表的目标元素转换为幕布(canvas)对象，输出幕布对象，并且为异步执行。

图像文本数据列表生成模块250的输入为上一步的幕布对象，利用html2canvas工具将将幕布对象的内容转换为图像文本数据，图像格式为png，数据编码方式为base64，此过程为异步执行，因为后续要将所有元素的图像文本数据一起回传给后端服务器，因此此处须保证输出结果的同步性。同步执行保证的方法为使用Javascript Promises机制,为每一个幕布对象到图像文本数据的转换过程记录状态，直到所有转换过程的状态均为完成状态时，此步骤输出图像文本数据列表。

图像拼接模块270执行的操作为通过在后端服务器完成。图像拼接模块270的输入为上一步前端回传的图像文本数据列表，首先对图像文本数据进行清洗，去除文本头解析字段，得到纯净的base64编码的图像文本数据；然后对图像文本数据进行base64解码，得到图像二进制数据，利用python pillow工具生成图像对象，放入图像对象列表；最后，利用python pillow工具创建一张指定大小的空白图像，循环图像对象列表，根据图像对象的高度及宽度属性将图像对象数据拼接至空白图像适当位置。拼接完成后，对拼接图像的内容进行base64编码，加装文件解析头字段，输出拼接图像对应的文本数据。

如上所述的网页截图自动化生成装置，利用html2canvas工具、python pillow工具，通过页面元素分别提取、分别幕布转换、多图像拼接转换等过程，实现了简洁、高效且精准的网页页面截图自动化生成，有效地避免了目前主流方法存在元素解析失败、元素遗漏、生成图像错位、无法截取页面可视区域外的元素、页面截图生成速度慢等问题。

本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (10)

1.一种页面截图自动化生成方法，其特征在于，包括如下步骤：

将预截图页面的页面元素进行元素解析获取目标元素列表；

将所述目标元素列表转换为幕布对象；

将所述幕布对象转换为图像文本数据，获取对应的图像文本数据列表；

根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据。

2.根据权利要求1所述的页面截图自动化生成方法，其特征在于，还包括：将所述获取的拼接图像对应的文本数据传输给前端页面进行展示并且/或者进行下载保存的步骤。

3.根据权利要求1所述的页面截图自动化生成方法，其特征在于，所述将预截图页面的页面元素进行元素解析的步骤，为根据页面特征字典进行页面的元素解析；

所述将所述幕布对象转换为图像文本数据为根据html2canvas工具将所述目标元素列表中的目标元素转换为图像文本数据。

4.根据权利要求1或3所述的页面截图自动化生成方法，其特征在于，所述图像文本数据格式具有预定格式以及预定编码方式。

5.根据权利要求4所述的页面截图自动化生成方法，其特征在于，所述将所述幕布对象转换为图像文本数据的步骤，为通过异步执行将所述目标元素列表中的目标元素转换为图像文本数据。

6.根据权利要求1所述的页面截图自动化生成方法，其特征在于，所述获取对应的图像文本数据列表的步骤，为通过记录每一个幕布对象到图像文本数据的转换过程的状态，当所有转换过程的状态均为完成状态时，同步执行输出所述图像文本数据列表；

所述记录每一个幕布对象到图像文本数据的转换过程的状态的步骤，为通过Javascript Promises机制,记录每一个幕布对象到图像文本数据的转换过程状态。

7.根据权利要1所述的页面截图自动化生成方法，其特征在于，所述根据所述图像文本列表进行多图像拼接，获取拼接图像对应的文本数据的步骤，包括：

根据所述图像文本数据列表，对所述图像文本数据列表中的图像文本数据进行清洗，去除文本头解析字段，获取具有预定编码的图像文本数据；

对所述获取的具有预定编码的图像文本数据进行解码，获取图像二进制数据；

将所述获取的图像二进制数据生成图像对象，生成图像对象列表；

创建预定带大小的空白图像，循环所述图像对象列表；

根据所述图像对象的大小属性将所述图像对象拼接到所述空白图像的预定位置。

8.根据权利要7所述的页面截图自动化生成方法，其特征在于，为根据python pillow工具创建所述空白图像；并且/或者

还包括对拼接图像的内容进行预定格式的编码、加装文件解析头字段的步骤。

9.一种页面截图自动化生成设备，包括：

处理器；以及

存储器，其上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器执行如权利要求1-12中任何一项所述的页面截图自动化生成方法。

10.一种非暂时性机器可读存储介质，其上存储有可执行代码，当所述可执行代码被计算设备的处理器执行时，使所述处理器执行如权利要求1-12中任一项所述的页面截图自动化生成方法。