[发明专利]一种将页面内容转换为图片的方法、装置以及计算设备

说明书

本发明公开了一种将页面内容转换为图片的方法、装置以及计算设备。其中，响应于转换请求，将与请求转换的页面内容对应的DOM节点的节点内容转换为矢量图形，将矢量图形绘制到画布上，并将画布转换为图片文件。由此，即使用户期望保存为图片的页面内容分布在多处不同位置，或者用户期望保存为图片的页面内容需要多屏显示，基于本发明也可以将其保存在一个图片文件中，从而可以较好地满足用户的转换需求。

技术领域

本发明涉及页面处理技术领域，特别是涉及一种将页面内容转换为图片的方法、装置以及计算设备。

背景技术

浏览器旨在为用户提供一个便捷的资源浏览平台。用户在使用浏览器进行页面浏览时，如果用户对页面中的某些内容比较感兴趣，希望将其转换为图片保存或分享给他人，通常使用截图工具对页面进行截图，以得到图片格式的页面内容。

现有的截图方式一般只能对屏幕当前显示范围的页面内容进行截取，因此在页面很长，需要滚动多屏才能查看完整的页面内容，而用户期望转换的页面内容分布在多个不同屏上时，采用现有的截图方式就需要分别截取，操作麻烦，而且截取后的图片为多个，不利于用户观看保存。另外，在用户期望保存为图片的页面内容分散在页面的不同区域时，使用现有的截图方式很容易将用户不期望保存的页面内容一并截取下来，不能很好地满足用户的页面转换需求。

因此，需要一种能够较好地满足用户的页面转换需求的方法和装置。

发明内容

本发明的主要目的是提供一种将页面内容转换为图片的方法、装置以及计算设备，其能够较好地满足用户的页面转换需求。

根据本发明的一个方面，公开了一种将页面内容转换为图片的方法，包括以下步骤：响应于转换请求，将与请求转换的页面内容对应的DOM节点的节点内容转换为矢量图形；将矢量图形绘制到画布上；将画布转换为图片文件。

由此，通过将与请求转换的页面内容对应的DOM节点的节点内容绘制到新的画布上，将绘制得到的画布转换为图片格式的文件，就可以得到与用户请求转换的页面内容对应的图片文件。利用本方法，即使用户期望保存为图片的页面内容分布在多处不同位置，或者用户期望保存为图片的页面内容需要多屏显示，也可以将其保存在一个图片文件中。

优选地，方法中将与请求转换的页面内容对应的DOM节点的节点内容转换为矢量图形的步骤可以包括：将DOM节点中的在线图片元素转换为Base64编码。

由此，通过将DOM节点中的在线图片元素转换为Base64编码，可以避免在绘制过程中图片丢失的情况的发生。

优选地，将DOM节点中的在线图片元素转换为Base64编码的步骤可以包括：由插件前端将DOM节点中的在线图片元素的链接地址发送到插件后台；插件后台将在线图片元素绘制到画布上，并将画布上的在线图片元素转换为Base64编码；插件后台将Base64编码发送到插件前端。

由此，通过插件前端和插件后台的分工合作，可以完成在线图片元素到Base64编码的转换。

优选地，将与请求转换的页面内容对应的DOM节点的节点内容转换为矢量图形的步骤还可以包括：在DOM节点的HTML代码中，用Base64编码替换与其对应的在线图片元素的链接地址。

优选地，将与请求转换的页面内容对应的DOM节点的节点内容转换为矢量图形的步骤可以包括：使用foreignObject标签包裹DOM节点的HTML代码，从而将DOM节点的节点内容封装到SVG图形中。

优选地，该方法还可以包括：确定与请求转换的页面内容对应的DOM节点；和/或确定与请求转换的页面内容对应的DOM节点中期望转换为图片的节点内容的范围。

优选地，可以基于当前页面的浏览设置，将矢量图形绘制到画布上。