一种浏览器页面截取方法及装置与流程

1.本发明涉及计算机技术领域，特别涉及一种浏览器页面截取方法、装置、设备及存储介质。


背景技术：

2.目前市面上的浏览器种类繁杂，用户使用的浏览器版本和功能各不相同，对于前端实现截图功能存在很大的兼容性问题，在不同的浏览器和不同环境的电脑环境，由于各大浏览器厂商没有形成标准统一的api提供给开发者，前端无法实现统一的截图功能，极大地增加了开发成本、降低了用户体验。例如机密性较高的电脑不便安装三方的软件或者有些政府企业的电脑系统老旧，浏览器版本低，无法实现前端截图功能。另外，目前客户端截取图片时需要canvas绘制，导致占用大量系统内存、cpu和gpu等系统资源，对于性能较弱的电脑，浏览器页面截图功能稍显捉襟见肘。
3.因此，如何解决各个用户浏览器截取功能不兼容问题是本领域技术人员亟待解决的技术问题。


技术实现要素：

4.有鉴于此，本发明的目的在于提供一种浏览器页面截取方法、装置、设备及存储介质，能够解决各个用户浏览器截取功能不兼容问题，截取响应速度快且实现简单。其具体方案如下：
5.本技术的第一方面提供了一种浏览器页面截取方法，应用于服务端，包括：
6.获取浏览器客户端触发生成的截取指令，并根据所述截取指令控制所述浏览器客户端发送相应的截取参数；其中，所述截取参数为与所述浏览器客户端的预截取页面相关的信息；
7.根据所述截取参数访问所述预截取页面并对所述预截取页面进行截取操作，以得到与所述预截取页面对应的目标截图后将所述目标截图返回至所述浏览器客户端。
8.可选的，所述获取浏览器客户端触发生成的截取指令之前，还包括：
9.所述浏览器客户端通过调用所述服务端上的页面截取服务api的方式触发生成所述截取指令。
10.可选的，所述根据所述截取指令控制所述浏览器客户端发送相应的截取参数，包括：
11.根据所述截取指令控制所述浏览器客户端发送所述预截取页面的页面地址和所述预截取页面中的目标dom节点的标识属性；其中，所述目标dom节点为与所述预截取页面对应的所述目标截图中包含的dom节点。
12.可选的，所述根据所述截取参数访问所述预截取页面，包括：
13.在所述服务端启动无头浏览器并利用所述无头浏览器根据所述预截取页面的所述页面地址访问所述预截取页面。
14.可选的，所述利用所述无头浏览器根据所述预截取页面的所述页面地址访问所述预截取页面，包括：
15.如果所述预截取页面设置有访问权限，则控制所述浏览器客户端发送与所述预截取页面对应的认证凭证，以利用所述无头浏览器根据所述预截取页面的所述页面地址和所述访问凭证访问所述预截取页面。
16.可选的，所述对所述预截取页面进行截取操作之前，还包括：
17.对所述预截取页面的所有数据接口进行监听以确定所述预截取页面是否响应完成，如果是，则判断所述预截取页面中的全部dom节点是否渲染结束，如果是，则启动对所述预截取页面进行截取操作的步骤。
18.可选的，对所述预截取页面进行截取操作以得到与所述预截取页面对应的目标截图，包括：
19.根据所述预截取页面中的所述目标dom节点的所述标识属性从所述全部dom节点中查找出所述目标dom节点；
20.获取所述目标dom节点的定位属性信息，并根据所述定位属性信息对所述预截取页面中包含所述目标dom节点的区域进行截取以得到所述目标截图。
21.可选的，所述将所述目标截图返回至所述浏览器客户端，包括：
22.按照所述截取参数中的文件格式将所述目标截图封装成相应格式的文件流并将所述文件流返回至所述浏览器客户端；其中，所述文件格式为根据所述截取指令控制所述浏览器客户端发送的参数。
23.可选的，所述按照所述截取参数中的文件格式将所述目标截图封装成相应格式的文件流之后，还包括：
24.根据预设需求对所述文件流进行添加水印操作，以得到具有与所述预设需求对应的水印信息的所述文件流。
25.本技术的第二方面提供了一种浏览器页面截取装置，应用于服务端，包括：
26.获取模块，用于获取浏览器客户端触发生成的截取指令，并根据所述截取指令控制所述浏览器客户端发送相应的截取参数；其中，所述截取参数为与所述浏览器客户端的预截取页面相关的信息；
27.截取模块，用于根据所述截取参数访问所述预截取页面并对所述预截取页面进行截取操作，以得到与所述预截取页面对应的目标截图后将所述目标截图返回至所述浏览器客户端。
28.本技术的第三方面提供了一种电子设备，所述电子设备包括处理器和存储器；其中所述存储器用于存储计算机程序，所述计算机程序由所述处理器加载并执行以实现前述浏览器页面截取方法。
29.本技术的第四方面提供了一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机可执行指令，所述计算机可执行指令被处理器加载并执行时，实现前述浏览器页面截取方法。
30.本技术中，先获取浏览器客户端触发生成的截取指令，并根据所述截取指令控制所述浏览器客户端发送相应的截取参数；其中，所述截取参数为与所述浏览器客户端的预截取页面相关的信息；然后根据所述截取参数访问所述预截取页面并对所述预截取页面进
行截取操作，以得到与所述预截取页面对应的目标截图后将所述目标截图返回至所述浏览器客户端。本技术服务端在获取到截取指令后即获取浏览器客户端针对此次截取指令的截取参数，根据截取参数在服务端统一访问预截取页面以进行页面截取，同时将截图返回至浏览器客户端，从而解决各个用户浏览器截取功能不兼容问题，截取响应速度快且实现简单。
附图说明
31.为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
32.图1为本技术提供的一种浏览器页面截取方法流程图；
33.图2为本技术提供的一种具体的浏览器页面截取方法示意图；
34.图3为本技术提供的一种浏览器页面截取装置结构示意图；
35.图4为本技术提供的一种浏览器页面截取电子设备结构图。
具体实施方式
36.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
37.现有技术中，一方面，对于系统saas化后，使用人员较多导致使用的客户端种类繁杂，一套前端代码很难兼容所有客户端，且有些老旧版本浏览器甚至无法浏览器页面截图功能。另一方面，客户端截取图片时需要canvas绘制，导致占用大量系统内存、cpu和gpu等系统资源，对于性能较弱的电脑，浏览器页面截图功能稍显捉襟见肘。针对上述技术缺陷，本技术提供一种浏览器页面截取方案，解决各个用户浏览器截取功能不兼容问题，截取响应速度快且实现简单。
38.图1为本技术实施例提供的一种浏览器页面截取方法流程图。参见图1所示，该浏览器页面截取方法应用于服务端，包括：
39.s11：获取浏览器客户端触发生成的截取指令，并根据所述截取指令控制所述浏览器客户端发送相应的截取参数；其中，所述截取参数为与所述浏览器客户端的预截取页面相关的信息。
40.本实施例中，所述服务端获取浏览器客户端触发生成的截取指令，并根据所述截取指令控制所述浏览器客户端发送相应的截取参数。其中，所述截取参数为与所述浏览器客户端的预截取页面相关的信息。所述截取指令由所述浏览器客户端通过调用所述服务端上的页面截取服务api的方式触发生成。所述页面截取服务为部署在所述服务端的服务，可将该服务认定为所述服务端，提供浏览器页面截取功能。浏览器页面截取也可称为视图截取，也即所述浏览器客户端调用视图截取服务(截图服务)的api时，入参所述截取参数。所述截取参数的类型由所述浏览器客户端业务需求决定。
41.本实施例中，根据所述截取指令控制所述浏览器客户端发送所述预截取页面的页面地址和所述预截取页面中的目标dom节点的标识属性。其中，所述目标dom节点为与所述预截取页面对应的所述目标截图中包含的dom节点。所述预截取页面的页面地址为待截图的页面访问地址url，用于所述服务端访问所述待截取页面。所述目标dom节点的表示属性为所需截取页面视图的指定dom的id属性，用于确定截图中最终包含的dom节点元素，为此，需要提前在设定好所需截取视图的dom的id(唯一值)属性。
42.s12：根据所述截取参数访问所述预截取页面并对所述预截取页面进行截取操作，以得到与所述预截取页面对应的目标截图后将所述目标截图返回至所述浏览器客户端。
43.本实施例中，根据所述截取参数访问所述预截取页面并对所述预截取页面进行截取操作，以得到与所述预截取页面对应的目标截图后将所述目标截图返回至所述浏览器客户端。为了保证截取数据的完整性，在此之前需要对所述预截取页面的所有数据接口进行监听以确定所述预截取页面是否响应完成，如果是，则判断所述预截取页面中的全部dom节点是否渲染结束，如果是，则启动对所述预截取页面进行截取操作的步骤。待所述预截取页面所有请求响应完毕后，监听整个页面的dom变化，确保所述预截取页面的dom全部渲染结束。
44.具体来说，在获取到包括所述预截取页面的页面地址和所述预截取页面中的目标dom节点的标识属性在内的所述截取参数后，一方面，在所述服务端启动无头浏览器(headless browser浏览器)并利用所述无头浏览器根据所述预截取页面的所述页面地址访问所述预截取页面。所述服务端接收到参数，在所述服务端启动所述无头浏览器，通过客户端调用api入参的目标页面的url(页面地址)使用无头浏览器打开页面。无头浏览器使得整个截取过程无感知，提高用户体验。需要说明的是，对于需要登陆权限的所述预截取页面，还需要入参访问当前页面服务端生成的认证凭证，如token、cookie等。也即如果所述预截取页面设置有访问权限，则控制所述浏览器客户端发送与所述预截取页面对应的认证凭证，以利用所述无头浏览器根据所述预截取页面的所述页面地址和所述访问凭证访问所述预截取页面。截图服务会在页面所有的请求头中增加指定的token字段以及token的key名称，以增加请求页面所需渲染数据的接口权限。
45.另一方面，通过调用api入参的dom的id属性查找所述预截取页面的所需dom，也即根据所述预截取页面中的所述目标dom节点的所述标识属性从所述全部dom节点中查找出所述目标dom节点。确定指定dom后，获取所述目标dom节点的定位属性信息，并根据所述定位属性信息对所述预截取页面中包含所述目标dom节点的区域进行截取以得到所述目标截图。例如，可以通过document对象下的getboundingclientrect属性获取所述目标dom节点的width、height、top和left属性值以定位该元素的大小和位置。最后通过所述无头浏览器的screenshot属性进行截取生成stream。
46.本实施例中，在截图之后，需要按照所述截取参数中的文件格式将所述目标截图封装成相应格式的文件流。其中，所述文件格式为根据所述截取指令控制所述浏览器客户端发送的参数，按照步骤s11中的入参方式获取，也即入参指定截取成功后需要的文件，例如pdf或png格式的图片。根据用户的需求，将获取到的截图封装成pdf或png的stream，并且返回stream给前端。客户端用户直接下载此流文件，生成pdf或png图片。进一步的，鉴于用户自定义截图生成的图片也很难作为凭证，无法统一标准的实现客户端截图留据的功能，
以及截取图片大小样式包括水印功能无法统一的问题，本实施例还可实现采取水印签名方式返回图片流给客户端生成截图的功能，生成图片流时，同时根据用户需求，为图片增加水印所需的文字。也即根据预设需求对所述文件流进行添加水印操作，以得到具有与所述预设需求对应的水印信息的所述文件流。如需预览文件水印，传入水印文字即可。
47.参照图2所示具体流程，以her人力资源saas系统的实现过程对本实施例进行具体说明。首先在该系统中集成视图截取服务，特别的，该服务可以为nodejs应用，nosejs是一个基于chrome v8引擎的javascript运行环境，也即是一个让javascript运行在服务端的开发平台，可用于方便地搭建响应速度快、易于扩展的网络应用。node使用事件驱动，非阻塞i/o模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。在使用截取功能时，先确定需要截取的目标页面的url入参url字段，并且确定需要截取的dom元素的id属性到elementid字段，如果待截取页面需要渲染的数据需要通过token权限校验，需要入参到token字段，还需传入需要生成的文件格式(png\pdf)入参到filetype字段。通过post方式调用视图截取服务的api，以json的形式将上述字段传输到该服务。待该服务响应指定的文件流数据，前端接收该流数据下载到本地。上述过程可减少前端的开发成本，不用针对特定浏览器编写特定的兼容代码，低版本浏览器用户也可以使用和最新浏览器相同的视图截取功能，同时为电脑性能较的电脑节约系统资源，增强用户体验。
48.可见，本技术实施例先获取浏览器客户端触发生成的截取指令，并根据所述截取指令控制所述浏览器客户端发送相应的截取参数；其中，所述截取参数为与所述浏览器客户端的预截取页面相关的信息；然后根据所述截取参数访问所述预截取页面并对所述预截取页面进行截取操作，以得到与所述预截取页面对应的目标截图后将所述目标截图返回至所述浏览器客户端。本技术实施例服务端在获取到截取指令后即获取浏览器客户端针对此次截取指令的截取参数，根据截取参数在服务端统一访问预截取页面以进行页面截取，同时将截图返回至浏览器客户端，从而解决各个用户浏览器截取功能不兼容问题，截取响应速度快且实现简单。
49.参见图3所示，本技术实施例还相应公开了一种浏览器页面截取装置，应用于服务端，包括：
50.获取模块11，用于获取浏览器客户端触发生成的截取指令，并根据所述截取指令控制所述浏览器客户端发送相应的截取参数；其中，所述截取参数为与所述浏览器客户端的预截取页面相关的信息；
51.截取模块12，用于根据所述截取参数访问所述预截取页面并对所述预截取页面进行截取操作，以得到与所述预截取页面对应的目标截图后将所述目标截图返回至所述浏览器客户端。
52.可见，本技术实施例先获取浏览器客户端触发生成的截取指令，并根据所述截取指令控制所述浏览器客户端发送相应的截取参数；其中，所述截取参数为与所述浏览器客户端的预截取页面相关的信息；然后根据所述截取参数访问所述预截取页面并对所述预截取页面进行截取操作，以得到与所述预截取页面对应的目标截图后将所述目标截图返回至所述浏览器客户端。本技术实施例服务端在获取到截取指令后即获取浏览器客户端针对此次截取指令的截取参数，根据截取参数在服务端统一访问预截取页面以进行页面截取，同时将截图返回至浏览器客户端，从而解决各个用户浏览器截取功能不兼容问题，截取响应
速度快且实现简单。
53.在一些具体实施例中，所述获取模块11，具体包括：
54.根据所述截取指令控制所述浏览器客户端发送所述预截取页面的页面地址和所述预截取页面中的目标dom节点的标识属性；其中，所述目标dom节点为与所述预截取页面对应的所述目标截图中包含的dom节点。
55.在一些具体实施例中，所述浏览器页面截取装置还包括：
56.触发模块，所述浏览器客户端用于通过调用所述服务端上的页面截取服务api的方式触发生成所述截取指令；
57.判断模块，用于对所述预截取页面的所有数据接口进行监听以确定所述预截取页面是否响应完成，如果是，则判断所述预截取页面中的全部dom节点是否渲染结束，如果是，则启动对所述预截取页面进行截取操作的步骤。
58.在一些具体实施例中，所述截取模块12，具体包括：
59.访问单元，用于在所述服务端启动无头浏览器并利用所述无头浏览器根据所述预截取页面的所述页面地址访问所述预截取页面；
60.查找单元，用于根据所述预截取页面中的所述目标dom节点的所述标识属性从所述全部dom节点中查找出所述目标dom节点；
61.筛选单元，用于获取所述目标dom节点的定位属性信息，并根据所述定位属性信息对所述预截取页面中包含所述目标dom节点的区域进行截取以得到所述目标截图；
62.封装单元，用于按照所述截取参数中的文件格式将所述目标截图封装成相应格式的文件流；
63.添加单元，用于根据预设需求对所述文件流进行添加水印操作，以得到具有与所述预设需求对应的水印信息的所述文件流；
64.返回单元，用于将所述文件流返回至所述浏览器客户端；其中，所述文件格式为根据所述截取指令控制所述浏览器客户端发送的参数。
65.在一些具体实施例中，所述访问单元，具体用于如果所述预截取页面设置有访问权限，则控制所述浏览器客户端发送与所述预截取页面对应的认证凭证，以利用所述无头浏览器根据所述预截取页面的所述页面地址和所述访问凭证访问所述预截取页面。
66.进一步的，本技术实施例还提供了一种电子设备。图4是根据一示例性实施例示出的电子设备20结构图，图中的内容不能认为是对本技术的使用范围的任何限制。
67.图4为本技术实施例提供的一种电子设备20的结构示意图。该电子设备20，具体可以包括：至少一个处理器21、至少一个存储器22、电源23、通信接口24、输入输出接口25和通信总线26。其中，所述存储器22用于存储计算机程序，所述计算机程序由所述处理器21加载并执行，以实现前述任一实施例公开的浏览器页面截取方法中的相关步骤。
68.本实施例中，电源23用于为电子设备20上的各硬件设备提供工作电压；通信接口24能够为电子设备20创建与外界设备之间的数据传输通道，其所遵循的通信协议是能够适用于本技术技术方案的任意通信协议，在此不对其进行具体限定；输入输出接口25，用于获取外界输入数据或向外界输出数据，其具体的接口类型可以根据具体应用需要进行选取，在此不进行具体限定。
69.另外，存储器22作为资源存储的载体，可以是只读存储器、随机存储器、磁盘或者
光盘等，其上所存储的资源可以包括操作系统221、计算机程序222及数据223等，存储方式可以是短暂存储或者永久存储。
70.其中，操作系统221用于管理与控制电子设备20上的各硬件设备以及计算机程序222，以实现处理器21对存储器22中海量数据223的运算与处理，其可以是windows server、netware、unix、linux等。计算机程序222除了包括能够用于完成前述任一实施例公开的由电子设备20执行的浏览器页面截取方法的计算机程序之外，还可以进一步包括能够用于完成其他特定工作的计算机程序。数据223可以包括电子设备20收集到的截取指令。
71.进一步的，本技术实施例还公开了一种存储介质，所述存储介质中存储有计算机程序，所述计算机程序被处理器加载并执行时，实现前述任一实施例公开的浏览器页面截取方法步骤。
72.本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似部分互相参见即可。对于实施例公开的装置而言，由于其与实施例公开的方法相对应，所以描述的比较简单，相关之处参见方法部分说明即可。
73.最后，还需要说明的是，在本文中，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
…”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
74.以上对本发明所提供的浏览器页面截取方法、装置、设备及存储介质进行了详细介绍，本文中应用了具体个例对本发明的原理及实施方式进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及其核心思想；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。