WO2021068765A1

WO2021068765A1 - web页面截屏方法、装置、设备及计算机可读存储介质

Info

Publication number: WO2021068765A1
Application number: PCT/CN2020/117821
Authority: WO
Inventors: 李为; 卢道和; 林挺; 黄山
Original assignee: 深圳前海微众银行股份有限公司
Priority date: 2019-10-10
Filing date: 2020-09-25
Publication date: 2021-04-15
Also published as: CN110704784A

Abstract

一种web页面截屏方法、装置、设备及计算机可读存储介质，该方法包括：在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息（S10）；在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸（S20）；根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像（S30）。

Description

web页面截屏方法、装置、设备及计算机可读存储介质

相关申请的交叉引用

本申请要求于2019年10月10日提交中国专利局、申请号为201910959926.6、申请名称为“web页面截屏方法、装置、设备及计算机可读存储介质”的中国专利申请的优先权，其专利申请的全部内容通过引用结合在本申请中。

技术领域

本申请涉及金融科技（Fintech）技术领域，尤其涉及web页面截屏方法、装置、设备及计算机可读存储介质。

背景技术

随着互联网技术，尤其是互联网金融科技（Fintech）的飞速发展，越来越多的技术（大数据、分布式、区块链Blockchain、人工智能等）应用在金融领域。

金融网页信息呈爆炸式增长，用户查看金融对应的web页面时通常会对web页面进行截屏操作，当前web页面的截屏操作是按照屏幕尺寸截取，例如，屏幕尺寸为1920*3000，用户最大只能截取1920*3000的屏幕，若web页面的页面尺寸大于1920*3000，则只能部分截取；若用户需要截取的web页面中小于1920*3000的部分区域时，也不可以进行突出的截屏显示，也就是说当前web页面的截屏图像并不可以按照用户的需求。

技术解决方案

本申请的主要目的在于提出一种web页面截屏方法、装置、设备及计算机可读存储介质，旨在解决当前web页面截屏图像不符合用户需求的技术问题。

为实现上述目的，本申请提供一种web页面截屏方法，所述web页面截屏方法包括如下步骤：

在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息；

在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸；以及

根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像。

在一实施例中，所述在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息的步骤，包括：

在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，确定所述页面标识对应的页面代码；

在所述页面代码中添加预设元素标识的html元素，将所述页面代码和所述html元素作为页面信息关联保存；

在接收到页面加载请求时，加载所述页面标识对应的页面信息，判断已加载的页面信息中是否存在预设元素标识的html元素；

若已加载的页面信息中不存在预设元素标识的html元素，则判定所述页面标识对应的页面信息未加载完成；以及

若已加载的页面信息中存在预设元素标识的html元素，则判定所述页面标识对应的页面信息已加载完成。

在一实施例中，所述在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸的步骤，包括：

在所述页面标识对应的页面信息加载完成时，获取所述页面信息中预设元素标识的html元素；以及

以所述html元素为起点，计算与所述html元素相邻的sibling元素的元素总尺寸，将所述元素总尺寸作为所述页面标识对应web页面的实际尺寸。

在一实施例中，所述根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像的步骤之前，包括：

输出比例设置提示，以供用户基于所述比例设置提示设置截屏图像的缩放比例；

获取基于所述比例设置提示输入的缩放比例，将所述缩放比例作为所述web页面截屏请求对应的缩放比例；

所述根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像的步骤，包括：

计算所述实际尺寸和所述缩放比例的乘积，将所述乘积作为显示尺寸，根据所述显示尺寸进行页面渲染，生成截屏图像。

在一实施例中，所述根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像的步骤之后，包括：

在接收到截屏图像分享指令时，获取所述截屏图像分享指令对应的用户标识；以及

将所述截屏图像并保存到目标路径，生成所述目标路径对应的链接信息，并将所述链接信息发送至所述用户标识对应的客户端。

在接收到基于所述截屏图像触发的邮件发送请求时，获取所述邮件发送请求对应的收件人标识；以及

将所述截屏图像添加到所述邮件发送请求对应的邮件界面，生成包含所述截屏图像的邮件并发送所述收件人标识对应的客户端。

在一实施例中，所述在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息的步骤之前，包括：

在接收到基于邮件界面触发的图像添加请求时，获取所述图像添加请求对应的页面标识，并基于所述页面标识触发web页面截屏请求；

所述在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸的步骤之后，包括：

获取所述邮件界面的界面尺寸，计算所述界面尺寸与所述实际尺寸的比值，将所述比值作为所述web页面截屏请求对应的缩放比例；

根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染；以及

将所述截屏图像添加到所述邮件界面，生成包含所述截屏图像的邮件并发送。

此外，为实现上述目的，本申请还提供一种web页面截屏装置，所述web页面截屏装置包括：

请求接收模块，用于在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息；

尺寸计算模块，用于在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸；

图像生成模块，用于根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像。

此外，为实现上述目的，本申请还提供一种web页面截屏设备，所述web页面截屏设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的web页面截屏程序，所述web页面截屏程序被所述处理器执行时实现如上所述的web页面截屏方法的步骤。

此外，为实现上述目的，本申请还提供一种计算机可读存储介质，所述计算机可读存储介质上存储有web页面截屏程序，所述web页面截屏程序被处理器执行时实现如上所述的web页面截屏方法的步骤。

本申请提供一种web页面截屏方法、装置、设备及计算机可读存储介质。本申请实施例中在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息；在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸；根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像，本申请实施例中web页面截屏设备根据截屏请求对应的缩放比例生成截屏图像，使得截屏图像符合用户的需求。

附图说明

图1是本申请实施例方案涉及的硬件运行环境的设备结构示意图；

图2为本申请web页面截屏方法第一实施例的流程示意图；

图3为本申请web页面截屏方法第一实施例的具体场景示意图；

图4为本申请web页面截屏方法第二实施例的流程示意图；

图5为本申请web页面截屏装置一实施例的功能模块示意图。

本申请目的的实现、功能特点及优点将结合实施例，参照附图做进一步说明。

本发明的实施方式

应当理解，此处所描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

如图1所示，图1是本申请实施例方案涉及的硬件运行环境的设备结构示意图。

本申请实施例web页面截屏设备可以是PC机或服务器。

如图1所示，该web页面截屏设备可以包括：处理器1001，例如CPU，网络接口1004，用户接口1003，存储器1005，通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。用户接口1003可以包括显示屏（Display）、输入单元比如键盘（Keyboard），可选用户接口1003还可以包括标准的有线接口、无线接口。网络接口1004可选的可以包括标准的有线接口、无线接口（如WI-FI接口）。存储器1005可以是高速RAM存储器，也可以是稳定的存储器（non-volatile memory），例如磁盘存储器。存储器1005可选的还可以是独立于前述处理器1001的存储装置。

本领域技术人员可以理解，图1中示出的设备结构并不构成对设备的限定，可以包括比图示更多或更少的部件，或者组合某些部件，或者不同的部件布置。

如图1所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及web页面截屏程序。

在图1所示的设备中，网络接口1004主要用于连接后台服务器，与后台服务器进行数据通信；用户接口1003主要用于连接客户端（用户端），与客户端进行数据通信；而处理器1001可以用于调用存储器1005中存储的web页面截屏程序，并执行下述web页面截屏方法中的操作，在所述处理器上运行的web页面截屏程序被执行时所实现的方法可参照本申请web页面截屏方法各个实施例，此处不再赘述。

基于上述硬件结构，提出本申请web页面截屏方法实施例。

参照图2，图2为本申请web页面截屏方法第一实施例的流程示意图，所述web页面截屏方法包括：

步骤S10，在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息。

本实施例中web页面截屏方法应用于web页面截屏设备，web页面截屏设备接收web页面截屏请求，web页面截屏请求的触发方式不作具体限定，即，web页面截屏请求可以用户主动触发的，例如，用户在web页面截屏设备对应的显示界面上点击截屏图标，web页面截屏设备获取当前显示界面对应的页面标识（页面标识是指识别web页面的标识信息，例如，页面标识为页面地址信息），并基于该页面标识触发web页面截屏请求；此外，web页面截屏请求还可以是web页面截屏设备自动触发的，例如，web页面截屏设备中预设web页面截屏条件：每天凌晨自动进行web页面截屏，web页面截屏设备在到达凌晨时，自动触发web页面截屏请求。

web页面截屏设备在接收到web页面截屏请求时，web页面截屏设备获取web页面截屏请求对应的页面标识，web页面截屏设备加载页面标识对应的页面信息，例如，页面标识为页面地址信息，web页面截屏设备查询预设的页面代码库获取页面地址信息对应的页面信息，以完成页面标识对应页面信息的加载。

步骤S20，在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸。

web页面截屏设备检测页面标识对应的页面信息的加载状态，判断页面标识对应的页面信息是否已加载完成，本实施例中web页面截屏设备判断页面标识对应的页面信息是否已加载完成可以通过不同的方式实现，具体地：

实现方式一：web页面截屏设备中预设时长，预设时长可以根据web页面截屏设备所处的网络环境设置，预设时长还可以根据页面信息的信息量设置，例如，预设时长设置为10分钟，即，web页面截屏设备在检测到页面信息加载时长到达预设时长，web页面截屏设备判定页面标识对应的页面信息加载完成。

实现方式二：web页面截屏设备在页面标识对应页面代码中添加完成标记，web页面截屏设备获取已加载的页面信息，若已加载页面信息中不包含完成标记，web页面截屏设备判定页面标识对应的页面信息未加载完成；若已加载页面信息中包含完成标记，web页面截屏设备判定页面标识对应的页面信息加载完成，

本实施例的上述实现方式中，实现方式一中设置预设时长判断页面信息是否加载完成，不需要web页面截屏设备进行检测操作，但是等待预设时间需要的时间较长；实现方式二检测页面信息中是否包含完成标记，可以快速地识别页面信息是否加载完成，但是需要web页面截屏设备进行检测操作，在实际页面信息加载判断时，用户根据场景选择较为合理的方式。

web页面截屏设备检测到页面标识对应的页面信息加载完成时，web页面截屏设备根据加载的页面信息计算页面标识对应web页面的实际尺寸，即，web页面截屏设备解析页面信息，获取页面信息中包含的图像元素，及各图像元素的排列方式，web页面截屏设备按照各个图像元素的排列方式和各个图像元素的尺寸，计算页面标识对应web页面的实际尺寸。

例如，web页面中包含4个图像元素，图像元素1（长10cm高5cm）、图像元素2（长6cm高3cm）、图像元素3（长12cm高9cm）和图像元素4（长15cm高10cm），图像元素1和图像元素2横向并列排列、图像元素3在图像元素1和图像元素2的下方、图像元素4在图像元素3的下方，因此web页面的实际尺寸为：长16cm（16（10+6）、12和15中取最大值）、高24cm（24=5(3)+9+10）。

本实施例中web页面截屏设备在页面信息加载完成时，web页面截屏设备根据页面信息计算web页面的实际尺寸，此时，若用户没有设置截屏图像的尺寸信息，web页面截屏设备根据页面信息，渲染生成实际尺寸对应的截屏图像，即web页面截屏设备将页面标识对应的web页面进行等比例渲染完整截屏。

此外，若用户设置截屏图像的尺寸信息，则web页面截屏设备按照用户设的尺寸信息进行截屏操作，具体地：

步骤S30，根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像。

web页面截屏设备获取web页面截屏请求对应的缩放比例，web页面截屏设备用实际尺寸乘以缩放比例得到截屏图像的显示尺寸，web页面截屏设备按照显示尺寸进行页面渲染，生成截屏图像，具体地，步骤S30之前还包括：

步骤a1，输出比例设置提示，以供用户基于所述比例设置提示设置截屏图像的缩放比例；

步骤a2，获取基于所述比例设置提示输入的缩放比例，将所述缩放比例作为所述web页面截屏请求对应的缩放比例。

web页面截屏设备输出比例设置提示，以供用户基于比例设置提示设置截屏图像的缩放比例；可以理解的是，比例设置提示的输出时间、输出方式和具体内容不作限定，即，比例设置提示的输出时间可以是：接收到web页面截屏请求之后，还可以是页面标识对应的页面信息加载之后；比例设置提示的输出方式：可以是语音信息，还可以是弹出窗口提示。

web页面截屏设备获取基于比例设置提示输入的缩放比例，web页面截屏设备将用户输入的缩放比例作为web页面截屏请求对应的缩放比例，使得web页面截屏设备按照缩放比例进行页面渲染生成截屏图像，即，web页面截屏设备计算实际尺寸和缩放比例乘积作为截屏图像的显示尺寸，web页面截屏设备根据显示尺寸进行页面渲染，生成截屏图像。

例如，参照图3，当用户在web页面上选择缩放方式为“实际尺寸”时，web页面截屏设备根据web页面上的实际尺寸准确地显示生成截屏图像，若用户在web页面上选择缩放比例为0.8（表示缩放为原始组件大小的0.8倍），web页面截屏设备根据web页面上的实际尺寸*缩放比例准确地显示生成截屏图像，本实施例中通过设置截屏图像的缩放比例，web页面截屏设备根据截屏请求对应的缩放比例生成截屏图像，使得截屏图像符合用户的需求，也方便用户调整web页面的排版，使内容能够适应总体大小。

可以理解的是，web页面截屏设备中还支持用户直接设置截屏图像的显示尺寸，以使web页面截屏设备按照显示尺寸进行页面渲染，生成截屏图像。

在一实施例中，参照图4，基于本申请web页面截屏方法第一实施例，提出本申请web页面截屏方法第二实施例。

本实施例是第一实施例中步骤S10的细化步骤，本实施例中给出了一种判断页面信息是否加载完成的具体实现方式，包括：

步骤S11，在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，确定所述页面标识对应的页面代码。

web页面截屏设备在接收到web页面截屏请求时，web页面截屏设备获取web页面截屏请求对应的页面标识，web页面截屏设备查询代码数据库，确定代码数据库中页面标识对应的页面代码。

步骤S12，在所述页面代码中添加预设元素标识的html元素，将所述页面代码和所述html元素作为页面信息关联保存。

web页面截屏设备在页面代码中添加预设元素标识的html元素，web页面截屏设备将页面代码和添加的html元素作为页面信息，web页面截屏设备建立页面代码和添加的html元素关联关系，web页面截屏设备将相互关联的页面代码和html元素作为页面信息，并保存至代码数据库。

步骤S13，在接收到页面加载请求时，加载所述页面标识对应的页面信息，判断已加载的页面信息中是否存在预设元素标识的html元素。

web页面截屏设备在接收到页面加载请求时，web页面截屏设备从代码数据库中加载页面标识对应的页面信息，web页面截屏设备实时地判断已加载的页面信息中是否存在预设元素标识的html元素，其中，预设元素标识是指预先设置的元素标识，例如预设元素标识为phantomRenderSign。

步骤S14，若已加载的页面信息中不存在预设元素标识的html元素，则判定所述页面标识对应的页面信息未加载完成。

若已加载的页面信息中不存在预设元素标识的html元素，web页面截屏设备判定页面标识对应的页面信息未加载完成，web页面截屏设备继续进行加载。

步骤S15，若已加载的页面信息中存在预设元素标识的html元素，则判定所述页面标识对应的页面信息已加载完成。

若已加载的页面信息中存在预设元素标识的html元素，web页面截屏设备判定页面标识对应的页面信息已加载完成，使得web页面截屏设备按照加载完成的页面信息计算页面标识对应的web页面的实际尺寸。

本实施例中web页面截屏设备在页面代码中添加预设元素标识的html元素，在页面信息加载完成时，会生成这个html元素，web页面截屏设备检测到有这个html元素，就能确定页面信息已经加载完成，这样有了这个判断依据web页面截屏设备在进行页面信息加载时，就不需要等待较长的时间，缩短了页面信息的加载时间，在一实施例中提高了web页面截屏设备截屏效率。

即，当前web页面信息加载没有办法判断数据什么时候加载完了，所以必须要设定一个等待数据加载的时间，这个时间经过多次试验，大概10分钟是一个安全时间，10分钟数据肯定已经加载完了，但是这就意味着要在web页面截图时需要等待10分钟才能进行接下来的截图操作，这个时间也可以设置得短一点，但这就会有风险，可能会出现生成预览图时数据还没加载完成导致页面为空的情况。本实施例中使用了在页面代码中添加预设元素标识的html元素的这个方法，在数据加载完成时会生成这个html元素，只要检测到有这个元素了，就能确定数据已经加载完成了，这样有了这个判断依据，可以在有这个元素之后就可以立即可以开始生成预览图，不需要再等待10分钟了，大大地提升了效率。

在一实施例中，基于本申请web页面截屏方法第二实施例，提出本申请web页面截屏方法第三实施例。

本实施例是第一实施例中步骤S20的细化，本实施例中给出了一种计算web页面实际尺寸的具体实现方式，包括：

在所述页面标识对应的页面信息加载完成时，获取所述页面信息中预设元素标识的html元素；

即，web页面截屏设备在页面信息加载完成时，web页面截屏设备获取页面信息中预设元素标识的html元素；web页面截屏设备以预设元素标识的html元素为起点，web页面截屏设备获取与html元素相邻的sibling元素，和各sibling元素的元素尺寸，web页面截屏设备将各个元素尺寸累加得到元素总尺寸，web页面截屏设备将元素总尺寸作为页面标识对应web页面的实际尺寸。

例如，web页面截屏设备以html元素为起始点，去计算与html元素相邻的sibling元素的最大宽高，得到web页面的实际尺寸，可以理解的是，若页面信息中没有这个phantomRenderSign元素，web页面截屏设备只能默认的屏幕尺寸进行截屏操作，这种截屏方式不足之处在于：web页面中空余部分较多，有实质内容的信息尺寸可能远远比屏幕尺寸小，那么生成截屏图像后，会出现大片空白，影响展示效果；或者web页面的实际尺寸大于web页面截屏设备的屏幕尺寸时，那么多出来的内容就没有办法完整的显示。

本实施例中web页面截屏设备根据页面信息中预设元素标识的html元素，快速地计算web页面的实际尺寸，使得web页面截屏设备可以根据计算得到的实际尺寸进行截屏操作。

在一实施例中，基于本申请web页面截屏方法上述实施例，提出本申请web页面截屏方法第四实施例。

本实施例是第一实施例中步骤S30之后的步骤，本实施例与上述实施例的区别在于：

在接收到截屏图像分享指令时，获取所述截屏图像分享指令对应的用户标识；

web页面截屏设备接收截屏分享指令，截屏分享指令的触发方式不作具体限定，web页面截屏设备在接收到截屏图像分享指令时，web页面截屏设备获取截屏图像分享指令对应的用户标识，用户标识是指用户的标识信息，例如，即时通讯软件中的用户账户。

web页面截屏设备调用预设的数据存放接口，通过预设的数据存放接口将截屏图像并保存到目标路径，web页面截屏设备生成目标路径对应的链接信息，web页面截屏设备将链接信息发送至用户标识对应的客户端，使得用户通过链接信息确定目标途径，以查看截屏图像。

本实施例中web页面截屏设备通过预设的数据存放接口将截屏图像保存目标路径，并生成目标路径的链接信息，使得用户通过链接信息访问目标路径，获取到截屏图像，方便了用户操作。可以理解的是，web页面截屏设备还可以直接将截屏图像发送至用户标识对应的客户端，使得用户查看截屏图像。

在一实施例中，基于本申请web页面截屏方法上述实施例，提出本申请web页面截屏方法第五实施例。

在接收到基于所述截屏图像触发的邮件发送请求时，获取所述邮件发送请求对应的收件人标识；

即，web页面截屏设备在接收到基于截屏图像触发的邮件发送请求时，web页面截屏设备获取邮件发送请求对应的收件人标识（收件人标识是指收件人邮箱账户信息）；web页面截屏设备将截屏图像添加到邮件发送请求对应的邮件界面，生成包含截屏图像的邮件，web页面截屏设备将包含截屏图像的邮件发送收件人标识对应的客户端，以使收件人进行查看。

本实施例中在截屏完成之后，web页面截屏设备将截屏得到的截屏图像作为邮件内容发送客户端，方便收件人查看截屏图像。

此外，本实施例还可以与本申请第四实施例进行结合，web页面截屏设备在接收到基于截屏图像触发的邮件发送请求时，web页面截屏设备将截屏图像并保存到目标路径，并生成目标路径对应的链接信息，web页面截屏设备将链接信息作为邮件，发送至收件人标识对应的客户端。

在一实施例中，基于本申请web页面截屏方法上述实施例，提出本申请web页面截屏方法第六实施例。

本实施例中主要针对邮件发送截屏图像，本实施例与第五实施例的区别在于，第五实施例是用户在web页面上进行截屏得到截屏图像，用户基于截屏图像触发邮件操作，web页面截屏设备将得到的截屏图像作为邮件内容进行发送；而本实施例中则是用户在邮件界面上触发截屏请求，web页面截屏设备根据邮件界面信息进行截屏操作。具体地，包括：

在接收到基于邮件界面触发的图像添加请求时，获取所述图像添加请求对应的页面标识，并基于所述页面标识触发web页面截屏请求。

用户在web页面截屏设备开启邮箱应用程序，邮箱应用程序的种类不作限定，即，邮箱应用程序可以是Outlook、foxmail、常见版本型号的ios/Android客户端、企业微信、网页端等，web页面截屏设备的显示界面中显示邮件界面，用户在邮件界面触发图像添加请求，触发方式不作具体限定；web页面截屏设备在接收到基于邮件界面触发的图像添加请求时，web页面截屏设备获取图像添加请求对应的页面标识。

web页面截屏设备获取到页面标识之后，基于页面标识触发web页面截屏请求，即，web页面截屏设备查询页面标识对应的web页面，并跳转至web页面上触发web页面截屏请求。

在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息。

web页面截屏设备接收基于页面标识触发web页面截屏请求时，web页面截屏设备加载页面标识对应的页面信息；例如，页面标识为页面地址信息，web页面截屏设备查询预设的页面代码库获取页面地址信息对应的页面信息，以完成页面标识对应页面信息的加载。

在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸；

根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染；

即，web页面截屏设备在页面标识对应的页面信息加载完成时，web页面截屏设备根据页面信息计算页面标识对应web页面的实际尺寸；web页面截屏设备获取邮件界面的界面尺寸，并计算界面尺寸与实际尺寸的比值，web页面截屏设备将比值作为web页面截屏请求对应的缩放比例，web页面截屏设备根据实际尺寸和web页面截屏请求对应的缩放比例进行页面渲染；将截屏图像添加到邮件界面，生成包含截屏图像的邮件并发送。

当前邮件系统通常只能添加预先保存的截屏图像，而本实施例中可以从邮件界面实时地跳转至web页面，并从web页面中截取与邮件界面适配的截屏图像，这样的操作方式使得用户的操作更加便捷，同时截屏图像可以在邮件界面上良好的显示。

此外，可以理解的是，本实施例中在页面信息加载完成时，可以不计算界面尺寸与实际尺寸之间的比值确定缩放比例，直接按照邮件界面的界面尺寸进行截屏图像渲染，具体地：

在所述页面标识对应的页面信息加载完成时，获取所述邮件界面的界面尺寸。

web页面截屏设备实时地检测页面标识页面信息的加载状态，以判断页面标识对应的页面信息是否已加载完成，web页面截屏设备在检测到页面标识对应的页面信息加载完成时，web页面截屏设备获取邮件界面的界面尺寸。

根据所述界面尺寸进行页面渲染，生成截屏图像，将所述截屏图像添加到所述邮件界面，生成包含所述截屏图像的邮件并发送。

web页面截屏设备根据界面尺寸进行页面渲染，生成截屏图像，web页面截屏设备将所截屏图像添加到所述邮件界面，生成包含所述截屏图像的邮件并发送；具体地：

web页面截屏设备使用html邮件格式，用table标签来控制邮件的内容排版（因为如果不使用table标签的话，会出现在某些手机客户端会无法连续显示内容的问题），对于不同的截屏图像的高度和宽度，web页面截屏设备也是做了处理，如当截屏图像的实际尺寸大于界面尺寸时，web页面截屏设备计算出当前实际尺寸是界面尺寸的多少个整数倍（向上取整），然后web页面截屏设备将截屏图像等分切割成多少块。这样可以适配实际尺寸大于界面尺寸的截屏尺寸，使得截屏图像在邮件中能有友好的展示，避免由于截图图像过大导致的被截断或者错位问题；还有避免出现比如在outlook邮箱中，当截屏图像的实际尺寸大于界面尺寸时，会直接截断截屏图像，不对超出部分进行显示的问题。本实施例中根据邮件的界面尺寸，进行web页面截屏，使得截屏图像适配了多个邮件系统，确保了截屏图像对应的邮件能在多个邮件系统上良好的显示。

参考图5，本申请实施例还提供一种web页面截屏装置，所述web页面截屏装置包括：

请求接收模块10，用于在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息；

尺寸计算模块20，用于在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸；

图像生成模块30，用于根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像。

在一实施例中，所述请求接收模块10，包括：

代码获取单元，用于在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，确定所述页面标识对应的页面代码；

元素添加单元，用于在所述页面代码中添加预设元素标识的html元素，将所述页面代码和所述html元素作为页面信息关联保存；

加载判断单元，用于在接收到页面加载请求时，加载所述页面标识对应的页面信息，判断已加载的页面信息中是否存在预设元素标识的html元素；

第一判定单元，用于若已加载的页面信息中不存在预设元素标识的html元素，则判定所述页面标识对应的页面信息未加载完成；

第二判定单元，用于若已加载的页面信息中存在预设元素标识的html元素，则判定所述页面标识对应的页面信息已加载完成。

在一实施例中，所述尺寸计算模块20，包括：

元素获取单元，用于在所述页面标识对应的页面信息加载完成时，获取所述页面信息中预设元素标识的html元素；

尺寸计算单元，用于以所述html元素为起点，计算与所述html元素相邻的sibling元素的元素总尺寸，将所述元素总尺寸作为所述页面标识对应web页面的实际尺寸。

在一实施例中，所述的web页面截屏装置，包括：

窗口输出模块，用于输出比例设置提示，以供用户基于所述比例设置提示设置截屏图像的缩放比例；

比例获取模块，用于获取基于所述比例设置提示输入的缩放比例，将所述缩放比例作为所述web页面截屏请求对应的缩放比例；

所述图像生成模块30，还用于计算所述实际尺寸和所述缩放比例的乘积，将所述乘积作为显示尺寸，根据所述显示尺寸进行页面渲染，生成截屏图像。

在一实施例中，所述的web页面截屏装置，包括：

指令接收模块，用于在接收到截屏图像分享指令时，获取所述截屏图像分享指令对应的用户标识；

链接生成模块，用于将所述截屏图像并保存到目标路径，生成所述目标路径对应的链接信息，并将所述链接信息发送至所述用户标识对应的客户端。

在一实施例中，所述的web页面截屏装置，包括：

标识获取模块，用于在接收到基于所述截屏图像触发的邮件发送请求时，获取所述邮件发送请求对应的收件人标识；

邮件发送模块，用于将所述截屏图像添加到所述邮件发送请求对应的邮件界面，生成包含所述截屏图像的邮件并发送所述收件人标识对应的客户端。

在一实施例中，所述的web页面截屏装置，包括：

图像添加模块，用于在接收到基于邮件界面触发的图像添加请求时，获取所述图像添加请求对应的页面标识，并基于所述页面标识触发web页面截屏请求；

获取计算模块，用于获取所述邮件界面的界面尺寸，计算所述界面尺寸与所述实际尺寸的比值，将所述比值作为所述web页面截屏请求对应的缩放比例；

图像生成模块，用于根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染；

图像发送模块，用于将所述截屏图像添加到所述邮件界面，生成包含所述截屏图像的邮件并发送。

上述各程序模块所执行的方法可参照本申请web页面截屏方法各个实施例，此处不再赘述。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者系统不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者系统所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者系统中还存在另外的相同要素。

上述本申请实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在如上所述的一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台服务器设备(可以是手机，计算机，服务器，空调器，或者网络设备等)执行本申请各个实施例所述的方法。

以上仅为本申请的优选实施例，并非因此限制本申请的专利范围，凡是利用本申请说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本申请的专利保护范围内。

Claims

一种web页面截屏方法，其中，所述web页面截屏方法包括如下步骤：

在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息；

在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸；以及

根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像。
如权利要求1所述的web页面截屏方法，其中，所述在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息的步骤，包括：

在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，确定所述页面标识对应的页面代码；

在所述页面代码中添加预设元素标识的html元素，将所述页面代码和所述html元素作为页面信息关联保存；

在接收到页面加载请求时，加载所述页面标识对应的页面信息，判断已加载的页面信息中是否存在预设元素标识的html元素；

若已加载的页面信息中不存在预设元素标识的html元素，则判定所述页面标识对应的页面信息未加载完成；以及

若已加载的页面信息中存在预设元素标识的html元素，则判定所述页面标识对应的页面信息已加载完成。
如权利要求1所述的web页面截屏方法，其中，所述在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸的步骤，包括：

在所述页面标识对应的页面信息加载完成时，获取所述页面信息中预设元素标识的html元素；以及

以所述html元素为起点，计算与所述html元素相邻的sibling元素的元素总尺寸，将所述元素总尺寸作为所述页面标识对应web页面的实际尺寸。
权利要求1所述的web页面截屏方法，其中，所述根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像的步骤之前，包括：

输出比例设置提示，以供用户基于所述比例设置提示设置截屏图像的缩放比例；

获取基于所述比例设置提示输入的缩放比例，将所述缩放比例作为所述web页面截屏请求对应的缩放比例；

所述根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像的步骤，包括：

计算所述实际尺寸和所述缩放比例的乘积，将所述乘积作为显示尺寸，根据所述显示尺寸进行页面渲染，生成截屏图像。
如权利要求1至4任意一项所述的web页面截屏方法，其中，所述根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像的步骤之后，包括：

在接收到截屏图像分享指令时，获取所述截屏图像分享指令对应的用户标识；以及

将所述截屏图像并保存到目标路径，生成所述目标路径对应的链接信息，并将所述链接信息发送至所述用户标识对应的客户端。
如权利要求1至4任意一项所述的web页面截屏方法，其中，所述根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像的步骤之后，包括：

在接收到基于所述截屏图像触发的邮件发送请求时，获取所述邮件发送请求对应的收件人标识；以及

将所述截屏图像添加到所述邮件发送请求对应的邮件界面，生成包含所述截屏图像的邮件并发送所述收件人标识对应的客户端。
如权利要求1所述的web页面截屏方法，其中，所述在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息的步骤之前，包括：

在接收到基于邮件界面触发的图像添加请求时，获取所述图像添加请求对应的页面标识，并基于所述页面标识触发web页面截屏请求；

所述在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸的步骤之后，包括：

获取所述邮件界面的界面尺寸，计算所述界面尺寸与所述实际尺寸的比值，将所述比值作为所述web页面截屏请求对应的缩放比例；

根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染；以及

将所述截屏图像添加到所述邮件界面，生成包含所述截屏图像的邮件并发送。
一种web页面截屏装置，其中，所述web页面截屏装置包括：

请求接收模块，用于在接收到web页面截屏请求时，获取所述web页面截屏请求对应的页面标识，并加载所述页面标识对应的页面信息；

尺寸计算模块，用于在所述页面标识对应的页面信息加载完成时，根据所述页面信息计算所述页面标识对应web页面的实际尺寸；以及

图像生成模块，用于根据所述实际尺寸和所述web页面截屏请求对应的缩放比例进行页面渲染，生成截屏图像。
一种web页面截屏设备，其中，所述web页面截屏设备包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的web页面截屏程序，所述web页面截屏程序被所述处理器执行时实现如权利要求1至7中任一项所述的web页面截屏方法的步骤。
一种计算机可读存储介质，其中，所述计算机可读存储介质上存储有web页面截屏程序，所述web页面截屏程序被处理器执行时实现如权利要求1至7中任一项所述的web页面截屏方法的步骤。