CN112634406A - 生成图片的方法、装置、电子设备、存储介质和程序产品 - Google Patents

Abstract

本公开提供了一种生成图片的方法、装置、电子设备、存储介质和程序产品，涉及人工智能的图像处理技术领域。生成图片的方法，包括：在小程序中批量获取待绘制文件中的一个或多个元素，一个或多个元素包括文本元素和/或图片元素，一个或多个元素由文档对象模型DOM节点生成；根据一个或多个元素对应的DOM节点的样式属性信息，获取一个或多个元素的绘制属性信息；基于一个或多个元素的绘制属性信息，在预设画布中绘制一个或多个元素，以生成图片。本公开的技术方案能够提高小程序中图片的绘制效率。

Description

生成图片的方法、装置、电子设备、存储介质和程序产品

技术领域

本公开涉及人工智能技术领域，尤其涉及图像处理技术领域。

背景技术

随着小程序应用的日渐成熟，多处场景需要能够生成分享图便于用户进行二次传播，从而提升小程序的传播率以及加强品牌效应。

对于简单的分享图，比如固定大小的背景图加几行简短文字构成的分享图，可以利用官方提供的canvas接口直接绘制元素。但是，对于复杂的分享图，例如将图文混排的富文本内容生成分享图，采用canvas接口绘制是十分困难的，降低了分享图的绘制效率。

发明内容

本公开提供了一种生成图片的方法、装置、电子设备、存储介质和程序产品。

根据本公开的第一方面，提供了一种生成图片的方法，包括：

在小程序中批量获取待绘制文件中的一个或多个元素，一个或多个元素包括文本元素和/或图片元素，一个或多个元素由文档对象模型DOM节点生成；

根据一个或多个元素对应的DOM节点的样式属性信息，获取一个或多个元素的绘制属性信息；

基于一个或多个元素的绘制属性信息，在预设画布中绘制一个或多个元素，以生成图片。

根据本公开的第二方面，提供了一种生成图片的装置，包括：

元素获取模块，用于在小程序中批量获取待绘制文件中的一个或多个元素，一个或多个元素包括文本元素和/或图片元素，一个或多个元素由文档对象模型DOM节点生成；

绘制属性信息获取模块，用于根据一个或多个元素对应的DOM节点的样式属性信息，获取一个或多个元素的绘制属性信息；

绘制模块，用于基于一个或多个元素的绘制属性信息，在预设画布中绘制一个或多个元素，以生成图片。

根据本公开的第三方面，提供了一种电子设备，包括：

至少一个处理器；以及

与至少一个处理器通信连接的存储器；其中，

存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行本公开任一实施例中的方法。

根据本公开的第四方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，该计算机指令用于使计算机执行本公开任一实施例中的方法。

根据本公开的第五方面，提供了一种计算机程序产品，包括计算机程序，该计算机程序被处理器执行时实现本公开任一实施例中的方法。

本公开实施例的技术方案，可以批量获取待绘制文件的一个或多个元素，大大提高了生成图片的效率，并且对于由DOM节点生成的元素，可以根据各元素对应的DOM节点获取各元素的绘制属性信息，并基于绘制属性信息在预设画布中绘制各元素，绘制出的效果可以与待绘制文件中各元素保持一致，不再需要对各元素进行精调，提高了图片生成效率。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1为本公开一实施例中生成图片的方法的流程示意图；

图2为本公开一实施例中查询元素的计算样式信息的程序段；

图3为本公开一实施例中待绘制文件的示意图；

图4为本公开另一实施例中待绘制文件的示意图；

图5为本公开一实施例中待绘制文件的示意图；

图6为本公开一实施例中待绘制文件的示意图；

图7为本公开一实施例中待绘制文件的示意图；

图8为采用本公开实施例中生成图片的方法对图7所示文件进行绘制后生成的图片的示意图；

图9为将图7所示待绘制文件生成图片的流程图；

图10本公开一实施例中生成图片的装置的结构框图；

图11为本公开一实施例中绘制属性信息获取模块的结构框图；

图12为本公开一实施例中确定子模块的结构框图；

图13为本公开另一实施例中确定子模块的结构框图；

图14为本公开另一实施例中生成图片的装置的结构框图；

图15为本公开另一实施例中生成图片的装置的结构框图；

图16是用来实现本公开实施例的生成图片的方法的电子设备的框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

图1为本公开一实施例中生成图片的方法的流程示意图。如图1所示，生成图片的方法可以包括：

S101、在小程序中批量获取待绘制文件中的一个或多个元素，一个或多个元素包括文本元素和/或图片元素，一个或多个元素由文档对象模型DOM节点生成；

S102、根据一个或多个元素对应的DOM节点的样式属性信息，获取一个或多个元素的绘制属性信息；

S103、基于一个或多个元素的绘制属性信息，在预设画布中绘制一个或多个元素，以生成图片。

在小程序中，可以将小程序中的文件，例如文本文件、图片文件或者图文混排的富文本文件，生成图片以供分享给其它用户。本公开实施例的图片生成方法可以适用于小程序。

小程序中的待绘制文件可以包括一个或多个元素。示例性地，待绘制文件可以为文本文件，文本内容可以包括一段普通样式的文本。该段普通样式的文本可以作为一个文本元素，因此，该待绘制文件包括一个元素，该元素为普通样式文本元素。本领域技术人员可以理解，普通样式文本可以为例如不添加加粗、彩色等特殊效果的文本，对于添加加粗、彩色等至少一种特殊样式的文本，可以称作特殊样式文本。

示例性地，待绘制文件可以为文本文件，文本内容可以包括一段普通样式文本、一段加粗样式文本，该段普通样式文本可以作为第一文本元素，该段加粗样式文本可以作为第二文本元素，因此，该文本文件可以包括两种样式文本元素，两个文本元素的样式不相同。

示例性地，待绘制文件可以为图文混排的富文本文件，富文本内容可以包括第一段普通样式文本、第一个表情图片、第二个表情图片、第二段普通样式文本、第一段加粗样式文本，第一段普通样式文本可以作为第一文本元素，第一个表情图片可以作为第一图片元素，第二个表情图片可以作为第二图片元素，第二段普通样式文本可以作为第二文本元素，一段加粗样式文本可以作为第三文本元素。因此，该富文本文件包括五个元素，其中，第一文本元素和第二文本元素为类型相同的文本元素，第三文本元素的类型与第一文本元素和第二文本元素不相同。

文档对象模型(Document Object Model，DOM)节点，指在文档中每个成分都是一个节点，整个文档是一个文档节点，每个文档标签是一个元素节点，一个DOM节点对应一个元素。

在一种实施方式中，可以获得待绘制文件的.json文件，示例性地，可以创建待绘制文件的.json文件，通过待绘制文件的.json文件可以批量获取到待绘制文件的一个或多个元素。.json文件可以传入待绘制元素的数据类型。

示例性地，待绘制文件可以包括.swan文件。待绘制文件的各元素可以均由DOM节点生成，也就是说，各元素的数据类型均可以为DOM节点。对于.swan文件，DOM节点可以称作swan标签。

对于由DOM节点生成的元素，可以根据元素对应的DOM节点的样式属性信息，获取元素的绘制属性信息。在预设画布为canvas画布时，各元素的绘制属性信息可以被canvas识别，从而有利于采用canvas对各元素进行绘制。

示例性地，预设画布可以包括canvas画布，各元素的绘制属性信息可以被canvas识别，从而，canvas可以基于一个或多个元素的绘制属性信息，在canvas画布中绘制各元素来生成图片，生成的图片可用于分享。

相关技术中，对于复杂的分享图，例如用户在发表完话题后，需要将图文混排的富文本内容生成供分享的图片。对于这种长度不定、内容动态变化的内容，例如文字换行、表情文字图片混排、文字加粗、子标题等元素，要将其生成供分享的图片，采用canvas接口绘制需要一个元素一个元素地下载并绘制，不仅成本高，而且严重影响了供分享图片的生成效率。

相关技术中，采用canvas绘制表情文字图片混排、文字加粗、子标题等元素的成本较高，并且cancas布局和html布局相差较大，零基础学习成本较高，在不同的机型中预览效果不可预期，短时间内生成预期的分享图片比较困难。对于服务端生成分享图片，后端库可以完成较为简单的需求，但字体加载、阴影、圆角、透明等方案效果需要精调，如果文字需要截断或动态伸缩长度时不容易处理，图片的截取和伸缩自适应也不灵活。

本公开实施例的图片生成方法，可以批量获取待绘制文件的一个或多个元素，大大提高了生成图片的效率，并且对于由DOM节点生成的元素，可以根据各元素对应的DOM节点获取各元素的绘制属性信息，并基于绘制属性信息在预设画布中绘制各元素，绘制出的效果可以与待绘制文件中各元素保持一致，不再需要对各元素进行精调，有利于提高元素绘制效率；另外，本公开的图片生成方法在小程序中生成图片，小程序可以安装在各种类型的终端设备中，扩展了本公开实施例的图片生成方法的适用范围。本公开实施例的图片生成方法，提高了图片生成效率，扩展了适用范围。

本公开实施例的图片生成方法，可以应用于图像处理技术领域，进一步可以应用于人工智能的图片处理技术领域，可以更快速地将待绘制文件生成图片供用户分享，有利于用户进行二次传播，提升小程序的传播率和使用率。

在一种实施方式中，步骤S102可以包括：根据一个或多个元素中各元素对应的DOM节点的类class名，查询各元素对应的计算样式信息；基于各元素对应的计算样式信息，确定各元素在预设画布中的位置以及各元素的绘制样式。

对于由DOM节点生成的元素，元素的绘制属性信息写在class类名中，因此，需要根据元素对应的DOM节点的class类名调用计算样式(computedStyle)工具，执行查询computedStyle的操作来获取元素的计算样式信息；基于元素的计算样式信息可以获取元素的绘制属性信息，绘制属性信息可以包括元素在预设画布中的位置信息以及元素的绘制样式。从而，基于各元素的计算样式信息，可以确定各元素在预设画布中的位置和各元素的绘制样式。

图2为本公开一实施例中查询元素的计算样式信息的程序段。如图2所示，采用SelectorQuery可以查询到元素对应DOM节点的computedStyle，select()里面可以填入class类名，例如图2中的select('.scroll-view')。根据class类名调用computedStyle，computedStyle()里面可以填入待返回的样式，例如'margin','backgroundColor'。图2的程序段最后返回margin和backgroundColor，返回的样式可以作为元素的绘制属性信息。本领域技术人员可以理解，可以在computedStyle()里面填入希望返回的样式，例如'width','height'，那么，会返回元素的宽度和元素的高度。宽度和高度属于元素的绘制属性信息，可以被canvas识别，从而，可以基于计算样式信息，确定元素的绘制属性信息，绘制属性信息可以包括元素在预设画布中的位置和绘制样式，绘制属性信息可以被canvas识别，以便在canvas画布中进行绘制。

采用这种方法，可以将由DOM节点生成的元素转化为可被canvas识别的元素，在待绘制文件为.swan文件的情况下，实现了swan文件向canvas的转化，从而，可以采用canvas进行元素绘制，提高绘制效率。

如图2所示，在元素为文本元素或图片元素的情况下，通过SelectorQuery可以获取到元素对应DOM节点的dataset属性，小程序可以通过dataset属性获取到文本元素的文本内容，可以基于文本内容和绘制属性信息绘制文本元素。在图片元素为链接图片的情况下，小程序可以通过dataset属性获取到图片元素的链接，通过调用downloadFile从图片元素的链接下载图片，将图片绘制在画布中。本领域技术人员可以理解，对于图片元素，“绘制”可以理解为“放置”，也就是说，可以在预设画布中放置图片元素。

本公开实施例的图片生成方法，可以将base64图片转换为jpg或png格式的图片，实现图片的统一下载。

在一种实施方式中，待绘制文件包括单样式文本元素。基于一个或多个元素的绘制属性信息，在预设画布中绘制一个或多个元素，包括：

基于元素的绘制属性信息确定元素中各字的宽度和文本的宽度；

根据元素中各字的宽度和文本的宽度，确定换行位置；

基于元素的起始位置和绘制样式，遍历元素中的每个字，逐个字进行位置计算和绘制，并在换行位置换行。

图3为本公开一实施例中待绘制文件的示意图。通过图3所示待绘制文件的.JSON文件，得知该待绘制文件的数据类型(data-type)声明为inline-image或inline-text，表明该待绘制文件为行内元素，各元素位于对应的行中。图3所示待绘制文件只包括一种样式元素，该元素为普通样式文本元素。

可以采用measureWidth测量图3所示文本宽度和每个字的宽度，根据文本的起始位置，遍历文本的每个字，根据字体大小、字体宽度等绘制样式，逐个字进行位置计算和绘制。例如，可以在文本元素的起始位置，基于第一个字的绘制样式和宽度绘制第一个字；基于起始位置和第一个字的宽度可以计算出第二个字的位置，在第二个字的位置，基于第二个字的绘制样式和宽度绘制第二个字，逐个字进行位置计算和绘制。根据文本宽度和每个字的宽度可以估算出每行的字数。在绘制过程中，可以根据文本宽度，移位索引下标，可以获得每行的实际字数，保证每行绘制的实际字数不会超过文本宽度。在超过文本宽度时，下移一行继续绘制，直至绘制结束。

图4为本公开另一实施例中待绘制文件的示意图。图4所示待绘制文件只包括一种类型元素，该元素为普通样式文本元素。将图4所示待绘制文件生成图片的方法与将图3所示待绘制文件生成图片的方法可以相同。

元素的绘制属性信息可以包括top值和left值，top值可以为元素与预设画布上边界的距离，left值可以为元素与预设画布左边界的距离，从而，基于元素的top值和left值可以确定元素在预设画布中的位置。

在一个实施例中，元素的绘制属性信息可以包括bottom值和right值，bottom值可以为元素与预设画布下边界的距离，right值可以为元素与预设画布右边界的距离，从而，基于元素的bottom值和right值可以确定元素在预设画布中的位置。

可以理解的是，基于元素的top值和bottom值中的一个以及left值和right值中的一个，均可以确定元素在预设画布中的位置。

在一种实施方式中，元素的绘制样式可以包括字体类型、字体大小、宽度、高度、行高、颜色中的至少一种。元素的绘制样式可以反映出元素的特征，从而按照元素的绘制样式绘制出的图片，可以与元素的特征保持一致，不再需要对图片进行调整，提高了图片生成效率。

在一种实施方式中，待绘制文件中，同一行中包括至少两种样式的元素。基于各元素对应的计算样式信息，确定各元素在预设画布中的位置，可以包括：基于各元素的计算样式信息确定各元素的top值和left值，将top值相同的多个元素聚合为同一行，其中，top值为单个元素与预设画布的上边界的距离；对于位于同一行的多个元素，根据各元素的left值确定各元素在本行中的位置，其中left值为单个元素与预设画布的左边界的距离。

top值为元素与预设画布上边界的距离，通过元素的top值可以获知元素在预设画布中的行数。因此，将top值相同的元素聚合为同一行，有利于后期将这些元素绘制在同一行。left值为元素与预设画布左边界的距离，通过元素的left值可以获知元素与预设画布左边界的距离，进而可以获知元素在其所在行的位置。因此，确定各元素的top值和left值，便可以确定元素在预设画布中的位置，进而有利于将元素绘制在对应位置。

在一个实施例中，可以基于各元素的计算样式信息确定各元素的bottom值和right值，从而，基于各元素的bottom值和right值可以确定各元素在预设画布中的位置。

可以理解的是，基于各元素的top值和bottom值中的一个以及left值和right值中的一个，均可以确定各元素在预设画布中的位置。

图5为本公开一实施例中待绘制文件的示意图。如图5所示，第一行为图文混排的内容。批量获取图5所示待绘制文件的元素后，可以获取到待绘制文件的元素个数为6个。第1个为普通样式文本元素，文本内容为“这是段文字”；第2个为图片元素，内容为发呆表情(非系统表情，以图片节点展现)；第3个为图片元素，内容为发呆表情；第4个为普通样式文本元素，文本内容为“这也”；第5个为加粗样式文本元素，文本内容为“是一段文字，这也是文字”；第6个为普通样式文本元素，文本内容为“这还是文字文字文字文字。这还是文字文字文字文字。这还是文字文字文字文字。”。

在查询图5所示待绘制文件的各元素对应的计算样式信息后，对于第1个元素、第2个元素、第3个元素、第4个元素、第5个元素，会返回相同的top值，所以，将这五个元素聚合为同一行。考虑到误差，可以将top值在预设差值(例如±2)范围内的元素聚合为同一行。对于位于同一行的第1个元素、第2个元素、第3个元素、第4个元素、第5个元素，根据各元素的left值确定各元素在本行中的位置，按照各元素的left值从左向右依次排列，并一一绘制。

绘制每个元素时，在元素为文本元素的情况下，根据文本元素的起始位置，遍历文本元素的每个字，根据字体大小、字体宽度、字体颜色、字体样式等绘制样式，逐个字进行位置计算和绘制。

在元素为图片元素的情况下，可以基于图片元素在预设画布中的位置，在预设画布中绘制该图片。对于文本样式图片，可以在预设画布中的对应位置绘制该图片。对于链接图片，小程序可以通过dataset属性获取到图片元素的链接，通过调用downloadFile从图片元素的链接下载图片，将图片放置在预设画布的对应位置。

采用本公开实施例的图片生成的方法对图5所示待绘制文件生成图片后，图片的效果与图5相同，但是，图5为富文本格式，生成的图片为jpg或png格式图片。

在一种实施方式中，基于各元素对应的计算样式信息，确定各元素在预设画布中的位置，还可以包括：同一行中包括n个元素，若第n个元素的left值与第1个元素的left值相同，且第n个元素的高度值大于或等于第1个元素的高度值的两倍，则确定第n个元素出现换行，n为大于或等于2的正整数。

具体地，当前行中包括n个元素，n为大于等于2的正整数。基于各元素对应的计算样式信息，确定各元素在预设画布中的位置，可以包括：基于各元素的计算样式信息确定各元素的top值和left值，将top值相同的多个元素聚合为同一行；在第n个元素的left值与第一个元素的left值相同的情况下，基于第n个元素的计算样式信息确定第n个元素的高度值，并基于第一个元素的计算样式信息确定第1个元素的高度值；在第n个元素的高度值大于或等于第1个元素的高度值两倍的情况下，确定第n个元素的left值在当前行中位于第n-1个元素之后，并确定第n个元素出现换行。

示例性地，第n个元素的left值可以为第n-1个元素的left值与第n-1个元素的宽度之和的下一个位置。

由于第n个元素出现了换行，绘制第n个元素可以包括：根据待绘制文件的宽度以及当前行中第1个元素至第n-1个元素的宽度之和，确定当前行的剩余宽度；根据当前行的剩余宽度和第n个元素的宽度，将第n个元素截断为第一部分和第二部分；在当前行中，在第n-1个元素之后的位置绘制第一部分，并在当前行的下一行的起始位置绘制第二部分。从而，完成对第n个元素的绘制。

图6为本公开一实施例中待绘制文件的示意图。如图6所示，第一行为图文混排的内容。批量获取图6所示待绘制文件的元素后，可以获取到待绘制文件的元素个数为6个。第1个为普通样式文本元素，文本内容为“这是个文字，这是个文字”；第2个为图片元素，内容为发呆表情；第3个为加粗样式文本元素，内容为“。这是一段加粗了的文字。”；第4个为图片元素，内容为发呆表情；第5个为图片元素，内容为发呆表情；第6个为普通样式文本元素，文本内容为“这段文字没有加粗，但是也换行了。”。

在查询图6所示待绘制文件的各元素对应的计算样式信息后，对于第1个元素、第2个元素、第3个元素，会返回相同的top值，所以，将这三个元素可以聚合为同一行。基于各元素的计算样式信息确定各元素的left值后，发现第3个元素的left值与第1个元素的left值相同。如果按照第3个元素的left值将第3个元素绘制在预设画布中，第3个元素与第1个元素会发生重叠。为了避免发生重叠，需要重新计算第3个元素的left值。可以基于第3个元素的计算样式信息确定第3个元素的高度值，并基于第1个元素的计算样式信息确定第1个元素的高度值，并将第3个元素的高度值和第1个元素的高度值进行比较。图6中，第3个元素的高度值大于或等于第1个元素的高度值的两倍，可以确定第3个元素出现换行。那么，确定第3个元素的left值在当前行中位于第2个元素之后。具体地，第3个元素的left值可以为第2个元素的left值与第2个元素的宽度之和的下一个位置。

如图6所示，由于第3个元素出现了换行，可以根据图6所示富文本的宽度以及第一行中第1个元素至第2个元素的宽度之和，确定第一行的剩余宽度。根据第一行的剩余宽度和第3个元素的宽度，将第3个元素截断为第一部分“。这是一段加粗了的”和第二部分“文字。”。在第一行中，在第2元素之后的位置绘制第一部分“。这是一段加粗了的”，在第二行的起始位置绘制第二部分“文字。”。

对于图6所示中的第二行，“文字。”成为第二行的第1个元素，其left值为基于该元素的计算样式信息确定出的left值。在第二行中，第4个元素“这段文字没有加粗，但是也换行了。”出现了换行，可以采用与第一行中的第3个元素类似的方法进行绘制，在此不再赘述。

采用本公开实施例的图片生成的方法对图6所示待绘制文件生成图片后，图片的效果与图6相同，但是，图6为富文本格式，生成的图片为jpg或png格式图片。

在一种实施方式中，图片的生成方法还可以包括：在一个或多个元素由链接节点生成的情况下，基于链接节点下载一个或多个元素，并将一个或多个元素绘制在预设画布上。

示例性地，在一个或多个元素为图片元素，但该一个或多个元素并非由DOM节点生成，而是由链接节点生成。对于由链接节点生成的元素，可以基于链接节点下载该一个或多个元素中的各元素。可以根据输入获取该一个或多个元素中各元素的位置，基于各元素的位置，将各元素绘制在预设画布上。

在一种实施方式中，生成图片的方法还可以包括：在绘制之前，对预设画布进行初始化。示例性地，可以利用canvas的基础能力，向小程序中传入ID、画布宽度(width)、画布高度(height)等属性，调用小程序的createCanvasContext创建画布；初始化预设画布，根据链接信息(例如url)确定预设画布的背景类型；在存在链接信息的情况下，确定背景类型为背景图片，并根据链接信息下载背景图片以填充在预设画布中；在不存在链接信息的情况下，确定背景类型为纯色背景，并根据颜色值在预设画布中填充对应颜色。

在一种实施方式中，生成图片的方法还可以包括：在绘制之后，对预设画布进行渲染。具体地，可以根据各元素的类型调用不同的方法对各元素进行渲染，最后调用canvasToTempFilePath生成供分享的图片。

在一种实施方式中，生成图片的方法还可以包括封装基础图形的绘制接口，基础图形可以包括矩形、圆形、线条、图片、圆角图片、普通样式文本等中的一种。采用基础图形的绘制接口绘制基础图形时，可以声明元素的类型并提供关键信息(例如位置信息)即可，不需要关注canvas的具体绘制过程，进一步提高图片生成效率。

图7为本公开一实施例中待绘制文件的示意图。图8为采用本公开实施例中生成图片的方法对图7所示文件进行绘制后生成的图片的示意图。如图7所示，其中，采用虚线围起来的元素为图片元素，并且由链接节点(非DOM节点)生成，采用实线围起来的元素为文本元素，且由DOM节点生成。

图9为将图7所示待绘制文件生成图片的流程图。如图9所示，生成图片的流程可以为：初始化预设画布；填充画布背景；批量获取待绘制文件的一个或多个元素后，判断各元素的数据类型是否由DOM节点生成；对于由DOM节点生成的元素，查询各元素的computedStyle，基于各元素的computedStyle，确定各元素在预设画布中的位置和绘制样式；对于非由DOM节点生成的元素，遍历下载各元素的图片；对所有的元素进行逐个绘制，绘制完成后生成如图8所示的图片。

本公开实施例的生成图片的方法，基于封装基础图形的绘制接口和DOM节点这两种绘制方式，可以满足绝大多数的场景需求，可以极大地减少工作量，不需要关注内部实现过程，在小程序的开发中可以快速生成图片以供分享，减少绘制成本，提高绘制效率。

图10本公开一实施例中生成图片的装置的结构框图。本公开一实施例提供了一种生成图片的装置，如图10所示，生成图片的装置包括：

元素获取模块1001，用于在小程序中批量获取待绘制文件中的一个或多个元素，一个或多个元素包括文本元素和/或图片元素，一个或多个元素由文档对象模型DOM节点生成；

绘制属性信息获取模块1002，用于根据一个或多个元素对应的DOM节点的样式属性信息，获取一个或多个元素的绘制属性信息；

绘制模块1003，用于基于一个或多个元素的绘制属性信息，在预设画布中绘制一个或多个元素，以生成图片。

图11为本公开一实施例中绘制属性信息获取模块的结构框图。在一种实施方式中，绘制属性信息获取模块可以包括：

查询子模块1101，用于根据一个或多个元素中各元素对应的DOM节点的class类名，查询各元素对应的计算样式信息；

确定子模块1102，用于基于各元素对应的计算样式信息，确定各元素在预设画布中的位置以及各元素的绘制样式。

图12为本公开一实施例中确定子模块的结构框图。在一种实施方式中，确定子模块包括：

行位确定子模块1201，用于基于各元素的计算样式信息确定各元素的top值和left值，将top值相同的多个元素聚合为同一行，其中，top值为单个元素与预设画布的上边界的距离；

行中位置确定子模块1202，用于对于位于同一行的多个元素，根据各元素的left值确定各元素在本行中的位置，其中，left值为单个元素与预设画布的左边界的距离。

图13为本公开另一实施例中确定子模块的结构框图。在一种实施方式中，确定子模块还包括：

换行确定子模块1303，用于同一行中包括n个元素，若第n个元素的left值与第1个元素的left值相同，且第n个元素的高度值大于或等于第1个元素的高度值的两倍，则确定第n个元素出现换行，其中，n为大于或等于2的正整数。

其中，图13中的行位确定子模块1301可以是与图12中的行位确定子模块1201相同或相类似的模块，图13中的行中位置确定子模块1302可以是与图12中的行中位置确定子模块1202相同或相类似的模块。

图14为本公开另一实施例中生成图片的装置的结构框图。如图13所示，生成图片的装置还包括：链接节点类元素绘制模块1404，用于在一个或多个元素由链接节点生成的情况下，基于链接节点下载一个或多个元素，并将一个或多个元素绘制在预设画布上。

其中，图14中的元素获取模块1401可以是与图10中的元素获取模块1001相同或相类似的模块，图14中的绘制属性信息获取模块1402可以是与图10中的绘制属性信息获取模块1002相同或相类似的模块，图14中的绘制模块1403可以是与图10中的绘制模块1003相同或相类似的模块，

图15为本公开另一实施例中生成图片的装置的结构框图。如图13所示，生成图片的装置还包括：还包括：初始化模块1504，用于初始化预设画布，根据链接信息确定预设画布的背景类型；在存在链接信息的情况下，确定背景类型为背景图片，并根据链接信息下载背景图片以填充在预设画布中；在不存在链接信息的情况下，确定背景类型为纯色背景，并根据颜色值在预设画布中填充对应颜色。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

电子设备可以包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行本公开任一实施例中的生成图片的方法。

存储有计算机指令的非瞬时计算机可读存储介质中，计算机指令用于使计算机执行本公开任一实施例中的生成图片的方法。

图16示出了可以用来实施本公开的实施例的示例电子设备1600的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或要求的本公开的实现。

如图16所示，设备1600包括计算单元1601，其可以根据存储在只读存储器(ROM)1602中的计算机程序或者从存储单元1608加载到随机访问存储器(RAM)1603中的计算机程序来执行各种适当的动作和处理。在RAM 1603中，还可存储设备1600操作所需的各种程序和数据。计算单元1601、ROM 1602以及RAM 1603通过总线1604彼此相连。输入输出(I/O)接口1605也连接至总线1604。

设备1600中的多个部件连接至I/O接口1605，包括：输入单元1606，例如键盘、鼠标等；输出单元1607，例如各种类型的显示器、扬声器等；存储单元1608，例如磁盘、光盘等；以及通信单元1609，例如网卡、调制解调器、无线通信收发机等。通信单元1609允许设备1600通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元1601可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元1601的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元1601执行上文所描述的各个方法和处理，例如生成图片的方法。例如，在一些实施例中，生成图片的方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元1608。在一些实施例中，计算机程序的部分或者全部可以经由ROM 1602和/或通信单元1609而被载入和/或安装到设备1600上。当计算机程序加载到RAM 1603并由计算单元1601执行时，可以执行上文描述的生成图片的方法的一个或多个步骤。备选地，在其他实施例中，计算单元1601可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行生成图片的方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入、或者触觉输入来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (15)

1.一种生成图片的方法，包括：

在小程序中批量获取待绘制文件中的一个或多个元素，所述一个或多个元素包括文本元素和/或图片元素，所述一个或多个元素由文档对象模型DOM节点生成；

根据所述一个或多个元素对应的DOM节点的样式属性信息，获取所述一个或多个元素的绘制属性信息；

基于所述一个或多个元素的绘制属性信息，在预设画布中绘制所述一个或多个元素，以生成图片。

2.根据权利要求1所述的方法，其中，所述根据所述一个或多个元素对应的DOM节点的样式属性信息，获取所述一个或多个元素的绘制属性信息，包括：

根据所述一个或多个元素中各元素对应的DOM节点的class类名，查询各元素对应的计算样式信息；

基于各元素对应的计算样式信息，确定各元素在所述预设画布中的位置以及各元素的绘制样式。

3.根据权利要求2所述的方法，其中，基于各元素对应的计算样式信息，确定各元素在所述预设画布中的位置，包括：

基于各元素的计算样式信息确定各元素的top值和left值，将top值相同的多个元素聚合为同一行，其中，所述top值为单个元素与所述预设画布的上边界的距离；

对于位于同一行的多个元素，根据各元素的left值确定各元素在本行中的位置，其中，所述left值为单个元素与所述预设画布的左边界的距离。

4.根据权利要求3所述的方法，其中，所述方法还包括：

同一行中包括n个元素，若第n个元素的left值与第1个元素的left值相同，且所述第n个元素的高度值大于或等于所述第1个元素的高度值的两倍，则确定所述第n个元素出现换行，其中，n为大于或等于2的正整数。

5.根据权利要求1所述的方法，还包括：在所述一个或多个元素由链接节点生成的情况下，基于所述链接节点下载所述一个或多个元素，并将所述一个或多个元素绘制在所述预设画布上。

6.根据权利要求1至5中任一项所述的方法，还包括：

初始化所述预设画布，根据链接信息确定所述预设画布的背景类型；

在存在所述链接信息的情况下，确定所述背景类型为背景图片，并根据所述链接信息下载所述背景图片以填充在所述预设画布中；

在不存在所述链接信息的情况下，确定所述背景类型为纯色背景，并根据颜色值在所述预设画布中填充对应颜色。

7.一种生成图片的装置，包括：

元素获取模块，用于在小程序中批量获取待绘制文件中的一个或多个元素，所述一个或多个元素包括文本元素和/或图片元素，所述一个或多个元素由文档对象模型DOM节点生成；

绘制属性信息获取模块，用于根据所述一个或多个元素对应的DOM节点的样式属性信息，获取所述一个或多个元素的绘制属性信息；

绘制模块，用于基于所述一个或多个元素的绘制属性信息，在预设画布中绘制所述一个或多个元素，以生成图片。

8.根据权利要求7所述的装置，其中，所述绘制属性信息获取模块包括：

查询子模块，用于根据所述一个或多个元素中各元素对应的DOM节点的class类名，查询各元素对应的计算样式信息；

确定子模块，用于基于各元素对应的计算样式信息，确定各元素在所述预设画布中的位置以及各元素的绘制样式。

9.根据权利要求8所述的装置，其中，确定子模块包括：

行位确定子模块，用于基于各元素的计算样式信息确定各元素的top值和left值，将top值相同的多个元素聚合为同一行，其中，所述top值为单个元素与所述预设画布的上边界的距离；

行中位置确定子模块，用于对于位于同一行的多个元素，根据各元素的left值确定各元素在本行中的位置，其中，所述left值为单个元素与所述预设画布的左边界的距离。

10.根据权利要求9所述的装置，还包括：

换行确定子模块，用于同一行中包括n个元素，若第n个元素的left值与第1个元素的left值相同，且所述第n个元素的高度值大于或等于所述第1个元素的高度值的两倍，则确定所述第n个元素出现换行，其中，n为大于或等于2的正整数。

11.根据权利要求7所述的装置，还包括：链接节点类元素绘制模块，用于在所述一个或多个元素由链接节点生成的情况下，基于所述链接节点下载所述一个或多个元素，并将所述一个或多个元素绘制在所述预设画布上。

12.根据权利要求7至11中任一项所述的装置，还包括：

初始化模块，用于初始化所述预设画布，根据链接信息确定所述预设画布的背景类型；在存在所述链接信息的情况下，确定所述背景类型为背景图片，并根据所述链接信息下载所述背景图片以填充在所述预设画布中；在不存在所述链接信息的情况下，确定所述背景类型为纯色背景，并根据颜色值在所述预设画布中填充对应颜色。

13.一种电子设备，其特征在于，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1-6中任一项所述的方法。

14.一种存储有计算机指令的非瞬时计算机可读存储介质，其特征在于，所述计算机指令用于使计算机执行权利要求1-6中任一项所述的方法。

15.一种计算机程序产品，包括计算机程序，该计算机程序在被处理器执行时实现根据权利要求1-6中任一项所述的方法。

Images