CN110287437A - 网页截图方法、装置、存储介质及终端 - Google Patents

Abstract

本公开提供一种网页截图方法、装置、存储介质及终端，用以解决相关技术中因网页元素的样式信息不正确而导致生成的截图图片与原始网页的内容不一致的问题，该网页截图方法包括：确定截图区域中包含的目标网页元素；执行异步延迟任务，其中，所述异步延迟任务的执行时间不小于计算所述目标网页元素的样式信息所需的时间；在所述异步延迟任务执行完成后，获取所述目标网页元素的样式信息，并根据所述样式信息生成截图图片。

Description

网页截图方法、装置、存储介质及终端

技术领域

本公开涉及互联网技术领域，尤其涉及一种网页截图方法、装置、存储介质及终端。

背景技术

浏览器作为终端中最常用的应用程序，被用作进行网页浏览。用户使用浏览器浏览网页的过程中，当浏览到感兴趣的内容时，可通过截图软件或浏览器自带的截图工具进行截图操作。

传统技术中，终端接收到截图指令时，会生成内联框架(iframe)，然后复制截图区域中包含的目标网页元素到该iframe中，再直接获取该目标网页元素的样式信息，最后根据样式信息生成截图图片。然而，有些目标网页元素(例如图表元素)被复制到iframe中后，需要耗费一段时间(例如1-2S)后才能计算出正确的样式信息，如果网页元素一复制到iframe中就直接获取该网页元素的样式信息，则可能出现因网页元素的样式信息不正确而导致生成的截图图片与原始网页的内容不一致。

发明内容

本公开提供一种网页截图方法、装置及系统，以至少解决相关技术中因网页元素的样式信息不正确而导致生成的截图图片与原始网页的内容不一致的问题。本公开的技术方案如下：

根据本公开实施例的第一方面，提供一种网页截图方法，包括：

确定截图区域中包含的目标网页元素；

执行异步延迟任务，其中，所述异步延迟任务的执行时间不小于计算所述目标网页元素的样式信息所需的时间；

在所述异步延迟任务执行完成后，获取所述目标网页元素的样式信息，并根据所述样式信息生成截图图片。

在一可能的实现方式中，所述执行异步延迟任务，包括：

复制所述目标网页元素到已生成的内联框架iframe中；

加载异步延迟任务；

执行所述异步延迟任务。

在一可能的实现方式中，所述复制所述目标网页元素到已生成的iframe中，包括：

采用onclone事件复制所述目标网页元素到已生成的iframe中；

所述加载异步延迟任务，包括：

在所述onclone事件中加载异步延迟任务。

在一可能的实现方式中，所述异步延迟任务包括：定时器任务；

所述加载异步延迟任务，包括：

采用JavaScript中的Promise对象加载定时器任务，所述定时器任务的执行时间不小于计算所述样式信息所需的时间。

在一可能的实现方式中，所述异步延迟任务还包括至少一个下述任务：

删除部分所述目标网页元素的任务；

修改所述目标网页元素的任务。

根据本公开实施例的第二方面，提供一种网页截图装置，包括用于执行第一方面或第一方面的任意可能的实现方式中的网页截图方法的模块。

根据本公开实施例的第三方面，提供一种存储介质，其上存储有计算机程序，所述程序被处理器执行时实现第一方面或第一方面的任意可能的实现方式中的网页截图方法的步骤。

根据本公开实施例的第四方面，提供一种终端，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述程序时实现第一方面或第一方面的任意可能的实现方式中的网页截图方法的步骤。

根据本公开实施例的第五方面，提供一种计算机程序产品，包括计算机程序，所述程序被处理器执行时实现第一方面或第一方面的任意可能的实现方式中的网页截图方法的步骤。

本公开的实施例提供的技术方案至少带来以下有益效果：

通过在获取目标网页元素的样式信息之前，插入一个异步延迟任务，以延迟获取目标网页元素的样式信息，即等到计算完目标网页元素的样式信息后再获取目标网页元素的样式信息，从而使得获取到的样式信息都是正确的，这样生成的截图图片与原始网页的内容就能保持一致。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本公开。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理，并不构成对本公开的不当限定。

图1是根据一示例性实施例示出的一种网面截图方法的流程图；

图2是根据一示例性实施例示出的网面截图方法的总体流程图；

图3是根据一示例性实施例示出的一种网面截图装置的结构示意图；

图4是根据一示例性实施例示出的网面截图装置中异步延迟任务处理模块的结构示意图；

图5是根据一示例性实施例示出的一种终端的结构示意图。

具体实施方式

为了使本领域普通人员更好地理解本公开的技术方案，下面将结合附图，对本公开实施例中的技术方案进行清楚、完整地描述。

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。

一般来说，网页中有些内容是通过接口异步加载的，例如图表元素、动画元素。相关技术中，用户进行网页截图时，为了截图样式能够正常生成，会先生成iframe，然后复制截图区域中包含的目标网页元素到该iframe中，再直接获取该目标网页元素的样式信息，最后根据样式信息生成截图图片，然而，那些需要通过接口异步加载的网页元素被复制到iframe中后，需要耗费一段时间(例如1-2S)后才能计算出正确的样式信息，如果网页元素一复制到iframe中就直接获取该网页元素的样式信息，这时网页元素的样式信息还没计算完，获取到的样式信息可能是默认的样式信息，则可能出现因网页元素的样式信息不正确而导致生成的截图图片与原始网页的内容不一致。

为了解决上述的问题，本公开实施例提出了一种网页截图方法、装置、存储介质及终端。

图1是根据一示例性实施例示出的一种网页截图方法的流程图，如图1所示，该网页截图方法用于终端中，该终端例如可以为智能手机、笔记本电脑、平板电脑(IPAD)、电子书阅读器等，该方法包括以下步骤：

S101、确定截图区域中包含的目标网页元素。

作为一种示例，网页元素可以包括：文字、图表、图片、音频、动画、视频等。

在一些实施例中，确定截图区域中包含的目标网页元素，可以包括：

接收截图指令，所述截图指令中包含截图区域的区域信息；

根据所述区域信息，确定截图区域中包含的目标网页元素。

其中，截图指令可以是用户通过点击截图软件或截图工具触发。

截图区域可以为规则区域或不规则区域。比如，截图区域可以是矩形区域(规则区域)；又比如，截图区域可以是由直线和曲线围合而成的封闭区域(不规则区域)。截图区域可以为连续的区域，或者可以由若干个不连续的子截图区域构成的非连续区域。

区域信息中包含截图区域的坐标和尺寸。比如，当截图区域为矩形区域时，该区域信息中包含截图区域左上角顶点的顶点坐标(50px，100px)以及截图区域的尺寸500px×700px。在其他可能的实施方式中，该区域信息还可以采用坐标点集合等其他形式，本公开实施例对此并不进行限定。

S102、执行异步延迟任务，其中，所述异步延迟任务的执行时间不小于计算所述目标网页元素的样式信息所需的时间。

本实施例中，通过插入一个执行时间不小于计算目标网页元素的样式信息所需的时间的异步延迟任务，在该异步延迟任务执行完成后，才获取目标网页元素的样式信息，因此可以延迟获取目标网页元素的样式信息，这样就可以等到计算完目标网页元素的样式信息后再获取目标网页元素的样式信息，从而使得获取到的样式信息都是正确的，这样生成的截图图片与原始网页的内容就能保持一致。

例如：目标网页元素包含图表元素，计算图表元素的样式信息需要耗时1-2s的时间，可以设置异步延迟任务的执行时间不小于2s。

在一些实施例中，执行异步延迟任务，可以包括：

复制所述目标网页元素到已生成的iframe中；

加载异步延迟任务；

执行所述异步延迟任务。

需要指出的是，iframe的生成可以在确定截图区域中包含的目标网页元素之前或者之后，只要在复制目标网页元素之前就可以，本公开实施例对此并不进行限定。

在一些实施例中，上述复制所述目标网页元素到已生成的iframe中，可以包括：

采用onclone事件复制所述目标网页元素到已生成的iframe中；

上述加载异步延迟任务，可以包括：

在所述onclone事件中加载异步延迟任务。

在一些实施例中，异步延迟任务包括：定时器任务；

上述加载异步延迟任务，可以包括：

采用JavaScript中的Promise对象加载定时器任务，所述定时器任务的执行时间不小于计算所述样式信息所需的时间。

其中，Promise对象是一种异步解决方案，当异步事件执行结束后才开始执行下一个操作，采用JavaScript中的Promise对象加载定时器任务，这样定时器任务就放到了Promise对象中，因此需要等待定时器任务执行完成后才开始执行下一个操作，即获取目标网页元素的样式信息的操作。

在一些实施例中，上述异步延迟任务除了包括定时器任务外，还可以包括至少一个下述任务：

删除部分所述目标网页元素的任务；

修改所述目标网页元素的任务。

例如，在一实施例中，异步延迟任务包括定时器任务和删除部分所述目标网页元素的任务，截图阶段，执行删除部分目标网页元素的任务，并且在定时器任务执行完成后，才获取剩余的目标网页元素的样式信息。

又例如，在另一实施例中，异步延迟任务包括定时器任务和修改所述目标网页元素的任务，截图阶段，执行修改目标网页元素的任务，并且在定时器任务执行完成后，才获取已修改的和未修改的目标网页元素的样式信息。

再例如，在另一实施例中，异步延迟任务包括定时器任务、删除部分所述目标网页元素的任务和修改所述目标网页元素的任务，截图阶段，执行删除部分目标网页元素的任务和修改目标网页元素的任务，并且在定时器任务执行完成后，才获取剩余的已修改的和未修改的目标网页元素的样式信息。

本公开实施例中，在插入定时器任务的同时还可以插入其他的任务，比如，删除部分目标网页元素的任务、修改目标网页元素的任务，通过这种方式就可以达到删除网页元素或修改网页元素的目的，增加了对复杂情况处理的灵活性。

S103、在所述异步延迟任务执行完成后，获取所述目标网页元素的样式信息，并根据所述样式信息生成截图图片。

作为一种示例，样式信息可以包括：高度、宽度、像素值等信息。

下面以截图区域中包含图表元素为例，下面结合图2说明本公开实施例提供的网页截图方法的总体流程。

S201、接收截图指令，所述截图指令中包含截图区域的区域信息；

S202、生成iframe；

S203、根据所述区域信息，确定截图区域中包含的目标网页元素；

其中，目标网页元素包括图表元素。

S204、采用onclone事件复制所述目标网页元素到已生成的iframe中，并在所述onclone事件中采用JavaScript中的Promise对象加载异步延迟任务；

其中，异步延迟任务包括定时器任务、删除部分目标网页元素的任务和修改目标网页元素的任务。

S205、执行所述异步延迟任务；

其中，定时器任务的执行时间不小于计算所述图表元素的样式信息所需的时间。

本实施例中，在执行异步延迟任务的同时计算图表元素的样式信息。

S206、在所述异步延迟任务执行完成后，获取所述目标网页元素的样式信息，并根据所述样式信息生成截图图片。

基于同一发明构思，本公开实施例还提供了一种网页截图装置，图3是根据一示例性实施例示出的一种网页截图装置框图。参照图3，该网页截图装置包括：网页元素确定模块11、异步延迟任务处理模块12和图片生成模块13。

其中，网页元素确定模块11，被配置为确定截图区域中包含的目标网页元素；

异步延迟任务处理模块12，被配置为执行异步延迟任务，其中，所述异步延迟任务的执行时间不小于计算所述目标网页元素的样式信息所需的时间；

图片生成模块13，被配置为在所述异步延迟任务执行完成后，获取所述目标网页元素的样式信息，并根据所述样式信息生成截图图片。

在一可能的实现方式中，如图4所示，异步延迟任务处理模块12可以包括：

克隆子模块121，被配置为复制所述目标网页元素到已生成的内联框架iframe中；

加载子模块122，被配置为加载异步延迟任务；

执行子模块123，被配置为执行所述异步延迟任务。

在一可能的实现方式中，克隆子模块121被配置为：

采用onclone事件克隆所述目标网页元素到已生成的iframe中；

加载子模块122被配置为：

在所述onclone事件中加载异步延迟任务。

在一可能的实现方式中，异步延迟任务包括：定时器任务；

加载子模块122被配置为：

采用JavaScript中的Promise对象加载定时器任务，所述定时器任务的执行时间不小于计算所述样式信息所需的时间。

在一可能的实现方式中，上述异步延迟任务除了包括定时器任务外，还包括至少一个下述任务：

删除部分所述目标网页元素的任务；

修改所述目标网页元素的任务。

上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本公开方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

基于同一发明构思，本公开实施例还提供了一种存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任意可能的实现方式中的网页截图方法的步骤。

可选地，存储介质可以是非临时性计算机可读存储介质，例如，所述非临时性计算机可读存储介质可以是ROM、随机存取存储器(RAM)、CD-ROM、磁带、软盘和光数据存储设备等。

基于同一发明构思，本公开实施例还提供了一种计算机程序产品，包括计算机程序，所述程序被处理器执行时实现上述任意可能的实现方式中的网页截图方法的步骤。

基于同一发明构思，参见图5，本公开实施例还提供了一种终端，包括存储器71(例如非易失性存储器)、处理器72及存储在存储器71上并可在处理器72上运行的计算机程序，处理器72执行所述程序时实现上述任意可能的实现方式中的网页截图方法的步骤。该终端例如可以为智能手机、笔记本电脑、平板电脑、电子书阅读器等。

如图5所示，该终端一般还可以包括：内存73、网络接口74、以及内部总线75。除了这些部件外，还可以包括其他硬件，对此不再赘述。

需要指出的是，上述网页截图装置可以通过软件实现，其作为一个逻辑意义上的装置，是通过其所在的终端的处理器72将非易失性存储器中存储的计算机程序指令读取到内存73中运行形成的。

本说明书中描述的主题及功能操作的实施例可以在以下中实现：有形体现的计算机软件或固件、包括本说明书中公开的结构及其结构性等同物的计算机硬件、或者它们中的一个或多个的组合。本说明书中描述的主题的实施例可以实现为一个或多个计算机程序，即编码在有形非暂时性程序载体上以被数据处理装置执行或控制数据处理装置的操作的计算机程序指令中的一个或多个模块。可替代地或附加地，程序指令可以被编码在人工生成的传播信号上，例如机器生成的电、光或电磁信号，该信号被生成以将信息编码并传输到合适的接收机装置以由数据处理装置执行。计算机存储介质可以是机器可读存储设备、机器可读存储基板、随机或串行存取存储器设备、或它们中的一个或多个的组合。

本说明书中描述的处理及逻辑流程可以由执行一个或多个计算机程序的一个或多个可编程计算机执行，以通过根据输入数据进行操作并生成输出来执行相应的功能。所述处理及逻辑流程还可以由专用逻辑电路—例如FPGA(现场可编程门阵列)或ASIC(专用集成电路)来执行，并且装置也可以实现为专用逻辑电路。

适合用于执行计算机程序的计算机包括，例如通用和/或专用微处理器，或任何其他类型的中央处理单元。通常，中央处理单元将从只读存储器和/或随机存取存储器接收指令和数据。计算机的基本组件包括用于实施或执行指令的中央处理单元以及用于存储指令和数据的一个或多个存储器设备。通常，计算机还将包括用于存储数据的一个或多个大容量存储设备，例如磁盘、磁光盘或光盘等，或者计算机将可操作地与此大容量存储设备耦接以从其接收数据或向其传送数据，抑或两种情况兼而有之。然而，计算机不是必须具有这样的设备。此外，计算机可以嵌入在另一设备中，例如移动电话、个人数字助理(PDA)、移动音频或视频播放器、游戏操纵台、全球定位系统(GPS)接收机、或例如通用串行总线(USB)闪存驱动器的便携式存储设备，仅举几例。

适合于存储计算机程序指令和数据的计算机可读介质包括所有形式的非易失性存储器、媒介和存储器设备，例如包括半导体存储器设备(例如EPROM、EEPROM和闪存设备)、磁盘(例如内部硬盘或可移动盘)、磁光盘以及CD ROM和DVD-ROM盘。处理器和存储器可由专用逻辑电路补充或并入专用逻辑电路中。

虽然本说明书包含许多具体实施细节，但是这些不应被解释为限制任何发明的范围或所要求保护的范围，而是主要用于描述特定发明的具体实施例的特征。本说明书内在多个实施例中描述的某些特征也可以在单个实施例中被组合实施。另一方面，在单个实施例中描述的各种特征也可以在多个实施例中分开实施或以任何合适的子组合来实施。此外，虽然特征可以如上所述在某些组合中起作用并且甚至最初如此要求保护，但是来自所要求保护的组合中的一个或多个特征在一些情况下可以从该组合中去除，并且所要求保护的组合可以指向子组合或子组合的变型。

类似地，虽然在附图中以特定顺序描绘了操作，但是这不应被理解为要求这些操作以所示的特定顺序执行或顺次执行、或者要求所有例示的操作被执行，以实现期望的结果。在某些情况下，多任务和并行处理可能是有利的。此外，上述实施例中的各种系统模块和组件的分离不应被理解为在所有实施例中均需要这样的分离，并且应当理解，所描述的程序组件和系统通常可以一起集成在单个软件产品中，或者封装成多个软件产品。

由此，主题的特定实施例已被描述。其他实施例在所附权利要求书的范围以内。在某些情况下，权利要求书中记载的动作可以以不同的顺序执行并且仍实现期望的结果。此外，附图中描绘的处理并非必需所示的特定顺序或顺次顺序，以实现期望的结果。在某些实现中，多任务和并行处理可能是有利的。本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本公开的其它实施方案。本申请旨在涵盖本公开的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本公开的真正范围和精神由下面的权利要求指出。

应当理解的是，本公开并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (10)

1.一种网页截图方法，其特征在于，包括：

确定截图区域中包含的目标网页元素；

执行异步延迟任务，其中，所述异步延迟任务的执行时间不小于计算所述目标网页元素的样式信息所需的时间；

在所述异步延迟任务执行完成后，获取所述目标网页元素的样式信息，并根据所述样式信息生成截图图片。

2.根据权利要求1所述的方法，其特征在于，所述执行异步延迟任务，包括：

复制所述目标网页元素到已生成的内联框架iframe中；

加载异步延迟任务；

执行所述异步延迟任务。

3.根据权利要求2所述的方法，其特征在于，所述复制所述目标网页元素到已生成的iframe中，包括：

采用onclone事件复制所述目标网页元素到已生成的iframe中；

所述加载异步延迟任务，包括：

在所述onclone事件中加载异步延迟任务。

4.根据权利要求2所述的方法，其特征在于，所述异步延迟任务包括：定时器任务；

所述加载异步延迟任务，包括：

采用JavaScript中的Promise对象加载定时器任务，所述定时器任务的执行时间不小于计算所述样式信息所需的时间。

5.根据权利要求4所述的方法，其特征在于，所述异步延迟任务还包括至少一个下述任务：

删除部分所述目标网页元素的任务；

修改所述目标网页元素的任务。

6.一种网页截图装置，其特征在于，包括：

网页元素确定模块，被配置为确定截图区域中包含的目标网页元素；

异步延迟任务处理模块，被配置为执行异步延迟任务，其中，所述异步延迟任务的执行时间不小于计算所述目标网页元素的样式信息所需的时间；

图片生成模块，被配置为在所述异步延迟任务执行完成后，获取所述目标网页元素的样式信息，并根据所述样式信息生成截图图片。

7.根据权利要求6所述的装置，其特征在于，所述异步延迟任务处理模块包括：

克隆子模块，被配置为复制所述目标网页元素到已生成的内联框架iframe中；

加载子模块，被配置为加载异步延迟任务；

执行子模块，被配置为执行所述异步延迟任务。

8.根据权利要求7所述的装置，其特征在于，所述克隆子模块被配置为：

采用onclone事件克隆所述目标网页元素到已生成的iframe中；

所述加载子模块被配置为：

在所述onclone事件中加载异步延迟任务。

9.一种存储介质，其上存储有计算机程序，其特征在于，所述程序被处理器执行时实现权利要求1-5任一项所述方法的步骤。

10.一种终端，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现权利要求1-5任一项所述方法的步骤。