CN110442820A - 用于网页的图片合成方法以及装置 - Google Patents

Abstract

本申请公开了一种用于网页的图片合成方法以及装置。该方法包括建立以根节点为背景节点的DOM树状结构，其中所述DOM树结构的高度与调用通过绘图应用程序接口进行图片合成时的抽象数据结构相似；遍历所述DOM树状结构，其中所述DOM树状结构中至少包括：带内容显示节点和非显示节点；根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成。本申请解决了图片合成重复性高且容易出错的技术问题。通过本申请实现了简单的javascript转化库，可以将图片合成的任务抽象到操作DOM树上，最后将DOM树转换为图片。

Description

用于网页的图片合成方法以及装置

技术领域

本申请涉及WEB前端开发领域，具体而言，涉及一种用于网页的图片合成方法以及装置。

背景技术

图片合成，是指根据用户交互结果生成一张可以分享微信朋友圈的海报功能和需求。

发明人发现，在进行图片合成时，一些方法中采用逐个节点调用API需要的操作繁琐重复且耗时，容易出错。此外，另一些方法中由于需要需要引入一个额外的库，增加了网络加载成本。

针对相关技术中图片合成重复性高且容易出错的问题，目前尚未提出有效的解决方案。

发明内容

本申请的主要目的在于提供一种用于网页的图片合成方法以及装置，以解决图片合成重复性高且容易出错的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种用于网页的图片合成方法以及装置。

根据本申请的用于网页的图片合成方法包括：建立以根节点为背景节点的DOM树状结构，其中所述DOM树结构的高度与调用通过绘图应用程序接口进行图片合成时的抽象数据结构相似；遍历所述DOM树状结构，其中所述DOM树状结构中至少包括：带内容显示节点和非显示节点；根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成。

进一步地，建立以根节点为背景节点的DOM树状结构包括：通过HTML树和CSS样式表构造所述DOM树状结构。

进一步地，遍历所述DOM树状结构包括：如果遍历时遇到有带内容显示节点，则绘制到底层canvas中；如果遍历时遇到非显示节点，则忽略；其中，后遍历到的节点出现在先遍历到的节点上方。

进一步地，根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成包括：获取根节点的尺寸，并创建一个与根节点尺寸相同的canvas画布；根据DOM应用程序接口获取当前遍历到的显示节点尺寸和相对于根节点的坐标；如果节点是图片内容显示节点，则利用canvas的drawImage绘制到canvas中；如果节点是文字内容显示节点，则利用canvas的drawImage绘制到canvas中时还获取预设显示因素。

进一步地，根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成，还包括：根据当前遍历到的显示节点尺寸和相对于根节点的坐标，逐字循环检测文本串；在每一轮循环迭代中，判断当前长度的文本是否进行换行；在循环结束后，根据换行结果得到文本被拆分成多少行和每行的文字结果，将所述文字结果采用逐行绘制到canvas中。

为了实现上述目的，根据本申请的另一方面，提供了一种用于网页的图片合成装置。

根据本申请的用于网页的图片合成装置包括：建立模块，用于建立以根节点为背景节点的DOM树状结构，其中所述DOM树结构的高度与调用通过绘图应用程序接口进行图片合成时的抽象数据结构相似；遍历模块，用于遍历所述DOM树状结构，其中所述DOM树状结构中至少包括：带内容显示节点和非显示节点；绘制模块，用于根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成。

进一步地，所述建立模块，用于通过HTML树和CSS样式表构造所述DOM树状结构。

进一步地，所述遍历模块，用于在如果遍历时遇到有带内容显示节点，则绘制到底层canvas中；如果遍历时遇到非显示节点，则忽略；其中，后遍历到的节点出现在先遍历到的节点上方。

进一步地，所述绘制模块，用于获取根节点的尺寸，并创建一个与根节点尺寸相同的canvas画布；根据DOM应用程序接口获取当前遍历到的显示节点尺寸和相对于根节点的坐标；如果节点是图片内容显示节点，则利用canvas的drawImage绘制到canvas中；如果节点是文字内容显示节点，则利用canvas的drawImage绘制到canvas中时还获取预设显示因素。

进一步地，装置还包括：排版模块，用于根据当前遍历到的显示节点尺寸和相对于根节点的坐标，逐字循环检测文本串；在每一轮循环迭代中，判断当前长度的文本是否进行换行在循环结束后，根据换行结果得到文本被拆分成多少行和每行的文字结果，将所述文字结果采用逐行绘制到canvas中。

在本申请实施例中用于网页的图片合成方法及装置，采用建立以根节点为背景节点的DOM树状结构的方式，通过遍历所述DOM树状结构，达到了根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成的目的，从而实现了将DOM树转换为图片进行图片合成的技术效果，进而解决了图片合成重复性高且容易出错的技术问题。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请第一实施例的用于网页的图片合成方法流程示意图；

图2是根据本申请第二实施例的用于网页的图片合成方法流程示意图；

图3是根据本申请第三实施例的用于网页的图片合成方法流程示意图；

图4是根据本申请第四实施例的用于网页的图片合成方法流程示意图；

图5是根据本申请实施例的用于网页的图片合成装置结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本申请中，术语“上”、“下”、“左”、“右”、“前”、“后”、“顶”、“底”、“内”、“外”、“中”、“竖直”、“水平”、“横向”、“纵向”等指示的方位或位置关系为基于附图所示的方位或位置关系。这些术语主要是为了更好地描述本申请及其实施例，并非用于限定所指示的装置、元件或组成部分必须具有特定方位，或以特定方位进行构造和操作。

并且，上述部分术语除了可以用于表示方位或位置关系以外，还可能用于表示其他含义，例如术语“上”在某些情况下也可能用于表示某种依附关系或连接关系。对于本领域普通技术人员而言，可以根据具体情况理解这些术语在本申请中的具体含义。

此外，术语“安装”、“设置”、“设有”、“连接”、“相连”、“套接”应做广义理解。例如，可以是固定连接，可拆卸连接，或整体式构造；可以是机械连接，或电连接；可以是直接相连，或者是通过中间媒介间接相连，又或者是两个装置、元件或组成部分之间内部的连通。对于本领域普通技术人员而言，可以根据具体情况理解上述术语在本申请中的具体含义。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

如图1所示，该方法包括如下的步骤S102至步骤S106：

步骤S102，建立以根节点为背景节点的DOM树状结构，

所述DOM树结构的高度与调用通过绘图应用程序接口进行图片合成时的抽象数据结构相似。

步骤S104，遍历所述DOM树状结构，

所述DOM树状结构中至少包括：带内容显示节点和非显示节点。

步骤S106，根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成。

建立以所述根节点为背景节点的DOM树状结构，遍历所述DOM树状结构，最后根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成。

具体地，首先按照常规的开发HTML页面的方法，将一个完整的合成图片通过HTML树状结构和对应的CSS样式表达出来；然后按照相关规则采用树状结构遍历算法遍历这棵DOM树。最后，完成节点绘制。对于开发者而言，开发者可以通过传统的HTML树和CSS样式表构造一颗DOM树，然后调用一个API调用即可以实现DOM树到海报图的转换，相对于以往利用复杂的canvas API绘制，更加简单易懂，不易出错。

从以上的描述中，可以看出，本申请实现了如下技术效果：

在本申请实施例中用于网页的图片合成方法及装置，采用建立以根节点为背景节点的DOM树状结构的方式，通过遍历所述DOM树状结构，达到了根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成的目的，从而实现了将DOM树转换为图片进行图片合成的技术效果，进而解决了图片合成重复性高且容易出错的技术问题。

根据本申请实施例，作为本实施例中的优选，建立以根节点为背景节点的DOM树状结构包括：通过HTML树和CSS样式表构造所述DOM树状结构。

具体地，按照常规的开发HTML页面的方法，将一个完整的合成图片通过HTML树状结构和对应的CSS样式表达出来。此时在内存中有了一颗以根节点为背景节点的DOM树状结构。

根据本申请实施例，作为本实施例中的优选，如图2所示，遍历所述DOM树状结构包括：

步骤S202，如果遍历时遇到有带内容显示节点，则绘制到底层canvas中；

步骤S204，如果遍历时遇到非显示节点，则忽略；

其中，后遍历到的节点出现在先遍历到的节点上方。

具体地，可以根据深度优先的树状结构遍历算法遍历这棵DOM树。遇到带内容显示节点比如img、p等，则绘制到底层canvas中；遇到非显示节点比如div做＝作为子节点容器节点的时候，直接忽略。后遍历到的节点出现在先遍历到的节点上方。

根据本申请实施例，作为本实施例中的优选，如图3所示，根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成包括：

步骤S302，获取根节点的尺寸，并创建一个与根节点尺寸相同的canvas画布；

步骤S304，根据DOM应用程序接口获取当前遍历到的显示节点尺寸和相对于根节点的坐标；

步骤S306，如果节点是图片内容显示节点，则利用canvas的drawImage绘制到canvas中；

步骤S308，如果节点是文字内容显示节点，则利用canvas的drawImage绘制到canvas中时还获取预设显示因素。

具体地，获取根节点的尺寸，创建一个与根节点尺寸相同的canvas画布。根据DOMAPI获取当前遍历到的显示节点尺寸(width,height)，以及相对于根节点的坐标(x，y)。

如果节点是图片节点：利用canvas的drawImage绘制到canvas中；如果节点是文字节点：还要获取文字颜色、行高、字体样式等额外显示因素。

根据本申请实施例，作为本实施例中的优选，如图4所示，根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成，还包括：

步骤S402，根据当前遍历到的显示节点尺寸和相对于根节点的坐标，逐字循环检测文本串；

步骤S404，在每一轮循环迭代中，判断当前长度的文本是否进行换行；

步骤S406，在循环结束后，根据换行结果得到文本被拆分成多少行和每行的文字结果，将所述文字结果采用逐行绘制到canvas中。

如果节点是图片节点：利用canvas的drawImage绘制到canvas中；如果节点是文字节点：还要获取文字颜色、行高、字体样式等额外显示因素。根据坐标(width,height)和(x，y)，逐字循环检测文本串，在每一轮循环迭代中，通过measureText方法判断当前长度的文本是否应该换行。循环结束可以得到文本被拆分成多少行，以及每行的文字。逐行fillText到canvas中，最终DOM树到海报图的操作完成。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

根据本申请实施例，还提供了一种用于实施上述方法的用于网页的图片合成装置，如图5所示，该装置包括：建立模块100，用于建立以根节点为背景节点的DOM树状结构，其中所述DOM树结构的高度与调用通过绘图应用程序接口进行图片合成时的抽象数据结构相似；遍历模块200，用于遍历所述DOM树状结构，其中所述DOM树状结构中至少包括：带内容显示节点和非显示节点；绘制模块300，用于根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成。

本申请实施例的建立模块100中所述DOM树结构的高度与调用通过绘图应用程序接口进行图片合成时的抽象数据结构相似。

本申请实施例的遍历模块200中所述DOM树状结构中至少包括：带内容显示节点和非显示节点。

本申请实施例的绘制模块300中建立以所述根节点为背景节点的DOM树状结构，遍历所述DOM树状结构，最后根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成。

具体地，首先按照常规的开发HTML页面的方法，将一个完整的合成图片通过HTML树状结构和对应的CSS样式表达出来；然后按照相关规则采用树状结构遍历算法遍历这棵DOM树。最后，完成节点绘制。对于开发者而言，开发者可以通过传统的HTML树和CSS样式表构造一颗DOM树，然后调用一个API调用即可以实现DOM树到海报图的转换，相对于以往利用复杂的canvas API绘制，更加简单易懂，不易出错。

根据本申请实施例，作为本实施例中的优选，如图5所示，所述建立模块100，用于

通过HTML树和CSS样式表构造所述DOM树状结构。

具体地，按照常规的开发HTML页面的方法，将一个完整的合成图片通过HTML树状结构和对应的CSS样式表达出来。此时在内存中有了一颗以根节点为背景节点的DOM树状结构。

根据本申请实施例，作为本实施例中的优选，如图5所示，所述遍历模块200，用于在

如果遍历时遇到有带内容显示节点，则绘制到底层canvas中；

如果遍历时遇到非显示节点，则忽略；

其中，后遍历到的节点出现在先遍历到的节点上方。

具体地，可以根据深度优先的树状结构遍历算法遍历这棵DOM树。遇到带内容显示节点比如img、p等，则绘制到底层canvas中；遇到非显示节点比如div做＝作为子节点容器节点的时候，直接忽略。后遍历到的节点出现在先遍历到的节点上方。

根据本申请实施例，作为本实施例中的优选，如图5所示，所述绘制模块300，用于

获取根节点的尺寸，并创建一个与根节点尺寸相同的canvas画布；

根据DOM应用程序接口获取当前遍历到的显示节点尺寸和相对于根节点的坐标；

如果节点是图片内容显示节点，则利用canvas的drawImage绘制到canvas中；

如果节点是文字内容显示节点，则利用canvas的drawImage绘制到canvas中时还获取预设显示因素。

具体地，获取根节点的尺寸，创建一个与根节点尺寸相同的canvas画布。根据DOMAPI获取当前遍历到的显示节点尺寸(width,height)，以及相对于根节点的坐标(x，y)。

如果节点是图片节点：利用canvas的drawImage绘制到canvas中；如果节点是文字节点：还要获取文字颜色、行高、字体样式等额外显示因素。

根据本申请实施例，作为本实施例中的优选，如图5所示，还包括：排版模块400，用于

根据当前遍历到的显示节点尺寸和相对于根节点的坐标，逐字循环检测文本串；

在每一轮循环迭代中，判断当前长度的文本是否进行换行；

在循环结束后，根据换行结果得到文本被拆分成多少行和每行的文字结果，将所述文字结果采用逐行绘制到canvas中。

如果节点是图片节点：利用canvas的drawImage绘制到canvas中；如果节点是文字节点：还要获取文字颜色、行高、字体样式等额外显示因素。根据坐标(width,height)和(x，y)，逐字循环检测文本串，在每一轮循环迭代中，通过measureText方法判断当前长度的文本是否应该换行。循环结束可以得到文本被拆分成多少行，以及每行的文字。逐行fillText到canvas中，最终DOM树到海报图的操作完成。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种用于网页的图片合成方法，其特征在于，包括：

建立以根节点为背景节点的DOM树状结构，其中所述DOM树结构的高度与调用通过绘图应用程序接口进行图片合成时的抽象数据结构相似；

遍历所述DOM树状结构，其中所述DOM树状结构中至少包括：带内容显示节点和非显示节点；

根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成。

2.根据权利要求1所述的用于网页的图片合成方法，其特征在于，建立以根节点为背景节点的DOM树状结构包括：

通过HTML树和CSS样式表构造所述DOM树状结构。

3.根据权利要求1所述的用于网页的图片合成方法，其特征在于，遍历所述DOM树状结构包括：

如果遍历时遇到有带内容显示节点，则绘制到底层canvas中；

如果遍历时遇到非显示节点，则忽略；

其中，后遍历到的节点出现在先遍历到的节点上方。

4.根据权利要求1所述的用于网页的图片合成方法，其特征在于，根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成包括：

获取根节点的尺寸，并创建一个与根节点尺寸相同的canvas画布；

根据DOM应用程序接口获取当前遍历到的显示节点尺寸和相对于根节点的坐标；

如果节点是图片内容显示节点，则利用canvas的drawImage绘制到canvas中；

如果节点是文字内容显示节点，则利用canvas的drawImage绘制到canvas中时还获取预设显示因素。

5.根据权利要求1所述的用于网页的图片合成方法，其特征在于，根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成，还包括：

根据当前遍历到的显示节点尺寸和相对于根节点的坐标，逐字循环检测文本串；

在每一轮循环迭代中，判断当前长度的文本是否进行换行；

在循环结束后，根据换行结果得到文本被拆分成多少行和每行的文字结果，将所述文字结果采用逐行绘制到canvas中。

6.一种用于网页的图片合成装置，其特征在于，包括：

建立模块，用于建立以根节点为背景节点的DOM树状结构，其中所述DOM树结构的高度与调用通过绘图应用程序接口进行图片合成时的抽象数据结构相似；

遍历模块，用于遍历所述DOM树状结构，其中所述DOM树状结构中至少包括：带内容显示节点和非显示节点；

绘制模块，用于根据所述DOM树状结构遍历结果，进行节点绘制后完成图片合成。

7.根据权利要求6所述的用于网页的图片合成装置，其特征在于，所述建立模块，用于

通过HTML树和CSS样式表构造所述DOM树状结构。

8.根据权利要求6所述的用于网页的图片合成装置，其特征在于，所述遍历模块，用于在

如果遍历时遇到有带内容显示节点，则绘制到底层canvas中；

如果遍历时遇到非显示节点，则忽略；

其中，后遍历到的节点出现在先遍历到的节点上方。

9.根据权利要求6所述的用于网页的图片合成装置，其特征在于，所述绘制模块，用于

获取根节点的尺寸，并创建一个与根节点尺寸相同的canvas画布；

根据DOM应用程序接口获取当前遍历到的显示节点尺寸和相对于根节点的坐标；

如果节点是图片内容显示节点，则利用canvas的drawImage绘制到canvas中；

如果节点是文字内容显示节点，则利用canvas的drawImage绘制到canvas中时还获取预设显示因素。

10.根据权利要求6所述的用于网页的图片合成装置，其特征在于，还包括：排版模块，用于

根据当前遍历到的显示节点尺寸和相对于根节点的坐标，逐字循环检测文本串；

在每一轮循环迭代中，判断当前长度的文本是否进行换行；

在循环结束后，根据换行结果得到文本被拆分成多少行和每行的文字结果，将所述文字结果采用逐行绘制到canvas中。