网页截图方法和装置与流程
本申请涉及互联网领域，具体而言，涉及一种网页截图方法和装置。
背景技术：
对网页进行截图是一种常用的用户需求。有时用户只需要截取网页的一部分，常用的办法是使用截图工具(例如，QQ截图)选定要截取的区域进行截图。在使用截图工具对网页部分区域进行截图时，由于是人工手动选择截取区域，因此很难精确的确定截取区域的大小。如图1所示，需要把图中的矩形框区域进行截取，且不能带有白色边框，使用截图软件进行该操作时，需要用户小心翼翼的进行，才能完成，此外，截取的图片边缘容易产生“白边”等噪音，从而需要使用PhotoShop等图片修改工具进行二次修改。
针对相关技术中对网页的局部区域进行截图时准确性较低的问题，目前尚未提出有效的解决方案。
技术实现要素：
本申请的主要目的在于提供一种网页截图方法和装置，以解决相关技术中对网页的局部区域进行截图时准确性较低的问题。
为了实现上述目的，根据本申请的一个方面，提供了一种网页截图方法。该方法包括：获取目标元素框，其中，目标元素框为网页中待截图区域对应的元素框；以及根据目标元素框生成待截图区域的截图。
进一步地，根据目标元素框生成待截图区域的截图包括：获取目标元素框的高度和宽度；获取目标元素框相对于目标设备屏幕的位置，其中，目标设备屏幕为显示网页的设备屏幕；以及根据目标元素框相对于目标设备屏幕的位置、高度和宽度生成待截图区域的截图。
进一步地，获取目标元素框相对于目标设备屏幕的位置包括：获取目标元素框相对于目标浏览器的位置，其中，目标浏览器为显示网页的浏览器；获取目标浏览器相对于目标设备屏幕的位置；以及根据目标元素框相对于目标浏览器的位置和目标浏览器相对于目标设备屏幕的位置计算目标元素框相对于目标设备屏幕的位置。
进一步地，目标元素框包括第一元素框和第二元素框，其中，第一元素框和第二 元素框的组合呈矩形，根据目标元素框生成待截图区域的截图包括：获取第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置，其中，目标设备屏幕为显示网页的设备屏幕；根据第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置计算第一元素框和第二元素框的组合相对于目标设备屏幕的位置；以及根据第一元素框和第二元素框的组合相对于目标设备屏幕的位置生成待截图区域的截图。
进一步地，获取目标元素框包括：接收目标HTML元素，其中，目标HTML元素为待截图区域对应的HTML元素；以及根据目标HTML元素获取目标元素框。
进一步地，在接收目标HTML元素之前，方法还包括：在接收到截图指令时，显示网页的HTML源文件，其中，截图指令用于指示对网页执行截图操作。
进一步地，在接收目标HTML元素之后，方法还包括：在网页中突出显示目标HTML元素对应的区域。
为了实现上述目的，根据本申请的另一方面，提供了一种网页截图装置。该装置包括：获取单元，用于获取目标元素框，其中，目标元素框为网页中待截图区域对应的元素框；以及生成单元，用于根据目标元素框生成待截图区域的截图。
进一步地，生成单元包括：第一获取模块，用于获取目标元素框的高度和宽度；第二获取模块，用于获取目标元素框相对于目标设备屏幕的位置，其中，目标设备屏幕为显示网页的设备屏幕；以及第一生成模块，用于根据目标元素框相对于目标设备屏幕的位置、高度和宽度生成待截图区域的截图。
进一步地，目标元素框包括第一元素框和第二元素框，其中，第一元素框和第二元素框在网页中的显示区域组合呈矩形，生成单元包括：第三获取模块，用于获取第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置，其中，目标设备屏幕为显示网页的设备屏幕；计算模块，用于根据第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置计算第一元素框和第二元素框的组合显示区域相对于目标设备屏幕的位置；以及第二生成模块，用于根据第一元素框和第二元素框的组合显示区域相对于目标设备屏幕的位置生成待截图区域的截图。
本申请通过获取目标元素框，其中，目标元素框为网页中待截图区域对应的元素框；以及根据目标元素框生成待截图区域的截图，由于网页的HTML元素通过元素框进行显示，因而直接根据元素框进行网页截图相比于手工框选截图区域进行截图，更能精确的确定截图区域，使得所得到的截图不存在多余的边框，解决了相关技术中对网页的局部区域进行截图时准确性较低的问题，进而达到了提高对网页的局部区域进行截图的准确性的效果。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据相关技术的网页的示意图；
图2是根据相关技术的元素框的示意图；
图3是根据本申请实施例的网页截图方法的流程图；
图4是根据本申请第一实施例的第一元素框和第二元素框组合的示意图；
图5是根据本申请第二实施例的第一元素框和第二元素框组合的示意图；以及
图6是根据本申请实施例的网页截图装置的示意图。
具体实施方式
需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了便于描述，以下对本申请实施例涉及地几个概念进行说明：
HTML元素：网页本身一个超文本标记语言(Hyper Text Markup Language，简称为HTML)文件，它是由很多HTML元素(例如html，p，div等)嵌套组成，其中，HTML元素指的是从开始标签至结束标签的所有代码，如下所示：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>。
上述代码中包含三个HTML元素，即p元素、body元素和html元素，其中，p元素定义了HTML文档中的一个段落，该p元素包括一个开始标签<p>和一个结束标签</p>，p元素的元素内容为“This is my first paragraph”；body元素定义了HTML文档的主体，该body元素拥有一个开始标签<body>和一个结束标签</body>，body元素的元素内容为p元素；html元素定义了整个HTML文档，该html元素拥有一个开始标签<html>和一个结束标签</html>，html元素的元素内容为body元素。
元素框：浏览器对网页的渲染，即是对这些HTML元素的渲染，层叠样式表(Cascading Style Sheets，简称为CSS)是一种定义如何显示HTML元素的语言，在CSS中，通过矩形框来显示每一个HTML元素，该用于显示HTML元素的矩形框即元素框，如图2所示。在图2中，元素框的最内部分是元素内容，直接包围元素内容的是内边距，内边距呈现了元素的背景，内边距的边缘是边框，边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。
框模型：框模型定义了元素框处理元素内容、内边距、边框和外边距的方式。
根据本申请实施例，提供了一种网页截图方法。图3是根据本申请实施例的网页截图方法的流程图，如图3所示，该方法包括如下的步骤S102至步骤S104：
步骤S102，获取目标元素框，其中，目标元素框为网页中待截图区域对应的元素框。
网页的HTML元素是通过元素框进行显示的，即网页的显示是由许多元素框嵌套组成。本申请实施例通过获取用户选择的目标元素框，从而可以基于该目标元素框自动确定待截图区域的位置信息。可选地，获取目标元素框包括：接收目标HTML元素，其中，目标HTML元素为待截图区域对应的HTML元素；以及根据目标HTML元素获取目标元素框。
在用户需要对网页的某个局部区域截图时，可以选择需要截图区域(即待截图区域)对应的HTML元素，具体地，可以在网页的边缘位置(例如，底部区域)显示网页的HTML源文件，用户可以通过鼠标选择需要截图的HTML元素(即目标HTML元素)。优选地，也可以在网页上设置一个确定按钮，在用户选择某个HTML元素之 后，一旦用户点击确定按钮则将该HTML元素作为目标HTML元素，如果用户在点击确定按钮之前选择了多个HTML元素，则可以将最近一次选择的HTML元素作为目标HTML元素，也可以将之前选择的多个HTML元素均作为目标HTML元素。
由于网页的HTML元素是通过元素框进行显示的，因此，在得到目标HTML元素即可以得到该目标HTML元素对应的元素框，即目标元素框。
优选地，在接收目标HTML元素之前，该方法还包括：在接收到截图指令时，显示网页的HTML源文件，其中，截图指令用于指示对网页执行截图操作。
本申请实施例可以预先在网页上设置一个截图按钮，当用户触发该截图按钮时(即接收到截图指令)，显示当前网页的HTML源文件。可选地，也可以是在用户按下某个键时显示网页的HTML源文件，例如，在用户按下F12键时显示该网页的HTML源文件界面。
优选地，为了让用户能够直观地查看当前选择的HTML元素在网页的显示区域，在接收目标HTML元素之后，该方法还包括：在网页中突出显示目标HTML元素对应的区域。
本申请实施例在用户选择目标HTML元素之后，将网页中突出显示目标HTML元素对应的区域，例如，将目标HTML元素对应的区域背景设置为蓝色，或是通过一个红色框框选出目标HTML元素对应的区域等，使得用户可以直观查看到目标HTML元素在网页中对应的区域，从而可以避免用户选取的HTML元素与需要截取的网页区域不对应，导致截取到的图片内容不是用户需要截取的网页内容。
步骤S104，根据目标元素框生成待截图区域的截图。
在获取到目标元素框后，即可基于目标元素框绘制该待截图区域，并保存为图片。由于本申请实施例中网页截图区域的位置信息是根据CSS框模型自动获取的，相比于手工框选截图区域，本申请实施例获取到的截图区域的位置信息更为准确。
本申请实施例通过获取目标元素框，其中，目标元素框为网页中待截图区域对应的元素框；以及根据目标元素框生成待截图区域的截图，由于网页的HTML元素通过元素框进行显示，因而直接根据元素框进行网页截图相比于手工框选截图区域进行截图，更能精确的确定截图区域，使得所得到的截图不存在多余的边框，解决了相关技术中对网页的局部区域进行截图时准确性较低的问题，进而达到了提高对网页的局部区域进行截图的准确性的效果。
可选地，根据目标元素框生成待截图区域的截图包括：获取目标元素框的高度和宽度；获取目标元素框相对于目标设备屏幕的位置，其中，目标设备屏幕为显示网页 的设备屏幕；以及根据目标元素框相对于目标设备屏幕的位置、高度和宽度生成待截图区域的截图。
在获取目标元素框相对于目标屏幕的位置时，可以任意选定参考点，例如，可以取目标屏幕的左上角顶点作为参考点来确定目标元素框的位置，也可以是取目标屏幕的其他点(例如，中心点，右上角顶点等)作为参考点来确定目标元素框的位置。
可选地，获取目标元素框相对于目标设备屏幕的位置包括：获取目标元素框相对于目标浏览器的位置，其中，目标浏览器为显示网页的浏览器；获取目标浏览器相对于目标设备屏幕的位置；以及根据目标元素框相对于目标浏览器的位置和目标浏览器相对于目标设备屏幕的位置计算目标元素框相对于目标设备屏幕的位置。
例如，目标元素框的左上角顶点相对于目标浏览器的左上角顶点的坐标为(400，300)，目标浏览器的左上角顶点相对于目标屏幕的左上角顶点的坐标为(10，10)，则目标元素框的左上角顶点相对于目标屏幕的左上角顶点的坐标为(410，310)。
需要说明的是，本申请实施例可以通过调用浏览器的API快速获取到目标元素框的高度和宽度以及目标元素框相对于目标浏览器的位置和目标浏览器相对于目标屏幕的位置。
本申请实施例在获取到目标元素框相对于目标屏幕的位置、目标元素框的高度和目标元素框的宽度之后，可以调用操作系统API绘制待截图区域，并保存为图片。
优选地，为了便于用户能够同时截取多个元素框对应的网页区域，目标元素框包括第一元素框和第二元素框，其中，第一元素框和第二元素框的组合呈矩形，根据目标元素框生成待截图区域的截图包括：获取第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置，其中，目标设备屏幕为显示网页的设备屏幕；根据第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置计算第一元素框和第二元素框的组合相对于目标设备屏幕的位置；以及根据第一元素框和第二元素框的组合相对于目标设备屏幕的位置生成待截图区域的截图。
为了避免截取到的网页区域存在多余的边框，本申请实施例的第一元素框和第二元素框的组合需为一个矩形，如图4所示，第一元素框和第二元素框的上下边框对齐，或是，如图5所示，第一元素框和第二元素框的左右边框对齐。
具体地，在获取第一元素框和第二元素框之后，可以获取第一元素框和第二元素框相对于目标设备屏幕的位置，例如，第一元素框左上角和右下角相对于目标设备屏幕的左上角的坐标，第二元素框左上角和右下角相对于目标设备屏幕的左上角的坐标，或是，第一元素框的四个角点相对于目标设备屏幕的左上角的坐标，第二元素框的四个角点相对于目标设备屏幕的左上角的坐标。在得到第一元素框和第二元素框相对于 目标设备屏幕的位置之后，即可以计算得到第一元素框和第二元素框的组合相对于目标设备屏幕的位置，例如，第一元素框左上角和右下角相对于目标设备屏幕的左上角的坐标以及第二元素框左上角和右下角相对于目标设备屏幕的左上角的坐标计算第一元素框和第二元素框的组合以目标设备屏幕的左上角为参考点时，其最左边、最上边、最右边和最下边四个数值，或是第一元素框和第二元素框的组合的四个角点相对于目标设备屏幕的左上角的坐标，从而可以定位目标设备屏幕中的矩形区域，该矩形区域即第一元素框和第二元素框的组合，此时，就可以调用操作系统API绘制该矩形区域，并保存成图片。
例如，图4中，以目标设备屏幕的左上角作为坐标系的(0，0)点，第一元素框的左上角和右下角的坐位分别为(100，100)和(1000，1000)，第二元素框的左上角和右下角的坐位分别为(1010，100)和(2100，1000)，则可以得到第一元素框和第二元素框的最左边、最上边、最右边和最下边四个数值分别为100、100、2100和1000，在得到第一元素框和第二元素框的最左边、最上边、最右边和最下边四个数值之后即可以在目标设备屏幕中定位一个矩形区域，从而可以调用操作系统API绘制该矩形区域并保存为图片，该图片即网页中第一元素框和第二元素框组合的截图。
需要说明的是，本申请实施例的目标元素框并不限于仅包含第一元素框和第二元素框，本申请实施例的目标元素框可以包含任意多个可以组合成矩形的元素框，只要确定多个元素框组合成的矩形框相对于目标设备屏幕的位置即可以得到多个元素框组合成的矩形框的截图。
此外，本申请实施例的网页截图方法可以是通过一个外部软件实现，也可以是通过浏览器插件(例如，谷歌浏览器、火狐浏览器和IE浏览器都支持插件开发)来实现，在外部软件或浏览器插件的内部包含一些位置计算转换方法和调用操作系统API生成图片的方法。具体操作可以是提供给用户一个网页的HTML源文件界面，用户可以通过选择HTML元素来确定自己想要截取的框模型，例如，可以谷歌浏览器的开发者工具，打开谷歌浏览器，按下F12键，既可以显示网页的HTML源文件，然后提供用户一个截图按钮，一旦用户点击该截图按钮，就可以将选择的HTML元素生成图片。
由上述描述可知，本申请实施例通过CSS框模型对网页进行截图可以获取用户要截取网页区域的精确位置，避免了用户手动选择区域产生的误差。
需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
根据本申请实施例的另一方面，提供了一种网页截图装置，该网页截图装置可以 用于执行本申请实施例的网页截图方法，本申请实施例的网页截图方法也可以通过本申请实施例的网页截图装置来执行。
图6是根据本申请实施例的网页截图装置的示意图，如图6所示，该装置包括：获取单元10和生成单元20。
获取单元10，用于获取目标元素框，其中，目标元素框为网页中待截图区域对应的元素框。
网页的HTML元素是通过元素框进行显示的，网页的显示是由许多元素框嵌套组成。本申请实施例通过获取用户选择的目标元素框，并基于该目标元素框进行后续的截图操作。具体地，获取目标元素框可以是通过接收目标HTML元素，其中，目标HTML元素为待截图区域对应的HTML元素，并根据目标HTML元素获取目标元素框。
在用户需要对网页的某个局部区域截图时，可以选择需要截图区域(即待截图区域)对应的HTML元素，具体地，可以在网页的边缘位置(例如，底部区域)显示网页的HTML源文件，用户可以通过鼠标选择需要截图的HTML元素(即目标HTML元素)。优选地，也可以在网页上设置一个确定按钮，在用户选择某个HTML元素之后，一旦用户点击确定按钮则将该HTML元素作为目标HTML元素，如果用户在点击确定按钮之前选择了多个HTML元素，则可以将最近一次选择的HTML元素作为目标HTML元素，也可以将之前选择的多个HTML元素均作为目标HTML元素。
由于网页的HTML元素是通过元素框进行显示的，因此，在得到目标HTML元素即可以得到该目标HTML元素对应的元素框，即目标元素框。
生成单元20，用于根据目标元素框生成待截图区域的截图。
本申请实施例通过获取单元10获取目标元素框，其中，目标元素框为网页中待截图区域对应的元素框；以及生成单元20根据目标元素框生成待截图区域的截图，由于网页的HTML元素通过元素框进行显示，因而直接根据元素框进行网页截图相比于手工框选截图区域进行截图，更能精确的确定截图区域，使得所得到的截图不存在多余的边框，解决了相关技术中对网页的局部区域进行截图时准确性较低的问题，进而达到了提高对网页的局部区域进行截图的准确性的效果。
可选地，生成单元20包括：第一获取模块，用于获取目标元素框的高度和宽度；第二获取模块，用于获取目标元素框相对于目标设备屏幕的位置，其中，目标设备屏幕为显示网页的设备屏幕；以及第一生成模块，用于根据目标元素框相对于目标设备屏幕的位置、高度和宽度生成待截图区域的截图。
可选地，目标元素框包括第一元素框和第二元素框，其中，第一元素框和第二元素框在网页中的显示区域组合呈矩形，生成单元20包括：第三获取模块，用于获取第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置，其中，目标设备屏幕为显示网页的设备屏幕；计算模块，用于根据第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置计算第一元素框和第二元素框的组合显示区域相对于目标设备屏幕的位置；以及第二生成模块，用于根据第一元素框和第二元素框的组合显示区域相对于目标设备屏幕的位置生成待截图区域的截图。
所述网页截图装置包括处理器和存储器，上述获取单元和生成单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来进行网页局部区域的截图。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。
本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：获取目标元素框，其中，目标元素框为网页中待截图区域对应的元素框；以及根据目标元素框生成待截图区域的截图。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。
- 还没有人留言评论。精彩留言会获得点赞！