[发明专利]基于web技术的网页截屏方法

说明书

本发明公开了一种基于web技术的网页截屏方法，包括如下步骤：调用web网页浏览器的程序接口获取要截取的网页的各个HTML元素；调用浏览器程序接口解析各个HTML元素的属性，将解析完成的属性保存为有序的HTML元素属性列表；调用浏览器程序接口创建一个HTML的canvas画布；调用浏览器程序接口循环扫描HTML元素属性列表，将HTML元素属性列表中的HTML属性内容绘制到canvas画布上；调用canvas画布的程序接口将绘制完成的canvas画布转换编码为base64字符串并保存；通过在页面上添加按钮的方式引导用户下载canvas画布。本发明具有不需要依赖其他工具，解决了网页截屏对第三方工具依赖的技术问题的特点。

技术领域

本发明涉及web设计领域，尤其是涉及一种基于web网页的截屏方法。

背景技术

一般的网页截屏技术通过将可视画面保存并让用户根据需求进行剪切，此时我们需要额外的工具去完成这项任务。若用户没有适合的截屏工具，就达不到使用者的目的。

通常的web页面都带有滚动条去滚动展现内容，此时当前的可视屏幕就无法展现全部的内容，用户无法一次性做包含整页内容的屏幕，而且截取的图片不容易保持原画的清晰度，会有一定程度的失真。

针对上述问题，目前的做法一般是通过服务器端渲染，但这无疑加重了服务器的负担，而全屏截取网页也是部分浏览器的第三方插件实现，使用的成本比较高，集成比较困难。目前还没有一套有效的解决方案。

发明内容

本发明的发明目的是为了克服现有技术中的目前网页截屏依赖第三方截屏工具的不足，提供了一种基于web技术的网页截屏方法。

为了实现上述目的，本发明采用以下技术方案：

一种基于web技术的网页截屏方法，包括如下步骤：

(1-1)调用web网页浏览器的程序接口获取要截取的网页的各个HTML元素；

(1-2)调用浏览器程序接口解析各个HTML元素的属性，如果检测到当前的HTML元素包含有子HTML元素，待当前HTML元素解析完成之后继续解析子HTML元素，并不断重复当前的解析过程，直到所有HTML元素及子HTML元素都解析完成为止，将解析完成的属性保存为有序的HTML元素属性列表；

(1-3)调用浏览器程序接口创建一个HTML的canvas画布；

(1-4)调用浏览器程序接口循环扫描HTML元素属性列表，HTML元素属性列表中有图片资源链接url，图片资源链接url调用浏览器程序接口发送网络请求加载图片x.jpg，待资源加载完成后，利用canvas画布绘制规则，将HTML元素属性列表中的HTML属性内容绘制到canvas画布上；

(1-5)调用canvas画布的程序接口将绘制完成的canvas画布转换编码为base64字符串并保存，得到字符串形式的canvas画布；

(1-6)通过在页面上添加按钮的方式引导用户下载canvas画布，当用户点击按钮时，利用浏览器将canvas画布以图片的形式保存到本地存储设备上。

本发明所使用的内容全部来自当前网页页面的元素，不需要依赖其他工具，解决了网页截屏对第三方工具依赖的技术问题。进一步的，根据本发明实例所截取的图片可以包含要截取的网页的全部或需要内容，解决了目前截屏工具对屏幕可视区域的依赖。进一步的，本发明实例所截取的图片能高度还原画质。进一步的，本发明截取的图片可以仅用文本保存，节省了存储设备的保存空间，也利于传播。

作为优选，HTML元素为4个，分别为div元素、canvas元素、image元素和ul元素。

作为优选，HTML元素的属性包括背景颜色、背景图片、位置、文本信息，元素的文本样式和元素的边框属性。