网页截图方法和装置制造方法及图纸

技术编号:15284079 阅读:48 留言:0更新日期:2017-05-06 12:32
本申请公开了一种网页截图方法和装置。其中,该方法包括:获取目标元素框,其中,目标元素框为网页中待截图区域对应的元素框;以及根据目标元素框生成待截图区域的截图。通过本申请,解决了相关技术中对网页的局部区域进行截图时准确性较低的技术问题,进而达到了提高对网页的局部区域进行截图的准确性的效果。

Method and device for detecting web page

The invention discloses a method and a device for detecting web pages. The method comprises the following steps: obtaining a target element frame, wherein, the target element frame is a frame element corresponding to the area to be captured in the web page; and a screenshot is generated according to the target element frame. The utility model solves the technical problem of low accuracy of the local area of the web page in the relevant technology, and further improves the accuracy of the local area of the web page.

【技术实现步骤摘要】

本申请涉及互联网领域,具体而言,涉及一种网页截图方法和装置
技术介绍
对网页进行截图是一种常用的用户需求。有时用户只需要截取网页的一部分,常用的办法是使用截图工具(例如,QQ截图)选定要截取的区域进行截图。在使用截图工具对网页部分区域进行截图时,由于是人工手动选择截取区域,因此很难精确的确定截取区域的大小。如图1所示,需要把图中的矩形框区域进行截取,且不能带有白色边框,使用截图软件进行该操作时,需要用户小心翼翼的进行,才能完成,此外,截取的图片边缘容易产生“白边”等噪音,从而需要使用PhotoShop等图片修改工具进行二次修改。针对相关技术中对网页的局部区域进行截图时准确性较低的问题,目前尚未提出有效的解决方案。
技术实现思路
本申请的主要目的在于提供一种网页截图方法和装置,以解决相关技术中对网页的局部区域进行截图时准确性较低的问题。为了实现上述目的,根据本申请的一个方面,提供了一种网页截图方法。该方法包括:获取目标元素框,其中,目标元素框为网页中待截图区域对应的元素框;以及根据目标元素框生成待截图区域的截图。进一步地,根据目标元素框生成待截图区域的截图包括:获取目标元素框的高度和宽度;获取目标元素框相对于目标设备屏幕的位置,其中,目标设备屏幕为显示网页的设备屏幕;以及根据目标元素框相对于目标设备屏幕的位置、高度和宽度生成待截图区域的截图。进一步地,获取目标元素框相对于目标设备屏幕的位置包括:获取目标元素框相对于目标浏览器的位置,其中,目标浏览器为显示网页的浏览器;获取目标浏览器相对于目标设备屏幕的位置;以及根据目标元素框相对于目标浏览器的位置和目标浏览器相对于目标设备屏幕的位置计算目标元素框相对于目标设备屏幕的位置。进一步地,目标元素框包括第一元素框和第二元素框,其中,第一元素框和第二元素框的组合呈矩形,根据目标元素框生成待截图区域的截图包括:获取第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置,其中,目标设备屏幕为显示网页的设备屏幕;根据第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置计算第一元素框和第二元素框的组合相对于目标设备屏幕的位置;以及根据第一元素框和第二元素框的组合相对于目标设备屏幕的位置生成待截图区域的截图。进一步地,获取目标元素框包括:接收目标HTML元素,其中,目标HTML元素为待截图区域对应的HTML元素;以及根据目标HTML元素获取目标元素框。进一步地,在接收目标HTML元素之前,方法还包括:在接收到截图指令时,显示网页的HTML源文件,其中,截图指令用于指示对网页执行截图操作。进一步地,在接收目标HTML元素之后,方法还包括:在网页中突出显示目标HTML元素对应的区域。为了实现上述目的,根据本申请的另一方面,提供了一种网页截图装置。该装置包括:获取单元,用于获取目标元素框,其中,目标元素框为网页中待截图区域对应的元素框;以及生成单元,用于根据目标元素框生成待截图区域的截图。进一步地,生成单元包括:第一获取模块,用于获取目标元素框的高度和宽度;第二获取模块,用于获取目标元素框相对于目标设备屏幕的位置,其中,目标设备屏幕为显示网页的设备屏幕;以及第一生成模块,用于根据目标元素框相对于目标设备屏幕的位置、高度和宽度生成待截图区域的截图。进一步地,目标元素框包括第一元素框和第二元素框,其中,第一元素框和第二元素框在网页中的显示区域组合呈矩形,生成单元包括:第三获取模块,用于获取第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置,其中,目标设备屏幕为显示网页的设备屏幕;计算模块,用于根据第一元素框相对于目标设备屏幕的位置和第二元素框相对于目标设备屏幕的位置计算第一元素框和第二元素框的组合显示区域相对于目标设备屏幕的位置;以及第二生成模块,用于根据第一元素框和第二元素框的组合显示区域相对于目标设备屏幕的位置生成待截图区域的截图。本申请通过获取目标元素框,其中,目标元素框为网页中待截图区域对应的元素框;以及根据目标元素框生成待截图区域的截图,由于网页的HTML元素通过元素框进行显示,因而直接根据元素框进行网页截图相比于手工框选截图区域进行截图,更能精确的确定截图区域,使得所得到的截图不存在多余的边框,解决了相关技术中对网页的局部区域进行截图时准确性较低的问题,进而达到了提高对网页的局部区域进行截图的准确性的效果。附图说明构成本申请的一部分的附图用来提供对本申请的进一步理解,本申请的示意性实施例及其说明用于解释本申请,并不构成对本申请的不当限定。在附图中:图1是根据相关技术的网页的示意图;图2是根据相关技术的元素框的示意图;图3是根据本申请实施例的网页截图方法的流程图;图4是根据本申请第一实施例的第一元素框和第二元素框组合的示意图;图5是根据本申请第二实施例的第一元素框和第二元素框组合的示意图;以及图6是根据本申请实施例的网页截图装置的示意图。具体实施方式需要说明的是,在不冲突的情况下,本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。为了使本
的人员更好地理解本申请方案,下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分的实施例,而不是全部的实施例。基于本申请中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都应当属于本申请保护的范围。需要说明的是,本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本申请的实施例。此外,术语“包括”和“具有”以及他们的任何变形,意图在于覆盖不排他的包含,例如,包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元,而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。为了便于描述,以下对本申请实施例涉及地几个概念进行说明:HTML元素:网页本身一个超文本标记语言(HyperTextMarkupLanguage,简称为HTML)文件,它是由很多HTML元素(例如html,p,div等)嵌套组成,其中,HTML元素指的是从开始标签至结束标签的所有代码,如下所示:<html><body><p>Thisismyfirstparagraph.</p></body></html>。上述代码中包含三个HTML元素,即p元素、body元素和html元素,其中,p元素定义了HTML文档中的一个段落,该p元素包括一个开始标签<p>和一个结束标签</p>,p元素的元素内容为“Thisismyfirstparagraph”;body元素定义了HTML文档的主体,该body元素拥有一个开始标签<body>和一个结束标签</body>,body元素的元素内容为p元素;html元素定义了整个HTML文档,该html元素拥有一个开始标签&l本文档来自技高网
...
网页截图方法和装置

【技术保护点】
一种网页截图方法,其特征在于,包括:获取目标元素框,其中,所述目标元素框为网页中待截图区域对应的元素框;以及根据所述目标元素框生成所述待截图区域的截图。

【技术特征摘要】
1.一种网页截图方法,其特征在于,包括:获取目标元素框,其中,所述目标元素框为网页中待截图区域对应的元素框;以及根据所述目标元素框生成所述待截图区域的截图。2.根据权利要求1所述的方法,其特征在于,根据所述目标元素框生成所述待截图区域的截图包括:获取所述目标元素框的高度和宽度;获取所述目标元素框相对于目标设备屏幕的位置,其中,所述目标设备屏幕为显示所述网页的设备屏幕;以及根据所述目标元素框相对于目标设备屏幕的位置、所述高度和所述宽度生成所述待截图区域的截图。3.根据权利要求2所述的方法,其特征在于,获取所述目标元素框相对于目标设备屏幕的位置包括:获取所述目标元素框相对于目标浏览器的位置,其中,所述目标浏览器为显示所述网页的浏览器;获取所述目标浏览器相对于所述目标设备屏幕的位置;以及根据所述目标元素框相对于目标浏览器的位置和所述目标浏览器相对于所述目标设备屏幕的位置计算所述目标元素框相对于所述目标设备屏幕的位置。4.根据权利要求1所述的方法,其特征在于,所述目标元素框包括第一元素框和第二元素框,其中,所述第一元素框和所述第二元素框的组合呈矩形,根据所述目标元素框生成所述待截图区域的截图包括:获取所述第一元素框相对于目标设备屏幕的位置和所述第二元素框相对于所述目标设备屏幕的位置,其中,所述目标设备屏幕为显示所述网页的设备屏幕;根据所述第一元素框相对于目标设备屏幕的位置和所述第二元素框相对于所述目标设备屏幕的位置计算所述第一元素框和所述第二元素框的组合相对于所述目标设备屏幕的位置;以及根据所述第一元素框和所述第二元素框的组合相对于所述目标设备屏幕的位置生成所述待截图区域的截图。5.根据权利要求1至4中任一项所述的方法,其特征在于,获取目标元素框包括:接收目标HTML元素,其中,所述目标HTML元素为所述待截图区域对应的H...

【专利技术属性】
技术研发人员:曹志明
申请(专利权)人:北京国双科技有限公司
类型:发明
国别省市:北京;11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1