CN112068919B - 一种网页截屏处理方法、装置、电子设备及存储介质 - Google Patents
一种网页截屏处理方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN112068919B CN112068919B CN202010981375.6A CN202010981375A CN112068919B CN 112068919 B CN112068919 B CN 112068919B CN 202010981375 A CN202010981375 A CN 202010981375A CN 112068919 B CN112068919 B CN 112068919B
- Authority
- CN
- China
- Prior art keywords
- screen capturing
- state data
- data
- target
- rendering
- 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.)
- Active
Links
- 238000003672 processing method Methods 0.000 title claims abstract description 13
- 238000000034 method Methods 0.000 claims abstract description 65
- 238000012545 processing Methods 0.000 claims abstract description 47
- 238000009877 rendering Methods 0.000 claims description 99
- 230000006835 compression Effects 0.000 claims description 17
- 238000007906 compression Methods 0.000 claims description 17
- 230000006837 decompression Effects 0.000 claims description 14
- 238000004590 computer program Methods 0.000 claims description 8
- 238000013500 data storage Methods 0.000 claims description 7
- 230000005540 biological transmission Effects 0.000 abstract description 7
- 230000000903 blocking effect Effects 0.000 abstract description 6
- 230000002159 abnormal effect Effects 0.000 abstract description 2
- 230000009286 beneficial effect Effects 0.000 abstract description 2
- 230000008569 process Effects 0.000 description 17
- 230000006870 function Effects 0.000 description 15
- 238000004891 communication Methods 0.000 description 5
- 230000008859 change Effects 0.000 description 4
- 238000010586 diagram Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 4
- 230000004044 response 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
- 238000001514 detection method Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 102000011727 Caspases Human genes 0.000 description 2
- 108010076667 Caspases Proteins 0.000 description 2
- 238000013461 design Methods 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 230000006872 improvement Effects 0.000 description 2
- 239000004973 liquid crystal related substance Substances 0.000 description 2
- VYZAMTAEIAYCRO-UHFFFAOYSA-N Chromium Chemical compound [Cr] VYZAMTAEIAYCRO-UHFFFAOYSA-N 0.000 description 1
- 241000699670 Mus sp. Species 0.000 description 1
- 230000001133 acceleration Effects 0.000 description 1
- 230000008901 benefit Effects 0.000 description 1
- 238000004422 calculation algorithm Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000001419 dependent effect Effects 0.000 description 1
- 238000011161 development Methods 0.000 description 1
- 238000007599 discharging Methods 0.000 description 1
- 230000005484 gravity Effects 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000007726 management method Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000010295 mobile communication Methods 0.000 description 1
- 238000012544 monitoring process Methods 0.000 description 1
- 238000005457 optimization Methods 0.000 description 1
- 230000037361 pathway Effects 0.000 description 1
- 230000002688 persistence Effects 0.000 description 1
- 230000005236 sound signal Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000010897 surface acoustic wave method Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
- 239000002699 waste material Substances 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本发明提供了一种网页截屏处理方法、装置、电子设备及存储介质。所述方法，包括：响应于客户端针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程。从而取得了有效减轻用户浏览器截图性能损耗，避免线程阻塞、页面卡死等异常，截屏得到的数据体积更小，传数量和存储量大大降低，同时能够兼容更多浏览器，提高网页截屏处理的灵活度的有益效果。
Description
技术领域
本发明涉及互联网技术领域，尤其涉及一种网页截屏处理方法、装置、电子设备及存储介质。
背景技术
近几年随着互联网的不断发展，对于浏览器前端页面展示效率的要求越来越高，在大量互联网的系统界面设计中，不断的会加入各种多元的操作因素，已经不能简单依赖于图片、视频、动图等，而是要求前端的超高流畅度实现各种连续的流畅化的操作。
而且，在浏览页面时，可能会对其中部分页面，或者是页面中部分区域进行截屏。相关技术中，一般通过一款利用JavaScript进行屏幕截图的插件Html2Canvas将页面DOM(Document Object Model，文档对象模型)元素转化成Canvas，再生成图片Base64码存储到服务端。其中，Canvas是HTML5新增的组件，它就像一块幕布，可以用JavaScript在上面绘制各种图表、动画等。
但是，生成Canvas的过程容易造成浏览器假死，部分安卓手机会因性能不足导致闪退，而且截屏得到的图片数据相对较大，影响传输和存储，此外对于兼容性较差的浏览器，可能无法生成Canvas，从而影响网页截屏的成功率。
发明内容
本发明实施例提供一种网页截屏处理方法、装置、电子设备及存储介质，以解决现有的网页截屏过程容易造成浏览器假死，影响网页截屏的成功率，且截屏得到的图片数据相对较大，影响传输和存储的问题。
为了解决上述技术问题，本发明是这样实现的：
第一方面，本发明实施例提供了一种网页截屏处理方法，包括：
响应于客户端针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；
将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；
将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程。
可选地，所述方法还包括：
响应于展示端针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
可选地，所述将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程的步骤，包括：
将所述状态数据压缩后存储至所述目标服务器，并在压缩后的状态数据完全存储至所述目标服务器时，中断针对所述截屏操作指令的截屏操作处理流程，所述状态数据的压缩方式包括序列化压缩。
可选地，所述从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染的步骤，包括：
从所述目标服务器中获取所述压缩后的状态数据，并对所述压缩后的状态数据进行序列化解压缩，得到第一解压数据，所述第一解压数据中包括第一虚拟DOM、截屏配置数据；
并针对所述第一解压数据中的第一虚拟DOM重新构造实例方法，得到解压缩后的状态数据；
根据所述解压缩后的状态数据渲染得到所述目标网页。
可选地，所述根据所述解压缩后的状态数据渲染得到所述目标网页的步骤，包括：
根据所述状态数据中的所述截屏配置数据，将所述状态数据中的虚拟DOM绘制到Canvas画布中，得到所述目标网页的渲染结果。
可选地，所述目标服务器在接收到所述状态数据之后，根据所述状态数据构建所述目标网页的页面数据；
所述从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染的步骤，包括：
从所述目标服务器中获取所述目标网页的页面数据并展示，得到所述目标网页的渲染结果。
第二方面，本发明实施例提供了一种网页截屏处理装置，包括：
节点树获取模块，用于响应于客户端针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；
状态数据获取模块，用于将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；
状态数据存储模块，用于将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程。
可选地，所述装置还包括：
页面渲染模块，用于响应于展示端针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
可选地，所述状态数据存储模块，具体用于：
将所述状态数据压缩后存储至所述目标服务器，并在压缩后的状态数据完全存储至所述目标服务器时，中断针对所述截屏操作指令的截屏操作处理流程，所述状态数据的压缩方式包括序列化压缩。
可选地，所述页面渲染模块，包括：
解压缩子模块，用于从所述目标服务器中获取所述压缩后的状态数据，并对所述压缩后的状态数据进行序列化解压缩，得到第一解压数据，所述第一解压数据中包括第一虚拟DOM、截屏配置数据；
实例方法构造子模块，用于针对所述第一解压数据中的第一虚拟DOM重新构造实例方法，得到解压缩后的状态数据；
页面渲染子模块，用于根据所述解压缩后的状态数据渲染得到所述目标网页。
可选地，所述页面渲染子模块，具体用于：
根据所述状态数据中的所述截屏配置数据，将所述状态数据中的虚拟DOM绘制到Canvas画布中，得到所述目标网页的渲染结果。
可选地，所述目标服务器在接收到所述状态数据之后，根据所述状态数据构建所述目标网页的页面数据；
所述页面渲染模块，具体用于：从所述目标服务器中获取所述目标网页的页面数据并展示，得到所述目标网页的渲染结果。
第三方面，本发明实施例另外提供了一种电子设备，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如第一方面所述的网页截屏处理方法的步骤。
第四方面，本发明实施例另外提供了一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如第一方面所述的网页截屏处理方法的步骤。
第五方面，本发明实施例另外提供了一种网页截屏处理系统，其特征在于，包括客户端、展示端和目标服务器，
其中，所述客户端用于：响应于针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程；
所述展示端用于：响应于针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
在本发明实施例中，响应于客户端针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程。从而取得了有效减轻用户浏览器截图性能损耗，避免线程阻塞、页面卡死等异常，截屏得到的数据体积更小，传数量和存储量大大降低，同时能够兼容更多浏览器，提高网页截屏处理的灵活度的有益效果。
上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。
附图说明
为了更清楚地说明本发明实施例的技术方案，下面将对本发明实施例的描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例中的一种网页截屏处理方法的步骤流程图；
图2是本发明实施例中的另一种网页截屏处理方法的步骤流程图；
图3是本发明实施例中的一种网页截屏处理装置的结构示意图；
图4是本发明实施例中的另一种网页截屏处理装置的结构示意图；
图5是本发明实施例中的一种电子设备的硬件结构示意图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
参照图1，示出了本发明实施例中一种网页截屏处理方法的步骤流程图。
步骤110，响应于客户端针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；
步骤120，将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；
步骤130，将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程。
本方案将Html2Canvas等相关技术中的网页截屏工作流程中影响浏览器性能最严重的渲染部分剥离，并在合适的时机、地点恢复渲染流程，达到减轻浏览器负担的目的。也即，在针对网页进行截屏处理时，可以剥离其中的渲染部分，在获取可以用以渲染网页的数据之后即可以中断整个网页截屏处理流程并保留状态。
具体地，响应于客户端针对目标网页的截屏操作指令，则可以获取该目标网页对应的目标节点树；进而将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；从而将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程。
其中，DOM是一个独立于任何语言和平台的接口，允许任何语言或脚本动态地访问和更新HTML文档的内容、结构和样式。该HTML页面可以进一步处理，并且该处理的结果可以被合并到所呈现的HTML(HyperText Markup Language，超文本标记语言)页面中。打开一个页面，加载完HTML文件后，浏览器首先做的就是解析HTML代码并开始绘制节点树(也即DOM节点树)，也就是说，我们删除标签元素，添加标签元素，改变标签元素的大小，改变标签元素的内容，其实就是在删除DOM节点，添加DOM节点，改变DOM节点的大小，也就是说在DOM节点树上进行操作。而Virtual Dom(虚拟DOM)可以看做一棵模拟了DOM节点树的JavaScript对象树，其主要可以通过vnode，实现一个无状态的组件，当组件状态发生更新时，然后触发Virtual Dom数据的变化，然后通过Virtual Dom和真实DOM的比对，再对真实DOM更新。虚拟DOM其实就是一种模拟DOM的JavaScript数据结构，也即虚拟DOM为根据真实DOM节点生成的对象实例。
在本发明实施例中，目标节点树可以立即为上述的真实DOM，也即目标网页的真实的DOM节点树，其中包含的每个节点可以理解为真实DOM节点。
而且，在实际应用中，用户可能需要对网页的全部区域进行截屏，也可能仅对页面中的部分区域进行截屏，那么在将目标节点树解析生成虚拟DOM时，可以根据所截屏区域对应的各个真实DOM节点，生成与当前的截屏操作指令对应的虚拟DOM。此外，在本发明实施例中，可以通过任何可用方式将目标节点树解析生成虚拟DOM，对此本发明实施例不加以限定。而且，为了方便后续渲染网页截屏，则可以同时整合当前的截屏操作指令的截屏配置数据以存储，其中的截屏配置数据可以为与当前的截屏操作相关的任何信息，例如截屏位置、截屏尺寸、收放比例等等。
用于存储状态数据的目标服务器可以由提供截屏服务方提供，也可以由截屏用户根据需求进行自定义设置，对此本发明实施例不加以限定。
参照图2，在本发明实施例中，所述方法还可以包括：
步骤140，响应于展示端针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
在实际应用中，在进行截屏之后，可能还需要渲染截屏结果以展示或是使用。因此在本发明实施例中，在保存状态数据之后，响应于展示端针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。也即考虑到截屏之后的渲染过程，将本发明实施例中的截屏方案划分为两个阶段：第一阶段(html2ElementTree阶段)触发截屏的客户端在合适的时机中断整个流程并保留状态至目标服务器。首先取得目标节点树将其解析生成虚拟DOM，同时整合截屏位置、尺寸、收放比例等其他与截屏操作相关的截屏配置数据，以上虚拟DOM和截屏配置数据可以统称为截屏流程当前的状态数据；再将状态数据进行存储传输至目标服务器，此时可以控制截屏流程中断。第二阶段(elementTree2Canvas阶段)，也即根据状态数据恢复页面流程，响应于展示端针对所述目标网页的截屏渲染指令，即可以恢复截屏渲染流程，可以从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
而且在本发明实施例中，可以通过任何可用方式进行截屏渲染，例如，可以调用展示端中任何可用的渲染方法，根据截屏配置数据将虚拟DOM绘制到Canvas画布中，得到当前的截屏渲染结果。
而且上述的两个阶段可以在不同的终端执行，也可以在同一终端执行，也即截屏的客户端和渲染截屏的展示端可以为不同的终端，也可以为同一终端，对此本发明实施例不加以限定。
展示端可以通过任何可用方式触发针对所述目标网页的截屏渲染指令，对此本发明实施例不加以限定。
另外，在实际应用中，可能存在多个用户通过不同客户端针对同一网页进行截屏操作，而且截屏区域也可能完全相同，也即可能存在多个不同客户端存储至目标服务器中的状态数据完全相同，那么为了避免目标服务器中的重复状态数据较多导致存储空间的浪费，此时也可以对存储至目标服务器中的状态数据进行去重处理。其次，用户也可能针对同一网页中的不同区域进行截屏操作，为了方便在后续渲染截屏时，可以准确查找到渲染所需的状态数据，可以在目标服务器中同时记录每个状态数据的客户端标识(例如客户端IP地址、序列号)、用户标识、与之对应的截屏操作的触发时间等等可以标识状态数据的信息，而且上述信息也可以直接作为截屏配置数据的一部分，对此本发明实施例不加以限定。那么在后续展示端触发针对所述目标网页的截屏渲染指令时，则可以在截屏渲染指令中携带用于查找状态数据的信息，进而可以根据相应信息从所述目标服务器中获取与之匹配的状态数据，并返回至所述展示端进行页面渲染。
参照图2，在本发明实施例中，所述步骤130进一步可以包括：
步骤131，将所述状态数据压缩后存储至所述目标服务器，并在压缩后的状态数据完全存储至所述目标服务器时，中断针对所述截屏操作指令的截屏操作处理流程，所述状态数据的压缩方式包括序列化压缩。
在本发明实施例中，为了能够进一步提高目标服务器的空间利用率，同时提高状态数据传输过程中的传输效率，在状态数据存储至目标服务器之前，还可以对状态数据进行压缩处理，而且在本发明实施例中，可以通过任何可用方式对状态数据进行压缩，对此本发明实施例不加以限定。
可选地，状态数据的压缩方式可以包括序列化压缩。其中，对象的序列化(Serialization)用于将对象编译成一个字节流，以及从字节流里重新构建对象，将一个对象编码成一个字节流为序列化该对象，相反处理为反序列化(Deserializing)。
序列化有三种主要途径：第一，作为一种持久化格式，一个对象序列化以后他的编码可以存储在磁盘上，供以以后反序列化使用；第二，作为一种通信数据格式，序列化结果可以从一个正在运行的虚拟机通过网络被传递到另一个虚拟机上；第三，作为一种拷贝，克隆(clone)机制，将对象序列化到内存的缓冲区中，然后通过反序列化可以得到一个深拷贝的对象。
参照图2，在本发明实施例中，所述步骤140进一步可以包括：
步骤141，从所述目标服务器中获取所述压缩后的状态数据，并对所述压缩后的状态数据进行序列化解压缩，得到第一解压数据，所述第一解压数据中包括第一虚拟DOM、截屏配置数据；
步骤142，并针对所述第一解压数据中的第一虚拟DOM重新构造实例方法，得到解压缩后的状态数据；
步骤143，根据所述解压缩后的状态数据渲染得到所述目标网页。
如上述，存储至目标服务器的数据可以为压缩后的状态数据，那么在后续进行截屏渲染时，在从目标服务器获取得到截屏所需的压缩后的状态数据之后，且在进行渲染之前，还需要对所述压缩后的状态数据进行序列化解压缩，得到第一解压数据，所述第一解压数据中包括第一虚拟DOM、截屏配置数据。而且在进行解压缩时，需要采用与压缩方式对应的解压缩方式进行解压缩，以提高解压缩结果的准确性。
例如，如果状态数据存储至目标服务器之前经过序列化压缩，那么此时则需要采用反序列解压缩方式针对渲染截屏所需的压缩后的状态数据进行解压缩。
而且，虚拟DOM是依据真实DOM节点生成的对象实例，实例中保留对应节点的样式信息和实例方法，虚拟DOM树(也即虚拟DOM)上的每一个节点都是一个单独的实例。另外，对象实例经序列化后会导致其中的实例方法丢失，因此为了提高解压缩后状态数据的完整性，需要在反序列化后重新进行构造，修正丢失的方法。
具体地，可以在从所述目标服务器中获取所述压缩后的状态数据，并对所述压缩后的状态数据进行序列化解压缩，得到第一解压数据，所述第一解压数据中包括第一虚拟DOM、截屏配置数据，进而可以并针对所述第一解压数据中的第一虚拟DOM重新构造实例方法，得到解压缩后的状态数据，最终在进行截屏渲染时，则可以根据所述解压缩后的状态数据渲染得到所述目标网页。
而且，在本发明实施例中，可以通过任何可用方法对第一虚拟DOM重新构造实例方法，对此本发明实施例不加以限定。例如，可以依次遍历第一虚拟DOM中的每个节点，进而通过调用任何可用的方法构造函数，依次针对其中的每个节点重新构造实例方法。
例如，假设虚拟DOM中某一节点包括A属性、B属性和C方法，经序列化压缩后其中C方法则会丢失，那么此时则可以通过调用方法构造函数，通过基于A属性和B属性执行相应节点，重新构造其中的C方法。
需要说明的是，如果状态数据中包含的是针对目标页面内部分区域进行截屏操作后得到，那么此时渲染得到的是目标网页中的相应部分区域，而可以不是完整的目标页面，如果状态数据包含的是针对完整的目标页面进行截屏操作后得到，那么此时渲染得到的则是完整的目标网页。
目标网页可以为任意一种浏览器中的网页，例如电脑端、手机等电子设备中的浏览器程序中的网页，或者是其他非浏览器程序中的内嵌网页(例如通过微信打开网页链接得到的网页等)，等等。
可选地，在本发明实施例中，所述步骤143进一步可以包括：根据所述状态数据中的所述截屏配置数据，将所述状态数据中的虚拟DOM绘制到Canvas画布中，得到所述目标网页的渲染结果。
另外，在实际应用中，为了提高截屏渲染效果，可以根据所述状态数据中的所述截屏配置数据，将所述状态数据中的虚拟DOM绘制到Canvas画布中，得到所述目标网页的渲染结果。其中，Canvas用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，具有极大的应用价值。
其中，可以默认根据原始的状态数据中的截屏配置数据进行截屏渲染，同时在截屏展示过程中，展示端用户也可以根据需求实时调整截屏配置数据，进而调整截屏的渲染效果。当然，在本发明实施例中，展示端用户也可以在截屏渲染之前即根据需求重新设置截屏配置数据，那么此时则可以重新设置的截屏配置数据进行截屏渲染。
可选地，在本发明实施例中，所述目标服务器在接收到所述状态数据之后，根据所述状态数据构建所述目标网页的页面数据，所述步骤140进一步可以包括：从所述目标服务器中获取所述目标网页的页面数据并展示，得到所述目标网页的渲染结果。
如上述，在基于虚拟DOM进行截屏渲染时，一般需要借助浏览器，在浏览器中将所述状态数据中的虚拟DOM绘制到Canvas画布中。如果展示端未安装支持Canvas画布的浏览器，则可能导致无法渲染截屏，影响截屏渲染的适用性。
因此在本发明实施例中，为了避免上述无法渲染截屏的情况，以提高截屏渲染的适用性，可以设置所述目标服务器在接收到所述状态数据之后，根据所述状态数据预先构建所述目标网页的页面数据，该页面数据可以不受浏览器的限制，不管浏览器是否支持Canvas画布均可以完成截屏渲染。此时，在进行截屏渲染时，则可以从所述目标服务器中获取所述目标网页的页面数据并展示，得到所述目标网页的渲染结果。例如，可以在展示端设置一无头浏览器，进而通过该无头浏览器展示目标网页的页面数据，得到所述目标网页的渲染结果。
如下表(1)为截屏客户端的浏览器使用Html2Canvas与本发明实施例中的网页截屏处理方法，也即表(1)中的方案优化后的截屏性能对比：
表(1)
| 浏览器 | 原Html2Canvas | 方案优化后 |
| Firefox_78版本 | 耗时15秒 | 耗时2秒 |
| Chrome_83版本 | 耗时4秒 | 耗时2秒 |
| Internetexplorer11 | 耗时10秒 | 耗时3秒 |
其中，表(1)中数据取实验数据的平均值近似数(仅统计客户端性能提升)；截屏的目标页面为：http://vip.anjuke.com/househug/list/esfV2；机器参数为：型号HP440G6；window10系统；内存8GB；CPU3.2GHZ。
如下表(2)为不同网页截屏后得到的结果数据大小对比结果：
表(2)
| 对比页面 | 原Html2Canvas | 方案优化后 |
| http://vip.anjuke.com/househug/list/esfV2 | 3M图片bease64码 | 433k状态数据 |
| http://www.baidu.com | 611k图片bease64码 | 87k状态数据 |
| http://github.com | 2M图片bease64码 | 305k状态数据 |
| 自制空白页 | 83k图片bease64码 | 20k状态数据 |
其中，表(2)中数据取实验数据的平均值近似数(仅统计客户端性能提升)；截屏配置数据为：截屏页面宽度1920px，高度以当前页面高度为基准，其余参数均保持默认值；机器参数为：型号HP440G6；window10系统；内存8GB；CPU3.2GHZ。
由上述内容可知，在本发明实施例中，可以有效减轻用户浏览器截图性能损耗，避免线程阻塞、页面卡死，而且，采集的状态数据包含的是完整的页面结构，数据体积更小，传数量和存储量大大降低，使用灵活度十分高(不受制于当前时刻、机器限制、浏览器版本，清晰度不受制于客户端，可随时恢复，能够进行后期调整)，此外，能够兼容更多浏览器，不依赖浏览器版本。而且将截屏处理过程拆分为两个过程，将原来客户端的渲染工作分解：在客户端采集渲染所需数据并且进行序列化压缩、传输存储，对于不支持Canvas的浏览器不会影响状态数据的采集过程，由展示端承担渲染工作，以减轻客户端浏览器负担。
参照图3，示出了本发明实施例中一种网页截屏处理装置的结构示意图。
本发明实施例的网页截屏处理装置包括：节点树获取模块210、状态数据获取模块220和状态数据存储模块230。
下面分别详细介绍各模块的功能以及各模块之间的交互关系。
节点树获取模块210，用于响应于客户端针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；
状态数据获取模块220，用于将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；
状态数据存储模块230，用于将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程。
参照图4，在本发明实施例中，所述装置还可以包括：
页面渲染模块240，用于响应于展示端针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
可选地，所述状态数据存储模块230，具体可以用于：
将所述状态数据压缩后存储至所述目标服务器，并在压缩后的状态数据完全存储至所述目标服务器时，中断针对所述截屏操作指令的截屏操作处理流程，所述状态数据的压缩方式包括序列化压缩。
可选地，在本发明实施例中，所述页面渲染模块240，可以包括：
解压缩子模块，用于从所述目标服务器中获取所述压缩后的状态数据，并对所述压缩后的状态数据进行序列化解压缩，得到第一解压数据，所述第一解压数据中包括第一虚拟DOM、截屏配置数据；
实例方法构造子模块，用于针对所述第一解压数据中的第一虚拟DOM重新构造实例方法，得到解压缩后的状态数据；
页面渲染子模块，用于根据所述解压缩后的状态数据渲染得到所述目标网页。
可选地，所述页面渲染子模块，具体可以用于：
根据所述状态数据中的所述截屏配置数据，将所述状态数据中的虚拟DOM绘制到Canvas画布中，得到所述目标网页的渲染结果。
可选地，所述目标服务器在接收到所述状态数据之后，根据所述状态数据构建所述目标网页的页面数据；
所述页面渲染模块，具体可以用于：从所述目标服务器中获取所述目标网页的页面数据并展示，得到所述目标网页的渲染结果。
本发明实施例提供的网页截屏处理装置能够实现图1至图2的方法实施例中实现的各个过程，为避免重复，这里不再赘述。
优选的，本发明实施例还提供了一种电子设备，包括：处理器，存储器，存储在存储器上并可在处理器上运行的计算机程序，该计算机程序被处理器执行时实现上述网页截屏处理方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。
本发明实施例还提供了一种计算机可读存储介质，计算机可读存储介质上存储有计算机程序，计算机程序被处理器执行时实现上述网页截屏处理方法实施例的各个过程，且能达到相同的技术效果，为避免重复，这里不再赘述。其中，所述的计算机可读存储介质，如只读存储器(Read-Only Memory，简称ROM)、随机存取存储器(Random Access Memory，简称RAM)、磁碟或者光盘等。
本发明实施例另外提供了一种网页截屏处理系统，其特征在于，包括客户端、展示端和目标服务器，
其中，所述客户端用于：响应于针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程；
所述展示端用于：响应于针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
其中的展示端和客户端均可以为一种电子设备，而且可以为同一电子设备，也可以为两个电子设备，对此本发明实施例不加以限定。
图5为实现本发明各个实施例的一种电子设备的硬件结构示意图。
该电子设备500包括但不限于：射频单元501、网络模块502、音频输出单元503、输入单元504、传感器505、显示单元506、用户输入单元507、接口单元508、存储器509、处理器510、以及电源511等部件。本领域技术人员可以理解，图5中示出的电子设备结构并不构成对电子设备的限定，电子设备可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。在本发明实施例中，电子设备包括但不限于手机、平板电脑、笔记本电脑、掌上电脑、车载终端、可穿戴设备、以及计步器等。
应理解的是，本发明实施例中，射频单元501可用于收发信息或通话过程中，信号的接收和发送，具体的，将来自基站的下行数据接收后，给处理器510处理；另外，将上行的数据发送给基站。通常，射频单元501包括但不限于天线、至少一个放大器、收发信机、耦合器、低噪声放大器、双工器等。此外，射频单元501还可以通过无线通信系统与网络和其他设备通信。
电子设备通过网络模块502为用户提供了无线的宽带互联网访问，如帮助用户收发电子邮件、浏览网页和访问流式媒体等。
音频输出单元503可以将射频单元501或网络模块502接收的或者在存储器509中存储的音频数据转换成音频信号并且输出为声音。而且，音频输出单元503还可以提供与电子设备500执行的特定功能相关的音频输出(例如，呼叫信号接收声音、消息接收声音等等)。音频输出单元503包括扬声器、蜂鸣器以及受话器等。
输入单元504用于接收音频或视频信号。输入单元504可以包括图形处理器(Graphics Processing Unit，GPU)5041和麦克风5042，图形处理器5041对在视频捕获模式或图像捕获模式中由图像捕获装置(如摄像头)获得的静态图片或视频的图像数据进行处理。处理后的图像帧可以显示在显示单元506上。经图形处理器5041处理后的图像帧可以存储在存储器509(或其它存储介质)中或者经由射频单元501或网络模块502进行发送。麦克风5042可以接收声音，并且能够将这样的声音处理为音频数据。处理后的音频数据可以在电话通话模式的情况下转换为可经由射频单元501发送到移动通信基站的格式输出。
电子设备500还包括至少一种传感器505，比如光传感器、运动传感器以及其他传感器。具体地，光传感器包括环境光传感器及接近传感器，其中，环境光传感器可根据环境光线的明暗来调节显示面板5061的亮度，接近传感器可在电子设备500移动到耳边时，关闭显示面板5061和/或背光。作为运动传感器的一种，加速计传感器可检测各个方向上(一般为三轴)加速度的大小，静止时可检测出重力的大小及方向，可用于识别电子设备姿态(比如横竖屏切换、相关游戏、磁力计姿态校准)、振动识别相关功能(比如计步器、敲击)等；传感器505还可以包括指纹传感器、压力传感器、虹膜传感器、分子传感器、陀螺仪、气压计、湿度计、温度计、红外线传感器等，在此不再赘述。
显示单元506用于显示由用户输入的信息或提供给用户的信息。显示单元506可包括显示面板5061，可以采用液晶显示器(Liquid Crystal Display，LCD)、有机发光二极管(Organic Light-Emitting Diode,OLED)等形式来配置显示面板5061。
用户输入单元507可用于接收输入的数字或字符信息，以及产生与电子设备的用户设置以及功能控制有关的键信号输入。具体地，用户输入单元507包括触控面板5071以及其他输入设备5072。触控面板5071，也称为触摸屏，可收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板5071上或在触控面板5071附近的操作)。触控面板5071可包括触摸检测装置和触摸控制器两个部分。其中，触摸检测装置检测用户的触摸方位，并检测触摸操作带来的信号，将信号传送给触摸控制器；触摸控制器从触摸检测装置上接收触摸信息，并将它转换成触点坐标，再送给处理器510，接收处理器510发来的命令并加以执行。此外，可以采用电阻式、电容式、红外线以及表面声波等多种类型实现触控面板5071。除了触控面板5071，用户输入单元507还可以包括其他输入设备5072。具体地，其他输入设备5072可以包括但不限于物理键盘、功能键(比如音量控制按键、开关按键等)、轨迹球、鼠标、操作杆，在此不再赘述。
进一步的，触控面板5071可覆盖在显示面板5061上，当触控面板5071检测到在其上或附近的触摸操作后，传送给处理器510以确定触摸事件的类型，随后处理器510根据触摸事件的类型在显示面板5061上提供相应的视觉输出。虽然在图5中，触控面板5071与显示面板5061是作为两个独立的部件来实现电子设备的输入和输出功能，但是在某些实施例中，可以将触控面板5071与显示面板5061集成而实现电子设备的输入和输出功能，具体此处不做限定。
接口单元508为外部装置与电子设备500连接的接口。例如，外部装置可以包括有线或无线头戴式耳机端口、外部电源(或电池充电器)端口、有线或无线数据端口、存储卡端口、用于连接具有识别模块的装置的端口、音频输入/输出(I/O)端口、视频I/O端口、耳机端口等等。接口单元508可以用于接收来自外部装置的输入(例如，数据信息、电力等等)并且将接收到的输入传输到电子设备500内的一个或多个元件或者可以用于在电子设备500和外部装置之间传输数据。
存储器509可用于存储软件程序以及各种数据。存储器509可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序(比如声音播放功能、图像播放功能等)等；存储数据区可存储根据手机的使用所创建的数据(比如音频数据、电话本等)等。此外，存储器509可以包括高速随机存取存储器，还可以包括非易失性存储器，例如至少一个磁盘存储器件、闪存器件、或其他易失性固态存储器件。
处理器510是电子设备的控制中心，利用各种接口和线路连接整个电子设备的各个部分，通过运行或执行存储在存储器509内的软件程序和/或模块，以及调用存储在存储器509内的数据，执行电子设备的各种功能和处理数据，从而对电子设备进行整体监控。处理器510可包括一个或多个处理单元；优选的，处理器510可集成应用处理器和调制解调处理器，其中，应用处理器主要处理操作系统、用户界面和应用程序等，调制解调处理器主要处理无线通信。可以理解的是，上述调制解调处理器也可以不集成到处理器510中。
电子设备500还可以包括给各个部件供电的电源511(比如电池)，优选的，电源511可以通过电源管理系统与处理器510逻辑相连，从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。
另外，电子设备500包括一些未示出的功能模块，在此不再赘述。
需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本发明各个实施例所述的方法。
上面结合附图对本发明的实施例进行了描述，但是本发明并不局限于上述的具体实施方式，上述的具体实施方式仅仅是示意性的，而不是限制性的，本领域的普通技术人员在本发明的启示下，在不脱离本发明宗旨和权利要求所保护的范围情况下，还可做出很多形式，均属于本发明的保护之内。
本领域普通技术人员可以意识到，结合本发明实施例中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、或者计算机软件和电子硬件的结合来实现。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本发明的范围。
所属领域的技术人员可以清楚地了解到，为描述的方便和简洁，上述描述的系统、装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
在本申请所提供的实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，所述单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或单元的间接耦合或通信连接，可以是电性，机械或其它的形式。
所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本实施例方案的目的。
另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以两个或两个以上单元集成在一个单元中。
所述功能如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
以上所述，仅为本发明的具体实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到变化或替换，都应涵盖在本发明的保护范围之内。因此，本发明的保护范围应以权利要求的保护范围为准。
Claims (13)
1.一种网页截屏处理方法，其特征在于，包括：
响应于客户端针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；
将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；所述状态数据包括所述虚拟DOM和所述截屏配置数据；
将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程；
响应于展示端针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
2.根据权利要求1所述的方法，其特征在于，所述将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程的步骤，包括：
将所述状态数据压缩后存储至所述目标服务器，并在压缩后的状态数据完全存储至所述目标服务器时，中断针对所述截屏操作指令的截屏操作处理流程，所述状态数据的压缩方式包括序列化压缩。
3.根据权利要求2所述的方法，其特征在于，所述从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染的步骤，包括：
从所述目标服务器中获取所述压缩后的状态数据，并对所述压缩后的状态数据进行序列化解压缩，得到第一解压数据，所述第一解压数据中包括第一虚拟DOM、截屏配置数据；
并针对所述第一解压数据中的第一虚拟DOM重新构造实例方法，得到解压缩后的状态数据；
根据所述解压缩后的状态数据渲染得到所述目标网页。
4.根据权利要求3所述的方法，其特征在于，所述根据所述解压缩后的状态数据渲染得到所述目标网页的步骤，包括：
根据所述状态数据中的所述截屏配置数据，将所述状态数据中的虚拟DOM绘制到Canvas画布中，得到所述目标网页的渲染结果。
5.根据权利要求1所述的方法，其特征在于，所述目标服务器在接收到所述状态数据之后，根据所述状态数据构建所述目标网页的页面数据；
所述从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染的步骤，包括：
从所述目标服务器中获取所述目标网页的页面数据并展示，得到所述目标网页的渲染结果。
6.一种网页截屏处理装置，其特征在于，包括：
节点树获取模块，用于响应于客户端针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；
状态数据获取模块，用于将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；所述状态数据包括所述虚拟DOM和所述截屏配置数据；
状态数据存储模块，用于将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程；
页面渲染模块，用于响应于展示端针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
7.根据权利要求6所述的装置，其特征在于，所述状态数据存储模块，具体用于：
将所述状态数据压缩后存储至所述目标服务器，并在压缩后的状态数据完全存储至所述目标服务器时，中断针对所述截屏操作指令的截屏操作处理流程，所述状态数据的压缩方式包括序列化压缩。
8.根据权利要求7所述的装置，其特征在于，所述页面渲染模块，包括：
解压缩子模块，用于从所述目标服务器中获取所述压缩后的状态数据，并对所述压缩后的状态数据进行序列化解压缩，得到第一解压数据，所述第一解压数据中包括第一虚拟DOM、截屏配置数据；
实例方法构造子模块，用于针对所述第一解压数据中的第一虚拟DOM重新构造实例方法，得到解压缩后的状态数据；
页面渲染子模块，用于根据所述解压缩后的状态数据渲染得到所述目标网页。
9.根据权利要求8所述的装置，其特征在于，所述页面渲染子模块，具体用于：
根据所述状态数据中的所述截屏配置数据，将所述状态数据中的虚拟DOM绘制到Canvas画布中，得到所述目标网页的渲染结果。
10.根据权利要求6所述的装置，其特征在于，所述目标服务器在接收到所述状态数据之后，根据所述状态数据构建所述目标网页的页面数据；
所述页面渲染模块，具体用于：从所述目标服务器中获取所述目标网页的页面数据并展示，得到所述目标网页的渲染结果。
11.一种电子设备，其特征在于，包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述计算机程序被所述处理器执行时实现如权利要求1至5中任一项所述的网页截屏处理方法的步骤。
12.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被处理器执行时实现如权利要求1至5中任一项所述的网页截屏处理方法的步骤。
13.一种网页截屏处理系统，其特征在于，包括客户端、展示端和目标服务器，
其中，所述客户端用于：响应于针对目标网页的截屏操作指令，获取所述目标网页对应的目标节点树；将所述目标节点树解析生成虚拟DOM，同时整合所述截屏操作指令的截屏配置数据，得到所述截屏操作指令对应的状态数据，所述状态数据包括所述虚拟DOM和所述截屏配置数据，所述虚拟DOM为根据真实DOM节点生成的对象实例；将所述状态数据存储至目标服务器，并中断针对所述截屏操作指令的截屏操作处理流程；
所述展示端用于：响应于针对所述目标网页的截屏渲染指令，从所述目标服务器中获取所述状态数据，并返回至所述展示端进行页面渲染。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010981375.6A CN112068919B (zh) | 2020-09-17 | 2020-09-17 | 一种网页截屏处理方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202010981375.6A CN112068919B (zh) | 2020-09-17 | 2020-09-17 | 一种网页截屏处理方法、装置、电子设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112068919A CN112068919A (zh) | 2020-12-11 |
| CN112068919B true CN112068919B (zh) | 2024-01-30 |
Family
ID=73680999
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202010981375.6A Active CN112068919B (zh) | 2020-09-17 | 2020-09-17 | 一种网页截屏处理方法、装置、电子设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112068919B (zh) |
Families Citing this family (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN114968423B (zh) * | 2021-02-19 | 2024-05-14 | 华为技术有限公司 | 一种长页面截屏方法及电子设备 |
| CN112905944B (zh) * | 2021-04-06 | 2023-06-20 | 成都新希望金融信息有限公司 | 页面在线动态生成方法、装置、电子设备和可读存储介质 |
| CN113254823A (zh) * | 2021-05-13 | 2021-08-13 | 浙江网商银行股份有限公司 | 网页数据处理方法及装置 |
| CN114119375A (zh) * | 2022-01-25 | 2022-03-01 | 广州市玄武无线科技股份有限公司 | 一种实现iOS端自动生成长截图的方法及系统 |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8225197B1 (en) * | 2011-06-22 | 2012-07-17 | Google Inc. | Rendering approximate webpage screenshot client-side |
| CN102841901A (zh) * | 2011-06-23 | 2012-12-26 | 腾讯科技（深圳）有限公司 | 一种网页显示的方法和装置 |
| CN104834753A (zh) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | 生成网页截图的方法及其装置 |
| CN106960062A (zh) * | 2017-04-12 | 2017-07-18 | 四川九鼎瑞信软件开发有限公司 | 网页截图方法及系统 |
| CN110244896A (zh) * | 2019-06-24 | 2019-09-17 | 北京向上一心科技有限公司 | 网页内截图方法、装置、控制器及存储介质 |
| CN111443969A (zh) * | 2020-03-24 | 2020-07-24 | 深圳前海微众银行股份有限公司 | 一种录制网页页面的方法及装置 |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9576070B2 (en) * | 2014-04-23 | 2017-02-21 | Akamai Technologies, Inc. | Creation and delivery of pre-rendered web pages for accelerated browsing |
| US9934214B2 (en) * | 2014-12-11 | 2018-04-03 | International Business Machines Corporation | DOM snapshot capture |
-
2020
- 2020-09-17 CN CN202010981375.6A patent/CN112068919B/zh active Active
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US8225197B1 (en) * | 2011-06-22 | 2012-07-17 | Google Inc. | Rendering approximate webpage screenshot client-side |
| CN102841901A (zh) * | 2011-06-23 | 2012-12-26 | 腾讯科技（深圳）有限公司 | 一种网页显示的方法和装置 |
| CN104834753A (zh) * | 2015-05-28 | 2015-08-12 | 百度在线网络技术（北京）有限公司 | 生成网页截图的方法及其装置 |
| CN106960062A (zh) * | 2017-04-12 | 2017-07-18 | 四川九鼎瑞信软件开发有限公司 | 网页截图方法及系统 |
| CN110244896A (zh) * | 2019-06-24 | 2019-09-17 | 北京向上一心科技有限公司 | 网页内截图方法、装置、控制器及存储介质 |
| CN111443969A (zh) * | 2020-03-24 | 2020-07-24 | 深圳前海微众银行股份有限公司 | 一种录制网页页面的方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112068919A (zh) | 2020-12-11 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN112068919B (zh) | 一种网页截屏处理方法、装置、电子设备及存储介质 | |
| CN110096326B (zh) | 一种截屏方法、终端设备及计算机可读存储介质 | |
| CN109445894A (zh) | 一种截图方法及电子设备 | |
| CN110674662B (zh) | 一种扫描方法及终端设备 | |
| CN109213407B (zh) | 一种截图方法及终端设备 | |
| CN111428164A (zh) | 页面显示方法、装置、移动终端、电子设备及存储介质 | |
| CN110087149A (zh) | 一种视频图像分享方法、装置及移动终端 | |
| CN109189303B (zh) | 文本编辑方法及移动终端 | |
| CN107911536B (zh) | 一种跨应用程序访问方法、设备及计算机可读存储介质 | |
| CN113313804B (zh) | 一种图像渲染方法、装置、电子设备和存储介质 | |
| CN109669656B (zh) | 一种信息显示方法及终端设备 | |
| CN107992615B (zh) | 一种网址推荐方法、服务器及终端 | |
| CN110795002A (zh) | 一种截图方法及终端设备 | |
| CN108287644B (zh) | 一种应用程序的信息显示方法及移动终端 | |
| CN108196781B (zh) | 界面的显示方法和移动终端 | |
| CN107957914B (zh) | 一种信息处理方法及移动终端 | |
| CN109063079B (zh) | 网页标注方法及电子设备 | |
| CN111399819A (zh) | 数据生成方法、装置、电子设备及存储介质 | |
| CN110851219A (zh) | 一种信息处理方法及电子设备 | |
| CN111142759B (zh) | 信息的发送方法及电子设备 | |
| CN111163227B (zh) | 一种分享方法及电子设备 | |
| CN110471895B (zh) | 分享方法及终端设备 | |
| CN109889568B (zh) | 一种数据导出方法、服务器及系统 | |
| CN108804615B (zh) | 一种分享方法及服务器 | |
| CN110888572A (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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |