CN106610831B - 网页截图方法和装置 - Google Patents
网页截图方法和装置 Download PDFInfo
- Publication number
- CN106610831B CN106610831B CN201510703620.6A CN201510703620A CN106610831B CN 106610831 B CN106610831 B CN 106610831B CN 201510703620 A CN201510703620 A CN 201510703620A CN 106610831 B CN106610831 B CN 106610831B
- Authority
- CN
- China
- Prior art keywords
- target
- frame
- screenshot
- html element
- height
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Expired - Fee Related
Links
- 238000000034 method Methods 0.000 title claims abstract description 45
- 238000005096 rolling process Methods 0.000 claims abstract description 46
- 230000000007 visual effect Effects 0.000 claims description 26
- 238000005516 engineering process Methods 0.000 abstract description 6
- 238000010586 diagram Methods 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 230000004048 modification Effects 0.000 description 4
- 230000008878 coupling Effects 0.000 description 3
- 238000010168 coupling process Methods 0.000 description 3
- 238000005859 coupling reaction Methods 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 238000004891 communication Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 238000012545 processing Methods 0.000 description 2
- 238000009877 rendering Methods 0.000 description 2
- 238000013459 approach Methods 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000006243 chemical reaction Methods 0.000 description 1
- 238000004590 computer program Methods 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
Images
Landscapes
- User Interface Of Digital Computer (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请公开了一种网页截图方法和装置。其中，该方法包括：接收目标HTML元素，其中，目标HTML元素为网页中待截图区域对应的HTML元素；判断目标HTML元素是否是滚动视图；在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图；以及拼接多个截图，作为待截图区域的截图。本申请解决了相关技术中无法对网页中滚动视图区域进行截图的技术问题。
Description
技术领域
本申请涉及互联网领域，具体而言，涉及一种网页截图方法和装置。
背景技术
对网页进行截图是一种常用的用户需求。有时用户只需要截取网页的一部分，常用的办法是使用截图工具(例如，QQ截图)选定要截取的区域进行截图。在使用截图工具对网页部分区域进行截图时，由于是人工手动选择截取区域，因此很难精确的确定截取区域的大小。如图1所示，需要把图中的矩形框区域进行截取，且不能带有白色边框，使用截图软件进行该操作时，需要用户小心翼翼的进行，才能完成，此外，截取的图片边缘容易产生“白边”等噪音，从而需要使用PhotoShop等图片修改工具进行二次修改。
有些网页的局部区域是一块可滚动区域，如图1中的矩形框区域，由于数据项太多，这里使用了滚动视图，可以使用鼠标移动滚动条进行滚动查看。在这种情况下，如果需要截取图1中滚动试图中的所有内容，现有的截图软件无法实现。
针对相关技术中无法对网页中滚动视图区域进行截图的问题，目前尚未提出有效的解决方案。
发明内容
本申请的主要目的在于提供一种网页截图方法和装置，以解决相关技术中无法对网页中滚动视图区域进行截图的问题。
为了实现上述目的，根据本申请的一个方面，提供了一种网页截图方法。该方法包括：接收目标HTML元素，其中，目标HTML元素为网页中待截图区域对应的HTML元素；判断目标HTML元素是否是滚动视图；在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图；以及拼接多个截图，作为待截图区域的截图。
进一步地，在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图包括：对滚动前的目标HTML元素的可视区域进行截图；以及每按照预设距离滚动一次目标HTML元素，并对滚动后的目标HTML元素的可视区域进行一次截图，直至目标HTML元素滚动至最底部。
进一步地，分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图包括：获取目标元素框的高度和宽度，其中，目标元素框为显示目标HTML元素的元素框；获取目标元素框相对于目标屏幕的位置，其中，目标屏幕为显示网页的屏幕；以及根据目标元素框相对于目标屏幕的位置、高度和宽度生成目标HTML元素的可视区域的截图。
进一步地，判断目标HTML元素是否是滚动视图包括：获取目标元素框的高度和宽度与目标元素框内框的高度和宽度，其中，目标元素框为显示目标HTML元素的元素框，目标元素框内框为目标元素框中用于显示目标HTML元素的元素内容的区域；分别比较目标元素框的高度和内框的高度，以及目标元素框的宽度和内框的宽度；如果目标元素框的高度小于内框的高度，和/或目标元素框的宽度小于内框的宽度，则确定目标HTML元素是滚动视图；以及如果目标元素框的高度不小于内框的高度且目标元素框的宽度不小于内框的宽度，则确定目标HTML元素不是滚动视图。
进一步地，在接收目标HTML元素之前，该方法还包括：在接收到截图指令时，显示网页的HTML源文件，其中，截图指令用于指示对网页执行截图操作。
进一步地，在接收目标HTML元素之后，该方法还包括：在网页中突出显示目标HTML元素对应的区域。
为了实现上述目的，根据本申请的另一方面，提供了一种网页截图装置。该装置包括：接收单元，用于接收目标HTML元素，其中，目标HTML元素为网页中待截图区域对应的HTML元素；判断单元，用于判断目标HTML元素是否是滚动视图；截图单元，用于在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图；以及拼接单元，用于拼接多个截图，作为待截图区域的截图。
进一步地，截图单元包括：第一截图模块，用于对滚动前的目标HTML元素的可视区域进行截图；以及第二截图模块，用于每按照预设距离滚动一次目标HTML元素，并对滚动后的目标HTML元素的可视区域进行一次截图，直至目标HTML元素滚动至最底部。
进一步地，截图单元包括：第一获取模块，用于获取目标元素框的高度和宽度，其中，目标元素框为显示目标HTML元素的元素框；第二获取模块，用于获取目标元素框相对于目标屏幕的位置，其中，目标屏幕为显示网页的屏幕；以及生成模块，用于根据目标元素框相对于目标屏幕的位置、高度和宽度生成目标HTML元素的可视区域的截图。
进一步地，判断单元包括：第三获取模块，用于获取目标元素框的高度和宽度与目标元素框内框的高度和宽度，其中，目标元素框为显示目标HTML元素的元素框，目标元素框内框为目标元素框中用于显示目标HTML元素的元素内容的区域；比较模块，用于分别比较目标元素框的高度和内框的高度，以及目标元素框的宽度和内框的宽度；以及确定模块，用于在目标元素框的高度小于内框的高度，和/或目标元素框的宽度小于内框的宽度时，则确定目标HTML元素是滚动视图，在目标元素框的高度不小于内框的高度且目标元素框的宽度不小于内框的宽度时，则确定目标HTML元素不是滚动视图。
本申请通过接收目标HTML元素，其中，目标HTML元素为网页中待截图区域对应的HTML元素；判断目标HTML元素是否是滚动视图；在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图；以及拼接多个截图，作为待截图区域的截图，解决了相关技术中无法对网页中滚动视图区域进行截图的问题，进而达到了截取网页中滚动视图区域的所有内容的效果。
附图说明
构成本申请的一部分的附图用来提供对本申请的进一步理解，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1是根据相关技术的网页滚动区域的示意图；
图2是根据相关技术的元素框的示意图；
图3是根据本申请第一实施例的网页截图方法的流程图；
图4是根据本申请第二实施例的网页截图方法的流程图；以及
图5是根据本申请实施例的网页截图装置的示意图。
具体实施方式
需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。
为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。
需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了便于描述，以下对本申请实施例涉及地几个概念进行说明：
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，接收目标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，判断目标HTML元素是否是滚动视图。
如果HTML元素的元素内容的高度大于元素框边框的高度或是元素内容的宽度大于元素框边框的宽度，则用户需要滑动滚动条以查看全部的元素内容。
可选地，判断目标HTML元素是否是滚动视图包括：获取目标元素框的高度和宽度与目标元素框内框的高度和宽度，其中，目标元素框为显示目标HTML元素的元素框，目标元素框内框为目标元素框中用于显示目标HTML元素的元素内容的区域；分别比较目标元素框的高度和内框的高度，以及目标元素框的宽度和内框的宽度；如果目标元素框的高度小于内框的高度，和/或目标元素框的宽度小于内框的宽度，则确定目标HTML元素是滚动视图；以及如果目标元素框的高度不小于内框的高度且目标元素框的宽度不小于内框的宽度，则确定目标HTML元素不是滚动视图。
如图2所示，为了便于描述，本申请实施例将元素框中用于显示元素内容的区域作为元素框内框。
具体地，可以通过调用浏览器的API快速获取到目标元素框的高度和宽度以及目标元素框内框的高度和宽度，并分别比较目标元素框的高度和内框的高度，以及目标元素框的宽度和内框的宽度，如果目标元素框的高度小于内框的高度，或者目标元素框的宽度小于内框的宽度，则说明当前目标元素框无法完全显示目标HTML元素的元素内容，即目标HTML元素是滚动视图，如果目标元素框的高度不小于内框的高度且目标元素框的宽度不小于内框的宽度，则说明当前目标元素框能够完全显示目标HTML元素的元素内容，即目标HTML元素不是滚动视图。
步骤S106，在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图。
可选地，在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图包括：对滚动前的目标HTML元素的可视区域进行截图；以及每按照预设距离滚动一次目标HTML元素，并对滚动后的目标HTML元素的可视区域进行一次截图，直至目标HTML元素滚动至最底部。
具体地，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图可以包括如下步骤：
步骤1，对滚动前的目标HTML元素的可视区域进行截图。
由于目标元素框无法完全显示目标HTML元素的元素内容，因此每次仅能显示局部的元素内容。上述滚动前的目标HTML元素的可视区域是指滚动前显示在目标元素框的元素内容。
步骤2，按照预设移动距离滚动目标HTML元素。
具体地，如果目标HTML元素是纵向滚动视图，则预设移动距离可以是目标元素框的高度，如果目标HTML元素是横向滚动视图，则预设移动距离可以是目标元素框的宽度，如果目标HTML元素同时是横向滚动视图和纵向滚动视图，则预设移动距离同时包括横向移动距离和纵向移动距离，其中，横向移动距离可以是目标元素框的宽度，纵向移动距离可以是目标元素框的高度。
步骤3，对滚动后的目标HTML元素的可视区域进行截图。
步骤4，重复执行步骤2至步骤3直至目标HTML元素滚动至最底部。
优选地，分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图包括：获取目标元素框的高度和宽度，其中，目标元素框为显示目标HTML元素的元素框；获取目标元素框相对于目标屏幕的位置，其中，目标屏幕为显示网页的屏幕；以及根据目标元素框相对于目标屏幕的位置、高度和宽度生成目标HTML元素的可视区域的截图。
在获取目标元素框相对于目标屏幕的位置时，可以任意选定参考点，例如，可以取目标屏幕的左上角顶点作为参考点来确定目标元素框的位置，也可以是取目标屏幕的其他点(例如，中心点，右上角顶点等)作为参考点来确定目标元素框的位置。
具体地，获取目标元素框相对于目标屏幕的位置可以包括：获取目标元素框相对于目标浏览器的位置，其中，目标浏览器为显示网页的浏览器；获取目标浏览器相对于目标屏幕的位置；以及根据目标元素框相对于目标浏览器的位置和目标浏览器相对于目标屏幕的位置计算目标元素框相对于目标屏幕的位置。
例如，目标元素框的左上角顶点相对于目标浏览器的左上角顶点的坐标为(400，300)，目标浏览器的左上角顶点相对于目标屏幕的左上角顶点的坐标为(10，10)，则目标元素框的左上角顶点相对于目标屏幕的左上角顶点的坐标为(410，310)。
需要说明的是，本申请实施例可以通过调用浏览器的API快速获取到目标元素框的高度和宽度以及目标元素框相对于目标浏览器的位置和目标浏览器相对于目标屏幕的位置。
本申请实施例在获取到目标元素框相对于目标屏幕的位置、目标元素框的高度和目标元素框的宽度之后，可以调用操作系统API绘制当前目标HTML元素的可视区域的图像。
步骤S108，拼接多个截图，作为待截图区域的截图。
通过上述步骤S106可以得到多个截图，多个截图分别对应于目标HTML元素的不同元素内容。本申请实施例可以按照上述多个截图的生成顺序拼接上述多个截图，并将拼接后的图像作为待截图区域的截图。
本申请实施例通过接收目标HTML元素，其中，目标HTML元素为网页中待截图区域对应的HTML元素；判断目标HTML元素是否是滚动视图；在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图；以及拼接多个截图，作为待截图区域的截图，解决了相关技术中无法对网页中滚动视图区域进行截图的问题，进而达到了截取网页中滚动视图区域的所有内容的效果。
需要说明的是，如果上述目标HTML元素不是滚动视图，则可以直根据根据目标元素框相对于目标屏幕的位置、目标元素框的高度和目标元素框宽的度生成目标HTML元素的截图。
图4是根据本申请第二实施例的网页截图方法的流程图。如图4所示，该方法包括如下步骤：
步骤S202：用户选择要截取的HTML元素。
具体地，可以给用户一个网页的HTML源文件界面，用户可以通过选择HTML元素(即目标HTML元素)来确定自己想要截取的元素框。
步骤S204：获取HTML元素相对于浏览器左上角的位置与HTML元素的高度和宽度。
步骤S206：计算HTML元素相对于屏幕左上角的位置。
具体地，可以获取浏览器相对于屏幕左上角的位置，并根据HTML元素相对于浏览器左上角的位置和浏览器相对于屏幕左上角的位置来计算HTML元素相对于屏幕左上角的位置。
步骤S208：对HTML元素进行截图。
具体地，可以根据HTML元素相对于屏幕左上角的位置、HTML元素的高度和宽度对对HTML元素进行截图，例如，调用操作系统API绘制HTML元素的图片。
需要说明的是，在调用操作系统API对HTML元素进行截图之前或之后，需要判断HTML元素是否为滚动视图，如果判断出该HTML元素是滚动视图，则执行后续步骤S210，否则，直接输出通过步骤S208得到的截图。
步骤S210：判断HTML元素是否到达滚动视图最底部。
如果HTML元素未到达滚动视图最底部，则执行步骤S212，否则，执行步骤S214。
步骤S212：以HTML元素可视高度滚动HTML元素。
HTML元素可视高度可以是HTML元素对应的元素框的高度。
步骤S214：对截取的所有HTML元素部分截图进行拼接，保存成一种图片。
步骤S216：导出拼接后的图片。
需要说明的是，本申请实施例是以HTML元素为纵向滚动视图为例进行说明的，HTML元素为其他形式的滚动视图(例如，横向滚动视图)时进行截图的方法与上述方法对应，在此不再赘述。另外，上述步骤S202至步骤S214中的HTML元素即本申请实施例的目标HTML元素。
此外，本申请实施例的网页截图方法可以是通过一个外部软件实现，也可以是通过浏览器插件(例如，谷歌浏览器、火狐浏览器和IE浏览器都支持插件开发)来实现，在外部软件或浏览器插件的内部包含一些位置计算转换方法和调用操作系统API生成图片的方法。具体操作可以是提供给用户一个网页的HTML源文件界面，用户可以通过选择HTML元素来确定自己想要截取的框模型，例如，可以谷歌浏览器的开发者工具，打开谷歌浏览器，按下F12键，既可以显示网页的HTML源文件，然后提供用户一个截图按钮，一旦用户点击该截图按钮，就可以将选择的HTML元素生成图片。
由上述描述可知，本申请实施例通过CSS框模型和浏览器的API可以实现常用截图软件不具备的对滚动的HTML元素进行截图的功能。
需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。
根据本申请实施例的另一方面，提供了一种网页截图装置，该网页截图装置可以用于执行本申请实施例的网页截图方法，本申请实施例的网页截图方法也可以通过本申请实施例的网页截图装置来执行。
图5是根据本申请实施例的网页截图装置的示意图，如图5所示，该装置包括：接收单元10、判断单元20、截图单元30和拼接单元40。
接收单元10，用于接收目标HTML元素，其中，目标HTML元素为网页中待截图区域对应的HTML元素。
判断单元20，用于判断目标HTML元素是否是滚动视图。
可选地，判断单元20包括：第三获取模块，用于获取目标元素框的高度和宽度与目标元素框内框的高度和宽度，其中，目标元素框为显示目标HTML元素的元素框；比较模块，用于分别比较目标元素框的高度和内框的高度，以及目标元素框的宽度和内框的宽度；以及确定模块，用于在目标元素框的高度小于内框的高度，和/或目标元素框的宽度小于内框的宽度时，则确定目标HTML元素是滚动视图，在目标元素框的高度不小于内框的高度且目标元素框的宽度不小于内框的宽度时，则确定目标HTML元素不是滚动视图。
截图单元30，用于在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图。
可选地，截图单元30包括：第一截图模块，用于对滚动前的目标HTML元素的可视区域进行截图；以及第二截图模块，用于每按照预设距离滚动一次目标HTML元素，并对滚动后的目标HTML元素的可视区域进行一次截图，直至目标HTML元素滚动至最底部。
可选地，截图单元40包括：第一获取模块，用于获取目标元素框的高度和宽度，其中，目标元素框为显示目标HTML元素的元素框；第二获取模块，用于获取目标元素框相对于目标屏幕的位置，其中，目标屏幕为显示网页的屏幕；以及生成模块，用于根据目标元素框相对于目标屏幕的位置、高度和宽度生成目标HTML元素的可视区域的截图。
拼接单元40，用于拼接多个截图，作为待截图区域的截图。
本申请实施例通过接收单元10接收目标HTML元素，其中，目标HTML元素为网页中待截图区域对应的HTML元素；判断单元20判断目标HTML元素是否是滚动视图；截图单元30在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图；以及拼接单元40拼接多个截图，作为待截图区域的截图，解决了相关技术中无法对网页中滚动视图区域进行截图的问题，进而达到了截取网页中滚动视图区域的所有内容的效果。
优选地，该装置还包括：第一显示单元，用于在接收到截图指令时，显示网页的HTML源文件，其中，截图指令用于指示对网页执行截图操作。
优选地，该装置还包括：第二显示单元，用于在网页中突出显示目标HTML元素对应的区域。
所述网页截图装置包括处理器和存储器，上述接收单元、判断单元、截图单元和拼接单元等均作为程序单元存储在存储器中，由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核，由内核去存储器中调取相应的程序单元。内核可以设置一个或以上，通过调整内核参数来对网页滚动区域进行截图。
存储器可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)，存储器包括至少一个存储芯片。
本申请还提供了一种计算机程序产品，当在数据处理设备上执行时，适于执行初始化有如下方法步骤的程序代码：接收目标HTML元素，其中，目标HTML元素为网页中待截图区域对应的HTML元素；判断目标HTML元素是否是滚动视图；在判断出目标HTML元素是滚动视图时，滚动目标HTML元素，并分别对滚动前后的目标HTML元素的可视区域进行截图，得到多个截图；以及拼接多个截图，作为待截图区域的截图。
上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。
在本申请的上述实施例中，对各个实施例的描述都各有侧重，某个实施例中没有详述的部分，可以参见其他实施例的相关描述。
在本申请所提供的几个实施例中，应该理解到，所揭露的技术内容，可通过其它的方式实现。其中，以上所描述的装置实施例仅仅是示意性的，例如所述单元的划分，可以为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，单元或模块的间接耦合或通信连接，可以是电性或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本申请各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可为个人计算机、服务器或者网络设备等)执行本申请各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述仅是本申请的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本申请原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本申请的保护范围。
Claims (9)
1.一种网页截图方法，其特征在于，包括：
接收目标HTML元素，其中，所述目标HTML元素为网页中待截图区域对应的HTML元素；
判断所述目标HTML元素是否是滚动视图；
在判断出所述目标HTML元素是滚动视图时，滚动所述目标HTML元素，并分别对滚动前后的所述目标HTML元素的可视区域进行截图，得到多个截图；以及
拼接所述多个截图，作为所述待截图区域的截图；
在接收目标HTML元素之后，所述方法还包括：在所述网页中突出显示所述目标HTML元素对应的区域。
2.根据权利要求1所述的方法，其特征在于，在判断出所述目标HTML元素是滚动视图时，滚动所述目标HTML元素，并分别对滚动前后的所述目标HTML元素的可视区域进行截图，得到多个截图包括：
对滚动前的所述目标HTML元素的可视区域进行截图；以及
每按照预设距离滚动一次所述目标HTML元素，并对滚动后的所述目标HTML元素的可视区域进行一次截图，直至所述目标HTML元素滚动至最底部。
3.根据权利要求1所述的方法，其特征在于，分别对滚动前后的所述目标HTML元素的可视区域进行截图，得到多个截图包括：
获取目标元素框的高度和宽度，其中，所述目标元素框为显示所述目标HTML元素的元素框；
获取所述目标元素框相对于目标屏幕的位置，其中，所述目标屏幕为显示所述网页的屏幕；以及
根据所述目标元素框相对于所述目标屏幕的位置、所述高度和所述宽度生成所述目标HTML元素的可视区域的截图。
4.根据权利要求1所述的方法，其特征在于，判断所述目标HTML元素是否是滚动视图包括：
获取目标元素框的高度和宽度与所述目标元素框内框的高度和宽度，其中，所述目标元素框为显示所述目标HTML元素的元素框，所述目标元素框内框为所述目标元素框中用于显示所述目标HTML元素的元素内容的区域；
分别比较所述目标元素框的高度和所述内框的高度，以及所述目标元素框的宽度和所述内框的宽度；
如果所述目标元素框的高度小于所述内框的高度，和/或所述目标元素框的宽度小于所述内框的宽度，则确定所述目标HTML元素是滚动视图；以及
如果所述目标元素框的高度不小于所述内框的高度且所述目标元素框的宽度不小于所述内框的宽度，则确定所述目标HTML元素不是滚动视图。
5.根据权利要求1所述的方法，其特征在于，在接收目标HTML元素之前，所述方法还包括：在接收到截图指令时，显示所述网页的HTML源文件，其中，所述截图指令用于指示对所述网页执行截图操作。
6.一种网页截图装置，其特征在于，包括：
接收单元，用于接收目标HTML元素，其中，所述目标HTML元素为网页中待截图区域对应的HTML元素；
判断单元，用于判断所述目标HTML元素是否是滚动视图；
截图单元，用于在判断出所述目标HTML元素是滚动视图时，滚动所述目标HTML元素，并分别对滚动前后的所述目标HTML元素的可视区域进行截图，得到多个截图；以及
拼接单元，用于拼接所述多个截图，作为所述待截图区域的截图；
该装置还包括：第二显示单元，用于在网页中突出显示所述目标HTML元素对应的区域。
7.根据权利要求6所述的装置，其特征在于，所述截图单元包括：
第一截图模块，用于对滚动前的所述目标HTML元素的可视区域进行截图；以及
第二截图模块，用于每按照预设距离滚动一次所述目标HTML元素，并对滚动后的所述目标HTML元素的可视区域进行一次截图，直至所述目标HTML元素滚动至最底部。
8.根据权利要求6所述的装置，其特征在于，所述截图单元包括：
第一获取模块，用于获取目标元素框的高度和宽度，其中，所述目标元素框为显示所述目标HTML元素的元素框；
第二获取模块，用于获取所述目标元素框相对于目标屏幕的位置，其中，所述目标屏幕为显示所述网页的屏幕；以及
生成模块，用于根据所述目标元素框相对于所述目标屏幕的位置、所述高度和所述宽度生成所述目标HTML元素的可视区域的截图。
9.根据权利要求6所述的装置，其特征在于，所述判断单元包括：
第三获取模块，用于获取目标元素框的高度和宽度与所述目标元素框内框的高度和宽度，其中，所述目标元素框为显示所述目标HTML元素的元素框，所述目标元素框内框为所述目标元素框中用于显示所述目标HTML元素的元素内容的区域；
比较模块，用于分别比较所述目标元素框的高度和所述内框的高度，以及所述目标元素框的宽度和所述内框的宽度；以及
确定模块，用于在所述目标元素框的高度小于所述内框的高度，和/或所述目标元素框的宽度小于所述内框的宽度时，则确定所述目标HTML元素是滚动视图，在所述目标元素框的高度不小于所述内框的高度且所述目标元素框的宽度不小于所述内框的宽度时，则确定所述目标HTML元素不是滚动视图。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510703620.6A CN106610831B (zh) | 2015-10-26 | 2015-10-26 | 网页截图方法和装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201510703620.6A CN106610831B (zh) | 2015-10-26 | 2015-10-26 | 网页截图方法和装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106610831A CN106610831A (zh) | 2017-05-03 |
| CN106610831B true CN106610831B (zh) | 2020-02-07 |
Family
ID=58613927
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201510703620.6A Expired - Fee Related CN106610831B (zh) | 2015-10-26 | 2015-10-26 | 网页截图方法和装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106610831B (zh) |
Families Citing this family (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107357926B (zh) * | 2017-07-26 | 2020-04-17 | 成都三零盛安信息系统有限公司 | 网页处理方法、装置及电子设备 |
| CN107436714B (zh) * | 2017-09-20 | 2020-05-22 | 任文 | 一种获取手机屏幕截图的方法 |
| CN109271087A (zh) * | 2018-09-10 | 2019-01-25 | 珠海格力电器股份有限公司 | 一种截图方法和装置 |
| CN111309221B (zh) * | 2018-12-12 | 2024-01-12 | 阿里巴巴集团控股有限公司 | 页面处理方法、装置及设备 |
| CN110018775B (zh) * | 2019-03-15 | 2021-07-09 | 努比亚技术有限公司 | 一种内容显示方法、终端及计算机可读存储介质 |
| CN111090375B (zh) * | 2019-11-21 | 2023-07-25 | 深圳前海环融联易信息科技服务有限公司 | 一种智能网页截图方法、装置、计算机设备及存储介质 |
| CN111046313B (zh) * | 2019-11-21 | 2023-08-29 | 深圳前海环融联易信息科技服务有限公司 | 一种网页的智能截图方法、装置、计算机设备及存储介质 |
| CN111813300A (zh) * | 2020-06-03 | 2020-10-23 | 深圳市鸿合创新信息技术有限责任公司 | 一种屏幕截图方法及装置 |
| CN111814086A (zh) * | 2020-07-13 | 2020-10-23 | 杭州数澜科技有限公司 | 一种用于对网页进行截图方法和系统 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102681829A (zh) * | 2011-03-16 | 2012-09-19 | 阿里巴巴集团控股有限公司 | 一种屏幕截图方法、装置及通讯客户端 |
| CN103455315A (zh) * | 2012-06-04 | 2013-12-18 | 百度在线网络技术（北京）有限公司 | 一种用于实现截屏及获取对应目标信息的方法与设备 |
| CN104133683A (zh) * | 2014-07-31 | 2014-11-05 | 上海二三四五网络科技股份有限公司 | 一种截取屏幕图片的方法及装置 |
| CN104615343A (zh) * | 2013-11-04 | 2015-05-13 | 中兴通讯股份有限公司 | 一种终端截图的方法及装置 |
Family Cites Families (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN100476829C (zh) * | 2007-01-17 | 2009-04-08 | 深圳市光芒科技有限公司 | 一种截取网页内容的方法 |
| US20120159295A1 (en) * | 2010-12-16 | 2012-06-21 | Rabstejnek Wayne S | Method for single page browser multi-tasking |
| CN104866178B (zh) * | 2015-05-28 | 2018-05-22 | 努比亚技术有限公司 | 一种智能截图方法及智能截图终端 |
-
2015
- 2015-10-26 CN CN201510703620.6A patent/CN106610831B/zh not_active Expired - Fee Related
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102681829A (zh) * | 2011-03-16 | 2012-09-19 | 阿里巴巴集团控股有限公司 | 一种屏幕截图方法、装置及通讯客户端 |
| CN103455315A (zh) * | 2012-06-04 | 2013-12-18 | 百度在线网络技术（北京）有限公司 | 一种用于实现截屏及获取对应目标信息的方法与设备 |
| CN104615343A (zh) * | 2013-11-04 | 2015-05-13 | 中兴通讯股份有限公司 | 一种终端截图的方法及装置 |
| CN104133683A (zh) * | 2014-07-31 | 2014-11-05 | 上海二三四五网络科技股份有限公司 | 一种截取屏幕图片的方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106610831A (zh) | 2017-05-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106610831B (zh) | 网页截图方法和装置 | |
| CN106610829B (zh) | 网页截图方法和装置 | |
| CN107885848B (zh) | 基于web技术的网页截屏方法 | |
| CN106156066B (zh) | 一种页面切换方法、装置及客户端 | |
| JP6412958B2 (ja) | データ入力方法及び端末 | |
| US11966758B2 (en) | Method and system for accessing table content in a digital image of the table | |
| US20150242404A1 (en) | Selectively emphasizing digital content | |
| CN104239042B (zh) | 热力图生成方法及装置 | |
| US11455460B2 (en) | Method for displaying handwritten note in electronic book, electronic device and computer storage medium | |
| US9761034B2 (en) | Animation emulating live web page content resizing | |
| CN106484266A (zh) | 一种文本处理方法及装置 | |
| WO2015096634A1 (zh) | 表格文件显示方法及系统 | |
| CN110297681B (zh) | 图像处理方法、装置、终端及存储介质 | |
| US20150187095A1 (en) | Method and device for implementing page mask | |
| CN103927178A (zh) | 一种截图方法及截图装置 | |
| WO2014176912A1 (en) | Two dimensional-code scanning method and device | |
| CN106296622B (zh) | 一种自动布局的拼图方法及装置 | |
| US20150149883A1 (en) | Image processing device, image processing device control method, program, and information storage medium | |
| CN106648571B (zh) | 一种用于校对应用界面的方法和装置 | |
| CN109656652A (zh) | 网页图表绘制方法、装置、计算机设备和存储介质 | |
| JP2021512415A (ja) | デジタルコンポーネントのバックドロップレンダリング | |
| US20170103430A1 (en) | Responsive advertisement formats based on viewability pixel data | |
| CN108304118B (zh) | 截图方法及装置 | |
| US9613427B2 (en) | Information processing method and electronic device | |
| CN110968236A (zh) | 基于网页的截图方法及装置 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information |
Address after: 100083 No. 401, 4th Floor, Haitai Building, 229 North Fourth Ring Road, Haidian District, Beijing Applicant after: BEIJING GRIDSUM TECHNOLOGY Co.,Ltd. Address before: 100086 Cuigong Hotel, 76 Zhichun Road, Shuangyushu District, Haidian District, Beijing Applicant before: BEIJING GRIDSUM TECHNOLOGY Co.,Ltd. |
|
| CB02 | Change of applicant information | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20200207 |