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

技术编号:30021904 阅读:23 留言:0更新日期:2021-09-11 06:44
本发明专利技术公开了一种网页截图方法和装置,涉及移动互联技术领域。该方法的一具体实施方式包括:根据客户端的网络环境信息和待截图网页的页面样式,判断客户端当前是否具备截图条件,在具备截图条件的情况下,通过截图插件对待截图网页进行截图;在不具备截图条件的情况下,向服务端发送网页截图请求,并接收服务端根据网页截图请求返回的待截图网页的截图数据。该实施方式能够既保证截图不失真,又能提高截图响应速度和性能,降低服务器压力,且能够实现个性化配置待截图元素、截图格式、个性化显示信息等个性化截图功能。化显示信息等个性化截图功能。化显示信息等个性化截图功能。

【技术实现步骤摘要】
一种网页截图方法和装置


[0001]本专利技术涉及移动互联
,尤其涉及一种网页截图方法和装置。

技术介绍

[0002]在移动互联网时代网页截图可以用来保存网页数据信息,或者生成H5页面分享到朋友圈。
[0003]现有的网页截图方案主要分为客户端截图和服务端截图,客户端截图不需要依赖服务器,其利用客户端浏览器实现网页截图。而服务端截图是客户端浏览器发送一个请求给服务端,由服务端生成截图。
[0004]在实现本专利技术过程中,专利技术人发现现有技术中至少存在如下问题:
[0005]存在导致截图失真或者截图响应慢、性能低、服务器压力大等问题,且无法实现个性化配置待截图元素、截图格式、个性化显示信息等个性化截图功能。

技术实现思路

[0006]有鉴于此,本专利技术实施例提供一种网页截图方法和装置,能够既保证截图不失真,又能提高截图响应速度和性能,降低服务器压力,且能够实现个性化配置待截图元素、截图格式、个性化显示信息等个性化截图功能。
[0007]为实现上述目的,根据本专利技术实施例的一个方面,提供了一种网页截图方法。
[0008]一种网页截图方法,包括:在收到截图指令后,获取客户端的网络环境信息以及待截图网页的页面样式;根据所述客户端的网络环境信息和所述待截图网页的页面样式,判断所述客户端当前是否具备截图条件;在所述客户端当前具备所述截图条件的情况下,通过截图插件对所述待截图网页进行截图;在所述客户端当前不具备所述截图条件的情况下,向服务端发送网页截图请求,并接收所述服务端根据所述网页截图请求返回的所述待截图网页的截图数据。
[0009]可选地,所述根据所述客户端的网络环境信息和所述待截图网页的页面样式,判断所述客户端当前是否具备截图条件,包括:判断所述客户端的网络环境信息是否指示当前处于特定网络环境,若是,则确定所述客户端当前具备所述截图条件;若所述客户端的网络环境信息指示当前未处于所述特定网络环境,则对所述页面样式中的属性进行校验,所述校验用于判断所述页面样式与所述截图插件的兼容性;在所述校验通过的情况下,确定所述客户端当前具备所述截图条件;在所述校验未通过的情况下,确定所述客户端当前不具备所述截图条件。
[0010]可选地,所述获取客户端的网络环境信息,包括:通过预设脚本获取所述客户端的网络连接状态对象,从所述网络连接状态对象中提取网络类型;判断所述客户端的网络环境信息是否指示当前处于特定网络环境,包括:根据所述网络类型判断是否当前处于所述特定网络环境。
[0011]可选地,获取所述待截图网页的页面样式,包括:向所述服务端的预设接口发送样
式获取请求,所述样式获取请求包括所述待截图网页的地址;接收服务端的预设接口响应所述样式获取请求而返回的对象;根据所述返回的对象中的层叠样式表属性、样式属性,得到所述待截图网页中的外联样式、内联样式、嵌入式样式中的一种或多种样式。
[0012]可选地,所述对所述页面样式中的属性进行校验,包括:判断所述层叠样式表属性的字符串中是否存在所述截图插件不支持的页面样式属性,以及,遍历所述样式属性的数组中的每个元素,以判断所述样式属性是否存在所述截图插件不支持的页面样式属性。
[0013]可选地,所述截图插件为html2canvas(一个网页截图的库);所述通过截图插件对所述待截图网页进行截图,包括:选择配置的所述待截图网页的待截图元素,得到canvas对象,将所述canvas对象转换为base64(用于传输8Bit字节代码的编码方式之一)图像;创建a标签,配置所述a标签的href属性为base64图像,并配置所述a标签的download属性为所述待截图网页的截图数据名称;通过触发所述a标签的click事件,下载所述待截图网页的截图数据,然后删除所述a标签。
[0014]可选地,向所述服务端发送的所述网页截图请求包括所述待截图网页的截图格式,且所述截图格式为PDF格式(便携式文档格式);所述客户端在向所述服务端发送所述网页截图请求之前,将PDF的页面格式添加到所述网页截图请求中。
[0015]可选地,向所述服务端发送的所述网页截图请求包括所述待截图网页的截图格式,且所述截图格式为图像格式;并且,所述客户端在向所述服务端发送所述网页截图请求之前,通过预设界面接收输入的个性化显示配置,所述个性化显示配置包括个性化显示信息和所述个性化显示信息的显示位置,将所述个性化显示配置添加到所述网页截图请求中。
[0016]根据本专利技术实施例的另一方面,提供了一种网页截图方法。
[0017]一种网页截图方法,包括:接收客户端发送的对待截图网页的网页截图请求,所述网页截图请求包括请求参数,所述请求参数包括所述待截图网页的地址和截图配置;根据所述请求参数,查询是否存在已保存的所述待截图网页的截图数据;在存在已保存的所述待截图网页的截图数据的情况下,将保存的所述待截图网页的截图数据返回所述客户端;在不存在已保存的所述待截图网页的截图数据的情况下,在特定浏览器中打开所述待截图网页的地址,根据所述截图配置,生成所述待截图网页的截图数据,并将生成的所述截图数据返回所述客户端。
[0018]可选地,所述根据所述请求参数,查询是否存在已保存的所述待截图网页的截图数据,包括:对所述请求参数进行MD5(消息摘要算法第五版)运算,判断得到的MD5值是否与一已存MD5值相同,若相同,则存在已保存的所述待截图网页的截图数据,否则,不存在已保存的所述待截图网页的截图数据;所述生成所述待截图网页的截图数据之后,还包括:以根据所述请求参数进行MD5运算所得到的MD5值作为所述待截图网页的截图数据的文件名,对所述待截图网页的截图数据进行保存。
[0019]可选地,所述截图配置包括截图格式,所述截图格式为PDF格式,且所述截图配置还包括PDF的页面格式;所述根据所述截图配置,生成所述待截图网页的截图数据,并将生成的所述截图数据返回所述客户端,包括:将所述待截图网页的页面格式配置为所述PDF的页面格式,并调用PDF应用程序接口,对所述待截图网页进行截图,得到所述待截图网页的PDF文件,将所述PDF文件返回所述客户端。
[0020]可选地,所述截图配置包括截图格式,所述截图格式为图像格式,且所述截图配置还包括个性化显示配置,所述个性化显示配置包括个性化显示信息和所述个性化显示信息的显示位置;所述根据所述截图配置,生成所述待截图网页的截图数据,并将生成的所述截图数据返回所述客户端,包括:调用屏幕截图应用程序接口,得到与所述待截图网页对应的所述图像格式的第一截图图像;从所述个性化显示配置中获取所述个性化显示信息和所述个性化显示信息的显示位置,根据所述显示位置将所述个性化显示信息添加到所述第一截图图像,得到第二截图图像,将所述第二截图图像返回所述客户端。
[0021]根据本专利技术实施例的又一方面,提供了一种网页截图装置。
[0022]一种网页截图装置,包括:信息获取模块,用于在收到截图指令后,获取客户端的网络环境信息以及待截图网页的本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种网页截图方法,其特征在于,包括:在收到截图指令后,获取客户端的网络环境信息以及待截图网页的页面样式;根据所述客户端的网络环境信息和所述待截图网页的页面样式,判断所述客户端当前是否具备截图条件;在所述客户端当前具备所述截图条件的情况下,通过截图插件对所述待截图网页进行截图;在所述客户端当前不具备所述截图条件的情况下,向服务端发送网页截图请求,并接收所述服务端根据所述网页截图请求返回的所述待截图网页的截图数据。2.根据权利要求1所述的方法,其特征在于,所述根据所述客户端的网络环境信息和所述待截图网页的页面样式,判断所述客户端当前是否具备截图条件,包括:判断所述客户端的网络环境信息是否指示当前处于特定网络环境,若是,则确定所述客户端当前具备所述截图条件;若所述客户端的网络环境信息指示当前未处于所述特定网络环境,则对所述页面样式中的属性进行校验,所述校验用于判断所述页面样式与所述截图插件的兼容性;在所述校验通过的情况下,确定所述客户端当前具备所述截图条件;在所述校验未通过的情况下,确定所述客户端当前不具备所述截图条件。3.根据权利要求2所述的方法,其特征在于,所述获取客户端的网络环境信息,包括:通过预设脚本获取所述客户端的网络连接状态对象,从所述网络连接状态对象中提取网络类型;判断所述客户端的网络环境信息是否指示当前处于特定网络环境,包括:根据所述网络类型判断是否当前处于所述特定网络环境。4.根据权利要求2所述的方法,其特征在于,获取所述待截图网页的页面样式,包括:向所述服务端的预设接口发送样式获取请求,所述样式获取请求包括所述待截图网页的地址;接收服务端的预设接口响应所述样式获取请求而返回的对象;根据所述返回的对象中的层叠样式表属性、样式属性,得到所述待截图网页中的外联样式、内联样式、嵌入式样式中的一种或多种样式。5.根据权利要求4所述的方法,其特征在于,所述对所述页面样式中的属性进行校验,包括:判断所述层叠样式表属性的字符串中是否存在所述截图插件不支持的页面样式属性,以及,遍历所述样式属性的数组中的每个元素,以判断所述样式属性是否存在所述截图插件不支持的页面样式属性。6.根据权利要求1所述的方法,其特征在于,所述截图插件为html2canvas。7.根据权利要求1所述的方法,其特征在于,向所述服务端发送的所述网页截图请求包括所述待截图网页的截图格式,且所述截图格式为PDF格式;所述客户端在向所述服务端发送所述网页截图请求之前,将PDF的页面格式添加到所述网页截图请求中。8.根据权利要求1所述的方法,其特征在于,向所述服务端发送的所述网页截图请求包括所述待截图网页的截图格式,且所述截图格式为图像格式;并且,
所述客户端在向所述服务端发送所述网页截图请求之前,通过预设界面接收输入的个性化显示配置,所述个性化显示配置包括个性化显示信息和所述个性化显示信息的显示位置,将所述个性化显示配置添加到所述网页截图请求中。9.一种网页截图方法,其特征在于,包括:接收客户端发送的对待截图网页的网页截图请求,所述网页截图请求包括请求参数,所述请求参数包括所述待截图网页的地址和截图配置;根据所述请求参数,查询是否存在已保存的所述待截图网页的截图数据;在存在已保存的所述待截图网页的截图数据的情况下,将保存的所述待截图网页的截图数据返回所述客户端;在不存在已保存的所述待截图网页的截图数据的情况下,在特定浏览器中打开所述待截图网页的地址,根据所述截图配置,生成所述待截图网...

【专利技术属性】
技术研发人员:孟繁贵梁锐
申请(专利权)人:建信金融科技有限责任公司
类型:发明
国别省市:

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

1