CN107766359B - 一种将页面内容转换为图片的方法、装置以及计算设备 - Google Patents

Abstract

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

Description

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

技术领域

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

背景技术

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

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

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

发明内容

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

根据本发明的一个方面，公开了一种将页面内容转换为图片的方法，包括以下步骤：响应于转换请求，将与请求转换的页面内容对应的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节点中期望转换为图片的节点内容的范围。

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

根据本发明的另一个方面，还公开了一种将页面内容转换为图片的装置，包括：第一转换模块，用于响应于转换请求，将与请求转换的页面内容对应的DOM节点的节点内容转换为矢量图形；第一绘制模块，用于将矢量图形绘制到画布上；第二转换模块，用于将画布转换为图片文件。

优选地，第一转换模块可以包括：第三转换模块，用于将DOM节点中的在线图片元素转换为Base64编码。

优选地，第三转换模块还可以包括：前端部分和后台部分，其中，前端部分包括第一发送模块、第一接收模块，后台部分包括第二发送模块、第二接收模块以及第二绘制模块，第一发送模块将DOM节点中的在线图片元素的链接地址发送到第二接收模块，第二绘制模块将在线图片元素绘制到画布上，第三转换模块将画布上的在线图片元素转换为Base64编码，第二发送模块将Base64编码发送到第一接收模块。

优选地，第一转换模块还可以包括：替换模块，用于在DOM节点的HTML代码中，用Base64编码替换与其对应的在线图片元素的链接地址。

优选地，第一转换模块可以使用foreignObject标签包裹DOM节点的HTML代码，从而将DOM节点的节点内容封装到SVG图形中。

根据本发明的另一个方面，还提供了一种计算设备，包括：存储器，用于存储页面的HTML代码；处理器，连接到存储器，处理器响应于转换请求，获取HTML代码，将HTML代码中与请求转换的页面内容对应的DOM节点的节点内容转换为矢量图形，将矢量图形绘制到画布上，并将画布转换为图片文件，并将图片文件保存在存储器上。

优选地，处理器可以将DOM节点中的在线图片元素转换为Base64编码，并且在DOM节点的HTML代码中，用Base64编码替换与其对应的在线图片元素的链接地址。

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

附图说明

通过结合附图对本公开示例性实施方式进行更详细的描述，本公开的上述以及其它目的、特征和优势将变得更加明显，其中，在本公开示例性实施方式中，相同的参考标号通常代表相同部件。

图1示出了根据本发明一实施例的将页面内容转换为图片的装置的结构的示意性方框图。

图2示出了根据本发明一实施例的将页面内容转换为图片的方法的示意性流程图。

图3示出了根据本发明一实施例的将页面内容转换为图片的一种具体实施流程图。

图4示出了根据本发明一实施例的将在线图片元素转换为Bsse64编码的一种具体实施流程图。

图5示出了根据本发明一实施例的第三转换模块112的功能框图。

图6示出了根据本发明一实施例的计算设备的功能方框图。

具体实施方式

如前所述，在用户期望将页面上的某些特定内容保存为图片时，采用现有的截图方式进行截取时，只能对当前显示页面范围进行截取，并且截取的时候选择性比较弱，很容易将用户不需要的内容一并保存下来，不能很好地满足用户的需求。针对于此，本发明提出了一种新的将页面内容转换为图片的方案。

简要来说，本发明的方案主要是将用户期望转换的页面内容所对应的DOM节点的节点内容绘制到新的画布上，通过将该画布转换为图片文件，可以实现将用户期望转换的页面内容转换为图片。

本发明的方案可以实现为一种将页面内容转换为图片的方法和装置。其中，本发明的将页面内容转换为图片的方法可以由客户端执行，也可以由服务器执行，例如，可以由服务器执行本发明的方法，然后将转换得到的图片发送到客户端，供用户使用。相应地，本发明的将页面内容转换为图片的装置可以位于客户端，也可以位于服务器。其中，优选地，本发明的将页面内容转换为图片的装置可以位于客户端，更进一步地，其可以作为浏览器插件配合客户端浏览器实现将用户期望转换的页面内容转换为图片。

下面将参照附图更详细地描述本公开的优选实施方式。虽然附图中显示了本公开的优选实施方式，然而应该理解，可以以各种形式实现本公开而不应被这里阐述的实施方式所限制。相反，提供这些实施方式是为了使本公开更加透彻和完整，并且能够将本公开的范围完整地传达给本领域的技术人员。

在介绍本发明前，首先对本发明涉及的几个概念做以简要说明。

DOM：文档对象模型(Document Object Model，简称DOM)，是W3C组织推荐的处理可扩展标志语言的标准编程接口。

SVG：可缩放矢量图形(Scalable Vector Graphics，简称SVG)，是基于可扩展标记语言(标准通用标记语言的子集)，用于描述二维矢量图形的一种图形格式。它由万维网联盟制定，是一个开放标准。SVG的foreignObject标签可以包含任意HTML内容。

Base64：网络上最常见的用于传输8Bit字节代码的编码方式之一。

Canvas：是在HTML5中新增的标签用于在网页实时生成图像，并且可以操作图像内容，基本上它是一个可以用JavaScript操作的位图(bitmap)。canvas元素可以使用toBlob接口将图片内容导出成为一个图片类型的二进制对象，另外，Canvas元素还可以使用toDataUrl接口将图片转换为Base64编码。

图1示出了根据本发明一实施例的将页面内容转换为图片的装置的结构的示意性方框图。

图2示出了根据本发明一实施例的将页面内容转换为图片的方法的示意性流程图。

如图1所示，本发明实施例的将页面内容转换为图片的装置包括第一转换模块110、第一绘制模块120以及第二转换模块130。

其中，第一转换模块110还可以可选地包括图1中虚线框部分所示的第三转换模块112和替换模块113。

如图2所示，在步骤S110，例如可以由第一转换模块110，响应于转换请求，将与请求转换的页面内容对应的DOM节点的节点内容转换为矢量图形。

转换请求是用户发出的将当前浏览的页面上的一处或多处页面内容转换为图片格式的请求。

与请求转换的页面内容对应的DOM节点的节点内容可以与用户期望转换的页面内容相同，也可以与用户期望转换的页面内容不同。具体来说，对于用户浏览的一个页面来说，在用户期望转换为图片的页面内容对应于一个或多个节点的全部内容时，与请求转换的页面内容对应的DOM节点的节点内容与用户期望转换的页面内容相同。在用户期望转换为图片的页面内容对应于一个或多个节点的部分内容时，与请求转换的页面内容对应的DOM节点的节点内容在包括了用户期望转换的页面内容的基础上，还可以包括与用户期望转换的页面内容属于同一节点的其他页面内容。例如，在当前浏览的页面很长，需要滚动多屏才能查看完整的页面内容，而用户期望转换为图片的页面内容为当前显示范围内的正文时，节点内容可以是当前显示范围内的正文所对应的DOM节点的节点内容，此时，节点内容是完整的页面内容中的所有正文。

其中，根据实际需求，在执行步骤S110之前，还可以对与请求转换的页面内容对应的DOM节点的节点内容进行处理，以确定与请求转换的页面内容对应的DOM节点中期望转换为图片的节点内容的范围。这样，可以使得所确定的节点内容与用户期望转换的页面内容一致。

另外，在执行步骤S110之前，还可以确定与请求转换的页面内容对应的DOM节点，从而来确定相应的节点内容。

对于所确定的节点内容，可以通过多种方式将其转换为矢量图形。例如可以使用SVG、VML等技术将节点内容转换为矢量图形。其中，优选地可以将节点内容转换为SVG图形。下文将结合具体实施例给出转换的一种具体过程，这里暂不赘述。

此外，在DOM节点中存在在线图片元素时，如果不对在线图片元素进行处理，无法将其绘制到画布上。因此，在执行步骤S110时，在DOM节点中存在在线图片元素时，还可以将其转换为Base64编码，然后用用Base64编码替换与其对应的在线图片元素的链接地址。例如，可以由第一转换模块110中的第三转换模块112将其转换为Base64编码，然后由第一转换模块110中的替换模块113用Base64编码替换与其对应的在线图片元素的链接地址。这样，在后续绘制过程中(步骤S120)，可以避免图片丢失的情况的发生。

在步骤S120，例如可以由第一绘制模块120，将矢量图形绘制到画布上。

在将矢量图形绘制到画布上时，可以参考用户发出转换请求时浏览当前页面时的浏览设置。这里述及的“浏览设置”可以是用户自行设置的浏览当前页面时的浏览参数，例如，可以是页面宽度、页面背景、行间距、字体等参数中的一种或多种。

在将矢量图形绘制到画布上时，就可以根据当前页面的浏览设置进行绘制。例如，可以将浏览当前页面时的页面背景设置成画布背景，可以按照浏览设置中的页面宽度、行间距、字体等参数将矢量图形绘制到画布上。

另外，在将矢量图形绘制到画布上时，也可以不参考用户的浏览设置，而自由配置相关绘制参数，如可以自由在画布上选择要绘制的区域、背景、行间距、字体等绘制参数。当然，在将矢量图形绘制到画布上时，也可以同时参考用户的浏览设置和自由配置的绘制参数，以完成绘制。

在步骤S130，例如可以由第二转换模块130，将画布转换为图片文件。

作为一种优选，可以将画布转换为二进制的图片文件，这样可以避免转换后的图片过大而引起浏览器崩溃。

至此，结合图1、图2详细说明了本发明的将页面内容转换为图片的方案的基本流程。

图3示出了根据本发明一实施例的将页面内容转换为图片的一种具体实施流程图。

参加图3，在步骤S310，获取要绘制的DOM节点。

其中，DOM节点是用户期望转换的页面内容所对应的节点，在执行步骤S310的过程中，还可以根据用户期望转换的页面内容，找到对应的DOM节点，并确定DOM节点中期望转换为图片的节点内容的范围。

然后执行步骤S320，判断要绘制的DOM节点中是否含有在线图片元素，即DOM节点中是否存在含有在线图片元素的节点，如<img src＝http://.../>这样的节点。

在包含在线图片元素的情况下，执行步骤S330，将在线图片元素逐个转换为Base64编码。

在没有包含在线图片元素的情况下，或者在执行完步骤S330之后，执行步骤S340，对DOM节点进行SVG封装。这里，可以使用foreignObject标签包裹DOM节点的HTML代码，从而将DOM节点的节点内容封装到SVG图形中。其中SVG图形的宽高均可自定义，以控制最终截图的宽高。

然后执行步骤S350，将SVG绘制到Canvas上。其中，如上文所述，在绘制时可以参考用户的浏览设置，也可以自由配置参数进行绘制。

在线图片元素在SVG到Canvas的绘制过程中会丢失，只有src(图片元素的属性)为Base64的图片格式时，才能成功绘制。因此，这里需要对DOM节点中的在线图片元素进行转换(即图3中的步骤S320、S330)。

在绘制完成后，就可以执行步骤S360，下载该图像信息。这里，可以使用Canvas下的toBlob接口将Canvas转为Image(图像)格式Blob对象(二进制文件对象)，并下载。使用Blob的格式下载，可以避免转出的图片过大而引起的浏览器崩溃。

图4示出了根据本发明一实施例的将在线图片元素转换为Bsse64编码的一种具体实施流程图。

图5示出了根据本发明一实施例的第三转换模块112的功能框图。参见图5，第三转换模块112包括前端部分和后台部分。前端部分包括第一发送模块1121、第一接收模块1123，后台部分包括第二发送模块1127、第二接收模块1125、第二绘制模块1129以及第四转换模块1128。

其中，前端部分所包含的功能模块可以是前端脚本，其可以通过浏览器注入到相关页面上。后台部分所包含的功能模块可以运行在浏览器内，其可以与浏览器的插口发生交互。因此，第三转换模块112可以设计成插件的形式安装于客户端，第三转换模块112中的前端部分可以认为是插件前端，第三转换模块112的后台部分可以认为是插件后台。

第三转换模块112将在线图片元素转换为Base64编码的过程就可以通过其中的各个功能模块协作完成，下面结合图4对转换的具体过程进行详细说明。

参见图4，在步骤S410，可以由插件前端将DOM节点中的在线图片元素的链接地址发送到插件后台。例如，可以由第一发送模块1121将DOM节点中的在线图片元素的链接地址发送到第二接收模块1125。

这里，可以对DOM节点中存在的在线图片元素的链接地址进行统计，然后将所有的链接地址发送给插件后台，也可以一条一条地发送。

在步骤S420，可以由插件后台将在线图片元素绘制到画布上，并将画布上的在线图片元素转换为Base64编码。例如，可以由第二绘制模块将在线图片元素绘制到画布上，并由第四转换模块1128将画布上的在线图片元素转换为Base64编码。

插件后台在收到插件前端发送的一条或多条在线图片元素的链接地址后，就可以从本地或从服务器获取连接地址所对应的图片元素，然后可以逐一将图片元素绘制到画布上(如可以绘制到Canvas上)，并用toDataUrl接口转换为Base64编码。

在步骤S430，可以由插件后台将Base64编码发送到插件前端。例如，可以由第二发送模块1127将Base64编码发送到第一接收模块1123。

这里，插件后台可以将转换后的Base64编码按照一定顺序发送给插件前端，也可以对转换后的Base64编码进行标记，然后发送给插件前端，以使得插件前端基于标记能够确定所接收到的Base64编码所对应的在线图片元素。插件前端在接收到Base64编码后，就可以将Base64编码的内容替换到DOM节点中的相对应的在线图片元素的链接地址。

至此，结合图1-图5详细叙述了本发明的将页面内容转换为图片的方法和装置，另外，本发明的将页面内容转换为图片的方案可以实现为一种计算设备。本发明的计算设备可以应用于客户端，也可以应用于服务器。这里，优选地，可以应用于客户端。

如图6所示，本发明实施例的计算设备10包括存储器1和处理器2。

存储器1用于存储页面的HTML代码，处理器2连接到存储器1，处理器2响应于转换请求，获取HTML代码，将HTML代码中与请求转换的页面内容对应的DOM节点的节点内容转换为矢量图形，将矢量图形绘制到画布上，并将画布转换为图片文件，并将图片文件保存在存储器1上。

在DOM节点中存在在线图片元素时，处理器2可以将DOM节点中的在线图片元素转换为Base64编码，并且在DOM节点的HTML代码中，用Base64编码替换与其对应的在线图片元素的链接地址。

其中，本发明实施例涉及的内容在上文结合图1-图5已做了详细说明，可参上文相关描述，另外，本发明实施例的计算设备10还可以通过处理器2实现在上文结合图1-图5述及的而在这里没有提及的方案和/或相关细节，此处不再赘述。

上文中已经参考附图详细描述了根据本发明的将页面内容转换为图片的方法、装置及计算设备。

此外，根据本发明的方法还可以实现为一种计算机程序，该计算机程序包括用于执行本发明的上述方法中限定的上述各步骤的计算机程序代码指令。或者，根据本发明的方法还可以实现为一种计算机程序产品，该计算机程序产品包括计算机可读介质，在该计算机可读介质上存储有用于执行本发明的上述方法中限定的上述功能的计算机程序。本领域技术人员还将明白的是，结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。

附图中的流程图和框图显示了根据本发明的多个实施例的系统和方法的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或代码的一部分，所述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标记的功能也可以以不同于附图中所标记的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

以上已经描述了本发明的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。

Claims (14)

1.一种计算设备，包括：

存储器，用于存储页面的HTML代码；

处理器，连接到所述存储器，所述处理器响应于转换请求，获取所述HTML代码，将所述HTML代码中与请求转换的页面内容对应的DOM节点的全部节点内容转换为矢量图形，将所述矢量图形绘制到画布上，并将所述画布转换为图片文件，并将所述图片文件保存在所述存储器上，所述转换请求是用户发出的将当前浏览的页面上的一处或多处页面内容转换为图片格式的请求。

2.根据权利要求1所述的计算设备，其中，所述处理器将所述DOM节点中的在线图片元素转换为Base64编码，并且在所述DOM节点的HTML代码中，用所述Base64编码替换与其对应的在线图片元素的链接地址。

3.一种将页面内容转换为图片的装置，包括：

第一转换模块，用于响应于转换请求，将与请求转换的页面内容对应的DOM节点的全部节点内容转换为矢量图形，所述转换请求是用户发出的将当前浏览的页面上的一处或多处页面内容转换为图片格式的请求；

第一绘制模块，用于将所述矢量图形绘制到画布上；

第二转换模块，用于将所述画布转换为图片文件。

4.根据权利要求3所述的装置，其中，所述第一转换模块包括：

第三转换模块，用于将所述DOM节点中的在线图片元素转换为Base64编码。

5.根据权利要求4所述的装置，其中，所述第三转换模块还包括：前端部分和后台部分，

其中，所述前端部分包括第一发送模块、第一接收模块，所述后台部分包括第二发送模块、第二接收模块、第二绘制模块以及第四转换模块，

所述第一发送模块将所述DOM节点中的在线图片元素的链接地址发送到所述第二接收模块，

所述第二绘制模块将所述在线图片元素绘制到画布上，

所述第四转换模块将所述画布上的所述在线图片元素转换为Base64编码，

所述第二发送模块将所述Base64编码发送到所述第一接收模块。

6.根据权利要求4所述的装置，其中，所述第一转换模块还包括：

替换模块，用于在所述DOM节点的HTML代码中，用所述Base64编码替换与其对应的在线图片元素的链接地址。

7.根据权利要求3-6中任何一项所述的装置，其中，所述第一转换模块使用foreignObject标签包裹所述DOM节点的HTML代码，从而将所述DOM节点的全部节点内容封装到SVG图形中。

8.一种将页面内容转换为图片的方法，包括：

响应于转换请求，将与请求转换的页面内容对应的DOM节点的全部节点内容转换为矢量图形，所述转换请求是用户发出的将当前浏览的页面上的一处或多处页面内容转换为图片格式的请求；

将所述矢量图形绘制到画布上；

将所述画布转换为图片文件。

9.根据权利要求8所述的方法，其中，所述将与请求转换的页面内容对应的DOM节点的全部节点内容转换为矢量图形的步骤包括：

将所述DOM节点中的在线图片元素转换为Base64编码。

10.根据权利要求9所述的方法，其中，将所述DOM节点中的在线图片元素转换为Base64编码的步骤包括：

由插件前端将所述DOM节点中的在线图片元素的链接地址发送到插件后台；

所述插件后台将所述在线图片元素绘制到画布上，并将所述画布上的所述在线图片元素转换为Base64编码；

所述插件后台将所述Base64编码发送到所述插件前端。

11.根据权利要求9所述的方法，其中，所述将与请求转换的页面内容对应的DOM节点的全部节点内容转换为矢量图形的步骤还包括：

在所述DOM节点的HTML代码中，用所述Base64编码替换与其对应的在线图片元素的链接地址。

12.根据权利要求8-11中任何一项所述的方法，其中，所述将与请求转换的页面内容对应的DOM节点的全部节点内容转换为矢量图形的步骤包括：

使用foreignObject标签包裹所述DOM节点的HTML代码，从而将所述DOM节点的全部节点内容封装到SVG图形中。

13.根据权利要求8-11中任何一项所述的方法，还包括：

确定与请求转换的页面内容对应的DOM节点。

14.根据权利要求8-11中任何一项所述的方法，其中，

基于当前页面的浏览设置，将所述矢量图形绘制到画布上。

Images