CN108304118B - 截图方法及装置 - Google Patents

Abstract

本发明公开了一种截图方法及装置。其中，该方法包括：获取网页表单元素，网页表单元素用于使得浏览器在网页上显示与网页表单元素对应的样式；获取用于定义网页表单元素的脚本代码；调用脚本代码，以绘制网页表单元素的内容；将绘制的网页表单元素的内容转化为对应的图片，以完成对网页表单元素的截图操作。本发明解决了相关技术中由于使用图片预先绘制好某些表单元素造成的截图容易出现失真的技术问题。

Description

截图方法及装置

技术领域

本发明涉及网页处理领域，具体而言，涉及一种截图方法及装置。

背景技术

在前端进行当前网页截图，是一种常用的技术手段，现有技术canvas绘图技术是通过获取html dom元素后并且解析dom元素的样式，根据dom元素的样式，在canvas元素上进行绘制，最后将绘制内容转化为图片。在这种情况下，对于常规的dom元素，可以通过css指定样式，canvas绘图技术的出现能够在一定程度上解决js网页截图的问题，但是对于常见的表单元素，显示样式由浏览器渲染，不能通过css指定样式，因此，通过canvas技术实现网页截图时，无法绘制样式由浏览器自行渲染的元素，例如常见的表单元素单选按钮、下拉列表框等。

对于浏览器自行渲染的元素，有一种现有技术方案是预先使用图片绘制好这些元素，在截图时，去服务器端调取这些图片，将这些图片绘制在canvas上。此类表单元素用户可以定义大小，对于使用图片代替的情况，由于图片不是矢量的，绘制完成后可能会失真，另外，此种方式多了与服务器端的交互，在单纯使用前端应用的场景显得十分不便。

针对上述的问题，目前尚未提出有效的解决方案。

发明内容

本发明实施例提供了一种截图方法及装置，以至少解决相关技术中由于使用图片预先绘制好某些表单元素造成的截图容易出现失真的技术问题。

根据本发明实施例的一个方面，提供了一种截图方法，包括：获取网页表单元素，上述网页表单元素用于使浏览器在网页上显示与上述网页表单元素对应的样式；获取用于定义上述网页表单元素的脚本代码；调用上述脚本代码，以绘制上述网页表单元素的内容；将绘制的上述网页表单元素的内容转化为对应的图片，以完成对上述网页表单元素的截图操作。

进一步地，在获取用于定义上述网页表单元素的脚本代码之前，上述方法还包括：判断上述网页表单元素是否是可由层叠样式表定义样式的表单元素；若否，执行获取用于定义上述网页表单元素的脚本代码的步骤，以完成对上述网页表单元素的截图操作。

进一步地，在将绘制的上述网页表单元素的内容转化为对应的图片，以完成对上述网页表单元素的截图操作之前，上述方法还包括：若上述网页表单元素是可由层叠样式表定义样式的表单元素，则在获取网页表单元素之后，解析上述网页表单元素的样式；根据上述网页表单元素的样式的解析结果，绘制上述网页表单元素的内容。

进一步地，调用上述脚本代码，以绘制上述网页表单元素的内容包括：调用上述脚本代码；根据上述脚本代码定义的内容确定上述网页表单元素的属性信息；根据确定出的上述网页表单元素的上述属性信息绘制上述网页表单元素的内容。

进一步地，上述属性信息至少包括：上述网页表单元素的类型、状态、绘制样式和用于显示上述网页表单元素的样式的浏览器。

根据本发明的另一方面，还提供了一种截图装置，包括：第一获取单元，用于获取网页表单元素，上述网页表单元素用于使浏览器在网页上显示与上述网页表单元素对应的样式；第二获取单元，用于获取用于定义上述网页表单元素的脚本代码；调用单元，用于调用上述脚本代码，以绘制上述网页表单元素的内容；转化单元，用于将绘制的上述网页表单元素的内容转化为对应的图片，以完成对上述网页表单元素的截图操作。

进一步地，上述装置还包括：判断单元，用于在获取用于定义上述网页表单元素的脚本代码之前，判断上述网页表单元素是否是可由层叠样式表定义样式的表单元素；执行单元，用于在否的情况下，执行获取用于定义上述网页表单元素的脚本代码的步骤，以完成对上述网页表单元素的截图操作。

进一步地，上述装置还包括：解析单元，用于在上述网页表单元素是可由层叠样式表定义样式的表单元素的情况下，在获取网页表单元素之后，解析上述网页表单元素的样式；绘制单元，用于根据上述网页表单元素的样式的解析结果，绘制上述网页表单元素的内容。

进一步地，上述调用单元包括：调用模块，用于调用上述脚本代码；确定模块，用于根据上述脚本代码定义的内容确定上述网页表单元素的属性信息；绘制模块，用于根据确定出的上述网页表单元素的上述属性信息绘制上述网页表单元素的内容。

进一步地，上述属性信息至少包括：上述网页表单元素的类型、状态、绘制样式和用于显示上述网页表单元素的样式的浏览器。

在本发明实施例中，采用一种截图方法，包括：获取网页表单元素，上述网页表单元素用于使浏览器在网页上显示与上述网页表单元素对应的样式；获取用于定义上述网页表单元素的脚本代码；调用上述脚本代码，以绘制上述网页表单元素的内容；将绘制的上述网页表单元素的内容转化为对应的图片，以完成对上述网页表单元素的截图操作，达到了表单元素截图时截图不失真的目的，从而实现了根据浏览器的不同，预先定义使用javascript代码绘制表单元素，在截图时，可根据实际需要调用这些代码绘制表单元素的技术效果，进而解决了相关技术中由于使用图片预先绘制好某些表单元素造成的截图容易出现失真的技术问题。

附图说明

此处所说明的附图用来提供对本发明的进一步理解，构成本申请的一部分，本发明的示意性实施例及其说明用于解释本发明，并不构成对本发明的不当限定。在附图中：

图1是根据本发明实施例的一种可选的截图方法的流程图；

图2是根据本发明实施例的一种可选的截图装置的示意图。

具体实施方式

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

需要说明的是，本发明的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本发明的实施例能够以除了在这里图示或描述的那些以外的顺序实施。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

实施例1

根据本发明实施例，提供了一种截图方法实施例，需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

图1是根据本发明实施例的一种可选的截图方法的流程图，如图1所示，该方法包括如下步骤：

步骤S102，获取网页表单元素，网页表单元素用于使浏览器在网页上显示与网页表单元素对应的样式；

步骤S104，获取用于定义网页表单元素的脚本代码；

步骤S106，调用脚本代码，以绘制网页表单元素的内容；

步骤S108，将绘制的网页表单元素的内容转化为对应的图片，以完成对网页表单元素的截图操作。

也即，为了实现对网页表单元素截图时图片不失真的目的，首先获取浏览器的网页表单元素，其中，该网页表单元素可以与网页表单元素的样式相对应，对于同一网页表单元素而言，定义时，可以让不同的浏览器在网页上显示不同的样式；在获取网页表单元素后，在对网页表单元素的内容进行绘制前，需要先获取并调用定义该网页表单元素的脚本代码，其中，可以根据浏览器的不同，预先定义使用javascript代码绘制表单元素，在截图时，可根据实际需要，调用这些代码绘制网页表单元素，最后将绘制的网页表单元素的内容转化为对应的图片。

通过上述实施方式，采用一种截图方法，包括：获取网页表单元素，网页表单元素用于使得浏览器在网页上显示与网页表单元素对应的样式；获取用于定义网页表单元素的脚本代码；调用脚本代码，以绘制网页表单元素的内容；将绘制的网页表单元素的内容转化为对应的图片，以完成对网页表单元素的截图操作，达到了表单元素截图时截图不失真的目的，从而实现了根据浏览器的不同，预先定义使用javascript代码绘制表单元素，在截图时，可根据实际需要调用这些代码绘制表单元素的技术效果，进而解决了相关技术中由于使用图片预先绘制好某些表单元素造成的截图容易出现失真的技术问题。

可选地，在获取用于定义网页表单元素的脚本代码之前，方法还包括：判断网页表单元素是否是可由层叠样式表定义样式的表单元素；若否，执行获取用于定义网页表单元素的脚本代码的步骤，以完成对网页表单元素的截图操作。

也即，为了减小定义使用javascript脚本代码绘制表单元素的工作量，可以在获取用于定义网页表单元素的脚本代码前，先判断网页表单元素是不是为可由层叠样式表CSS定义样式的表单元素，如不能由css定义样式的表单元素包括单选按钮(radio)、复选框(checkbox)、下拉列表(select)等，如果判断网页表单元素为不能由css定义样式的表单元素，在这种情况下，先获取并调用定义该网页表单元素的脚本代码，其中，可以根据浏览器的不同，预先定义使用javascript代码绘制表单元素，在截图时，可根据实际需要，调用这些代码绘制网页表单元素，最后绘制的网页表单元素的内容转化为对应的图片。

可选地，在将绘制的网页表单元素的内容转化为对应的图片，以完成对网页表单元素的截图操作之前，方法还包括：若网页表单元素是可由层叠样式表定义样式的表单元素，则在获取网页表单元素之后，解析网页表单元素的样式；根据网页表单元素的样式的解析结果，绘制网页表单元素的内容。

也即，如果判断网页表单元素为可由css定义样式的表单元素，在这种情况下，解析网页表单元素的样式；根据网页表单元素的样式的解析结果，绘制网页表单元素的内容。例如，获取htmldom元素后并且解析dom元素的样式，根据dom元素的样式，在canvas元素上进行绘制，最后将绘制内容转化为图片。

可选地，调用脚本代码，以绘制网页表单元素的内容包括：调用脚本代码；根据脚本代码定义的内容确定网页表单元素的属性信息；根据确定出的网页表单元素的属性信息绘制网页表单元素的内容。可选地，属性信息至少包括：网页表单元素的类型、状态、绘制样式和用于显示网页表单元素的样式的浏览器。

也即，可以根据网页表单元素的属性信息绘制网页表单元素的内容，其中定义的属性信息至少可以是四个属性：type、state、browser、options；Type类型，包括radio、checkbox、select；State，状态，true为选中，false为未选中，其中select元素可忽略；browser:浏览器，因为不同的浏览器显示样式是不一样的，所以需要指定；options,指定绘制样式。此外，具体绘制网页表单元素的内容的定义可以是单元按钮绘制方式，如：未选中状态，为一个带阴影大圆，选中状态为，带阴影的圆内部多一个实心圆。复选框，未选中状态，样式为一个带阴影的正方形，选中状态为正方形中增加一个对勾。下拉列表：稍微复杂，分为边框的绘制、选中文字的绘制和右边下拉三角形的绘制。

实施例2

根据本发明的另一方面，还提供了一种截图装置，图2是根据本发明实施例的一种可选的截图装置的示意图，如图2所示，该装置包括：第一获取单元20，用于获取网页表单元素，网页表单元素用于使浏览器在网页上显示与网页表单元素对应的样式；第二获取单元40，用于获取用于定义网页表单元素的脚本代码；调用单元60，用于调用脚本代码，以绘制网页表单元素的内容；转化单元80，用于将绘制的网页表单元素的内容转化为对应的图片，以完成对网页表单元素的截图操作。

通过上述实施方式，达到了表单元素截图时截图不失真的目的，从而实现了根据浏览器的不同，预先定义使用javascript代码绘制表单元素，在截图时，可根据实际需要调用这些代码绘制表单元素的技术效果，进而解决了相关技术中由于使用图片预先绘制好某些表单元素造成的截图容易出现失真的技术问题。

可选地，装置还包括：判断单元，用于在获取用于定义网页表单元素的脚本代码之前，判断网页表单元素是否是可由层叠样式表定义样式的表单元素；执行单元，用于在否的情况下，执行获取用于定义网页表单元素的脚本代码的步骤，以完成对网页表单元素的截图操作。

可选地，装置还包括：解析单元，用于在网页表单元素是可由层叠样式表定义样式的表单元素的情况下，在获取网页表单元素之后，解析网页表单元素的样式；绘制单元，用于根据网页表单元素的样式的解析结果，绘制网页表单元素的内容。

可选地，调用单元包括：调用模块，用于调用脚本代码；确定模块，用于根据脚本代码定义的内容确定网页表单元素的属性信息；绘制模块，用于根据确定出的网页表单元素的属性信息绘制网页表单元素的内容。

可选地，属性信息至少包括：网页表单元素的类型、状态、绘制样式和用于显示的网页表单元素的样式的浏览器。

需要说明的是，实施例2中装置部分各实施方式与实施例1中方法部分各实施方式相对应的，在此不再赘述。

本发明实施例序号仅仅为了描述，不代表实施例的优劣。

在本发明的实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。

在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。

所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。

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

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

以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (8)

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

获取网页表单元素，所述网页表单元素用于使浏览器在网页上显示与所述网页表单元素对应的样式；

获取用于定义所述网页表单元素的脚本代码；

调用所述脚本代码，以绘制所述网页表单元素的内容；

将绘制的所述网页表单元素的内容转化为对应的图片，以完成对所述网页表单元素的截图操作；

其中，在获取用于定义所述网页表单元素的脚本代码之前，所述方法还包括：判断所述网页表单元素是否是可由层叠样式表定义样式的表单元素；若否，执行获取用于定义所述网页表单元素的脚本代码的步骤，以完成对所述网页表单元素的截图操作。

2.根据权利要求1所述的方法，其特征在于，在将绘制的所述网页表单元素的内容转化为对应的图片，以完成对所述网页表单元素的截图操作之前，所述方法还包括：

若所述网页表单元素是可由层叠样式表定义样式的表单元素，则在获取网页表单元素之后，解析所述网页表单元素的样式；

根据所述网页表单元素的样式的解析结果，绘制所述网页表单元素的内容。

3.根据权利要求1或2所述的方法，其特征在于，调用所述脚本代码，以绘制所述网页表单元素的内容包括：

调用所述脚本代码；

根据所述脚本代码定义的内容确定所述网页表单元素的属性信息；

根据确定出的所述网页表单元素的所述属性信息绘制所述网页表单元素的内容。

4.根据权利要求3所述的方法，其特征在于，所述属性信息至少包括：所述网页表单元素的类型、状态、绘制样式和用于显示所述网页表单元素的样式的浏览器。

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

第一获取单元，用于获取网页表单元素，所述网页表单元素用于使浏览器在网页上显示与所述网页表单元素对应的样式；

第二获取单元，用于获取用于定义所述网页表单元素的脚本代码；

调用单元，用于调用所述脚本代码，以绘制所述网页表单元素的内容；

转化单元，用于将绘制的所述网页表单元素的内容转化为对应的图片，以完成对所述网页表单元素的截图操作；

其中，所述装置还包括：判断单元，用于在获取用于定义所述网页表单元素的脚本代码之前，判断所述网页表单元素是否是可由层叠样式表定义样式的表单元素；执行单元，用于在否的情况下，执行获取用于定义所述网页表单元素的脚本代码的步骤，以完成对所述网页表单元素的截图操作。

6.根据权利要求5所述的装置，其特征在于，所述装置还包括：

解析单元，用于在所述网页表单元素是可由层叠样式表定义样式的表单元素的情况下，在获取网页表单元素之后，解析所述网页表单元素的样式；

绘制单元，用于根据所述网页表单元素的样式的解析结果，绘制所述网页表单元素的内容。

7.根据权利要求5或6所述的装置，其特征在于，所述调用单元包括：

调用模块，用于调用所述脚本代码；

确定模块，用于根据所述脚本代码定义的内容确定所述网页表单元素的属性信息；

绘制模块，用于根据确定出的所述网页表单元素的所述属性信息绘制所述网页表单元素的内容。

8.根据权利要求7所述的装置，其特征在于，所述属性信息至少包括：所述网页表单元素的类型、状态、绘制样式和用于显示所述网页表单元素的样式的浏览器。

Images