CN115641400B - 一种动态图片生成方法、系统、设备及存储介质 - Google Patents

Abstract

本发明公开了一种动态图片生成方法、系统、设备及存储介质，通过获取定制化的动态元素及对应的元素属性信息，来将各动态元素按照对应的元素属性信息绘制在调整好的底层画布上，形成叠合后的动态内容合成图像数据，然后通过服务端渲染将动态内容合成图像数据渲染成最终动态效果图进行打包输出，以实现基于图层模板的高效定制化动态图片生成，可以满足电商场景下的批量动态图片生成和处理需求，减少人工重复工作，且基于图层模板的方式可复用性强，可拓展性强，可以长期迭代更新，使用维护成本低，易于上手。

Description

一种动态图片生成方法、系统、设备及存储介质

技术领域

本发明属于图像处理技术领域，具体涉及一种动态图片生成方法、系统、设备及存储介质。

背景技术

由于电商平台日益增多的营销活动需求，需要用到大量不同内容的活动海报、商品海报和分享海报等，这些海报大都需要应用到相应的动态图片，而传统使用人工处理动态图片的方式效率低下，给电商平台高效运营带来了技术瓶颈。

随着计算机硬件性能的提升以及分布式云架构的演进，很多传统的基于CPU绘图的程序方法也可以用堆叠更多服务实例的方式实现动态内容图片的批量生成，或者使用图片拼叠的方式，把多张图片平铺叠加得到最终的动态图片结果。这样的实现方式缺点是程序部署环境要求高，需要分布式云服务器集群、包含计算机图形视觉接口的容器镜像、支持现代图形接口的浏览器等，且复用性差，不能很好地满足批量动态图片生成和处理需求。

发明内容

本发明的目的是提供一种动态图片生成方法、系统、设备及存储介质，用以解决现有技术中存在的上述问题。

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

第一方面，提供一种动态图片生成方法，包括：

获取图片模板，并根据操作指令调整图片模板的基础属性，得到底层画布；

获取各动态元素及对应的元素属性信息；

将各动态元素按照其对应的元素属性信息绘制在底层画布上，形成叠合后的动态内容合成图像数据；

采用服务端渲染方法将动态内容合成图像数据渲染成最终动态效果图；

将最终动态效果图压缩打包为设定格式文件进行保存和输出。

基于上述技术内容，通过获取定制化的动态元素及对应的元素属性信息，来将各动态元素按照对应的元素属性信息绘制在调整好的底层画布上，形成叠合后的动态内容合成图像数据，然后通过服务端渲染将动态内容合成图像数据渲染成最终动态效果图进行打包输出，以实现基于图层模板的高效定制化动态图片生成，可以满足电商场景下的批量动态图片生成和处理需求，减少人工重复工作，且基于图层模板的方式可复用性强，可拓展性强，可以长期迭代更新，使用维护成本低，易于上手。

在一个可能的设计中，所述方法还包括：

获取动态元素组及统一的元素组属性信息，所述动态元素组包含若干动态元素；

根据元素组属性信息将动态元素组内的各动态元素绘制在底层画布上，形成叠合后的动态内容合成图像数据。

在一个可能的设计中，所述基础属性包括图片模板的尺寸信息、方位信息和颜色信息，所述根据操作指令调整图片模板的基础属性，包括：根据操作指令对图片模板进行尺寸、方位和颜色的更改，得到底层画布。

在一个可能的设计中，所述动态元素包括文本信息和/或图片信息，所述元素属性信息包括对应动态元素的图层信息、尺寸信息、位置信息、透明度信息、旋转角度信息、拉伸角度信息、边框尺寸信息和边框颜色信息。

在一个可能的设计中，所述将各动态元素按照其对应的元素属性信息绘制在底层画布上，形成叠合后的动态内容合成图像数据，包括：根据图层信息和位置信息将对应动态元素叠合到底层画布上相应图层和位置，根据透明度信息、旋转角度信息、拉伸角度信息、边框尺寸信息和边框颜色信息分别进行对应动态元素的透明度设置、旋转角度设置、拉伸角度设置、边框尺寸设置和边框颜色设置。

在一个可能的设计中，所述文本信息和/或图片信息的元素属性信息还包括占位内容信息和渲染内容信息，在形成叠合后的动态内容合成图像数据时，将占位内容信息同文本信息和/或图片信息占位叠合到底层画布上相应图层，形成叠合后的动态内容合成图像数据，在将动态内容合成图像数据渲染成最终动态效果图时，用渲染内容信息替换占位内容信息。

在一个可能的设计中，所述采用服务端渲染方法将动态内容合成图像数据渲染成最终动态效果图，包括：调用图片渲染服务端程序开启网页浏览器将动态内容合成图像数据在网页浏览器界面依据设定算法渲染成最终动态效果图。

第二方面，提供一种动态图片生成系统，包括第一获取单元、第二获取单元、编辑单元、渲染单元和打包单元，其中：

第一获取单元，用于获取图片模板，并根据操作指令调整图片模板的基础属性，得到底层画布；

第二获取单元，用于获取各动态元素及对应的元素属性信息；

编辑单元，用于将各动态元素按照其对应的元素属性信息绘制在底层画布上，形成叠合后的动态内容合成图像数据；

渲染单元，用于采用服务端渲染方法将动态内容合成图像数据渲染成最终动态效果图；

打包单元，用于将最终动态效果图压缩打包为设定格式文件进行保存和输出。

第三方面，提供一种动态图片生成设备，包括：

存储器，用于存储指令；

处理器，用于读取所述存储器中存储的指令，并根据指令执行上述第一方面中任意一种所述的方法。

第四方面，提供一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，使得所述计算机执行第一方面种任意一种所述的方法。同时，还提供一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行第一方面种任意一种所述的方法。

有益效果：本发明通过获取定制化的动态元素及对应的元素属性信息，来将各动态元素按照对应的元素属性信息绘制在调整好的底层画布上，形成叠合后的动态内容合成图像数据，然后通过服务端渲染将动态内容合成图像数据渲染成最终动态效果图进行打包输出，以实现基于图层模板的高效定制化动态图片生成，可以满足电商场景下的批量动态图片生成和处理需求，减少人工重复工作，且基于图层模板多图层叠合方式可复用性强，可拓展性强，可以长期迭代更新，使用维护成本低，易于上手。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例中的方法步骤示意图；

图2为本发明实施例中的系统构成示意图；

图3为本发明实施例中的设备构成示意图。

具体实施方式

在此需要说明的是，对于这些实施例方式的说明用于帮助理解本发明，但并不构成对本发明的限定。本文公开的特定结构和功能细节仅用于描述本发明的示例实施例。然而，可用很多备选的形式来体现本发明，并且不应当理解为本发明限制在本文阐述的实施例中。

应当理解，术语第一、第二等仅用于区分描述，而不能理解为指示或暗示相对重要性。尽管本文可以使用术语第一、第二等来描述各种特征，这些特征不应当受到这些术语的限制。例如，可以将第一单元称作第二单元，并且类似地可以将第二单元称作第一单元，同时不脱离本发明的示例实施例的范围。

在下面的描述中提供了特定的细节，以便于对示例实施例的完全理解。然而，本领域普通技术人员应当理解可以在没有这些特定细节的情况下实现示例实施例。例如可以在框图中示出系统，以避免用不必要的细节来使得示例不清楚。在其他实施例中，可以不以非必要的细节来示出众所周知的过程、结构和技术，以避免使得实施例不清楚。

实施例1：

本实施例提供一种动态图片生成方法，可应用于电商平台批量化处理生成动态图片，如图1所示，方法包括以下步骤：

S1.获取图片模板，并根据操作指令调整图片模板的基础属性，得到底层画布。

具体实施时，可通过相应的模板编辑器获取图片模板，并接收用户操作指令，来对图片模板的基础属性进行调整，所述基础属性包括图片模板的尺寸信息、方位信息和颜色信息，不包含样式属性，所述根据操作指令调整图片模板的基础属性，具体包括：根据操作指令对图片模板进行尺寸、方位和颜色的更改，得到底层画布。模板编辑器是一个基于网页端的操作界面，用于可视化操作模板的内容和编辑各项属性，主要表现为使用鼠标拖拽式操作完成图片模板的定位、旋转、尺寸等操作，在每次操作修改后实时更新计算当前最新的图片模板，基于高性能的模板渲染绘制方案，可以所见即所得的实时预览编辑效果。

S2.获取各动态元素及对应的元素属性信息。

具体实施时，可预先将已知的图像拆解出不同的动态元素，设定动态元素的元素属性信息，以实现后续定制化的动态图片生成。动态元素可以是文本信息、图片信息、形状图案信息和/或其他内容，每个元素可单独导入到模板编辑器中进行后续处理。可独立设置每个元素的元素属性信息，元素属性信息包括对应动态元素的图层信息、尺寸信息、位置信息、透明度信息、旋转角度信息、拉伸角度信息、边框尺寸信息和边框颜色信息等。

或者也可预先将已知的图像拆解出动态元素组，设定统一的元素组属性信息，多个动态元素可以组合为一个动态元素组，动态元素组包含动态元素所有信息，元素组属性定义为只在动态元素组内相对生效，比如动态元素组内各动态元素位置坐标的基准线是相对于动态元素组的而非整个底层画布的。通过元素组属性实现对组内各动态元素的统一管理。

S3.将各动态元素按照其对应的元素属性信息绘制在底层画布上，形成叠合后的动态内容合成图像数据。

具体实施时，可利用编辑器来根据图层信息和位置信息将对应动态元素叠合到底层画布上相应图层和位置，根据透明度信息、旋转角度信息、拉伸角度信息、边框尺寸信息和边框颜色信息分别进行对应动态元素的透明度设置、旋转角度设置、拉伸角度设置、边框尺寸设置和边框颜色设置，形成叠合后的动态内容合成图像数据。

S4.采用服务端渲染方法将动态内容合成图像数据渲染成最终动态效果图。

具体实施时，可调用图片渲染服务端程序开启网页浏览器将动态内容合成图像数据在网页浏览器界面依据设定算法渲染成最终动态效果图。图片渲染服务端程序是一套保持与网页端实时渲染一致的技术架构和方案，在需要渲染生成单张图片的时候，在服务器端开启一个没有用户界面的网页浏览器，把合并了动态内容后的图片模板数据依统一且一致的算法渲染为一张最终效果图片。

图片信息、文字信息类型的动态元素设额外的占位内容和渲染内容属性，通过编辑器操作修改动态元素属性时会展示占位内容，当需要动态输出图片时，则使用渲染内容替换掉占位内容，以此实现每张动态图片的生成结果都可以属性样式一致但内容可定制化的目的。即所述文本信息和/或图片信息的元素属性信息还包括占位内容信息和渲染内容信息，在形成叠合后的动态内容合成图像数据时，将占位内容信息同文本信息和/或图片信息占位叠合到底层画布上相应图层，形成叠合后的动态内容合成图像数据，在将动态内容合成图像数据渲染成最终动态效果图时，用渲染内容信息替换占位内容信息。

S5.将最终动态效果图压缩打包为设定格式文件进行保存和输出。

具体实施时，在渲染获得最终动态效果图后，可将最终动态效果图压缩打包为设定格式文件进行保存和输出，以便用户调取使用。

通过本实施例的方法流程可以实现基于图层模板的高效定制化动态图片生成，可以满足电商场景下的批量动态图片生成和处理需求，减少人工重复工作，且基于图层模板多图层叠合方式可复用性强，可拓展性强，可以长期迭代更新，使用维护成本低，易于上手，更适合普通运营及业务人员操作。

实施例2：

本实施例提供一种动态图片生成系统，如图2所示，包括第一获取单元、第二获取单元、编辑单元、渲染单元和打包单元，其中：

第一获取单元，用于获取图片模板，并根据操作指令调整图片模板的基础属性，得到底层画布；

第二获取单元，用于获取各动态元素及对应的元素属性信息；

编辑单元，用于将各动态元素按照其对应的元素属性信息绘制在底层画布上，形成叠合后的动态内容合成图像数据；

渲染单元，用于采用服务端渲染方法将动态内容合成图像数据渲染成最终动态效果图；

打包单元，用于将最终动态效果图压缩打包为设定格式文件进行保存和输出。

实施例3：

本实施例提供一种动态图片生成设备，如图3所示，在硬件层面，包括：

数据接口，用于建立处理器与其他数据端的数据对接，以接收或输出相应数据；

存储器，用于存储指令；

处理器，用于读取所述存储器中存储的指令，并根据指令执行实施例1中的动态图片生成方法。

可选地，该计算机设备还包括内部总线。处理器与存储器和显示器可以通过内部总线相互连接，该内部总线可以是ISA(Industry Standard Architecture，工业标准体系结构)总线、PCI(Peripheral Component Interconnect，外设部件互连标准)总线或EISA(Extended Industry Standard Architecture，扩展工业标准结构)总线等。所述总线可以分为地址总线、数据总线、控制总线等。

所述存储器可以但不限于包括随机存取存储器(Random Access Memory，RAM)、只读存储器(Read Only Memory，ROM)、闪存(Flash Memory)、先进先出存储器(First InputFirst Output，FIFO)和/或先进后出存储器(First In Last Out，FILO)等。所述处理器可以是通用处理器，包括中央处理器(Central Processing Unit，CPU)、网络处理器(NetworkProcessor，NP)等；还可以是数字信号处理器(Digital Signal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现场可编程门阵列(Field－Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。

实施例4：

本实施例提供一种计算机可读存储介质，所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，使得所述计算机执行实施例1中的动态图片生成方法。其中，所述计算机可读存储介质是指存储数据的载体，可以但不限于包括软盘、光盘、硬盘、闪存、优盘和/或记忆棒(Memory Stick)等，所述计算机可以是通用计算机、专用计算机、计算机网络或者其他可编程系统。

本实施例还提供一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行实施例1中的动态图片生成方法。其中，所述计算机可以是通用计算机、专用计算机、计算机网络或者其他可编程系统。

最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。

Claims (8)

1.一种动态图片生成方法，其特征在于，包括：

获取图片模板，并根据操作指令调整图片模板的基础属性，得到底层画布；

获取各动态元素及对应的元素属性信息，所述动态元素包括文本信息和/或图片信息，所述元素属性信息包括对应动态元素的图层信息、尺寸信息、位置信息、透明度信息、旋转角度信息、拉伸角度信息、边框尺寸信息、边框颜色信息占位内容信息和渲染内容信息；

将各动态元素按照其对应的元素属性信息绘制在底层画布上，形成叠合后的动态内容合成图像数据，包括将占位内容信息同文本信息和/或图片信息占位叠合到底层画布上相应图层；

采用服务端渲染方法将动态内容合成图像数据渲染成最终动态效果图，包括用渲染内容信息替换占位内容信息；

将最终动态效果图压缩打包为设定格式文件进行保存和输出。

2.根据权利要求1所述的一种动态图片生成方法，其特征在于，所述方法还包括：

获取动态元素组及统一的元素组属性信息，所述动态元素组包含若干动态元素；

根据元素组属性信息将动态元素组内的各动态元素绘制在底层画布上，形成叠合后的动态内容合成图像数据。

3.根据权利要求1所述的一种动态图片生成方法，其特征在于，所述基础属性包括图片模板的尺寸信息、方位信息和颜色信息，所述根据操作指令调整图片模板的基础属性，包括：根据操作指令对图片模板进行尺寸、方位和颜色的更改，得到底层画布。

4.根据权利要求1所述的一种动态图片生成方法，其特征在于，所述将各动态元素按照其对应的元素属性信息绘制在底层画布上，形成叠合后的动态内容合成图像数据，包括：根据图层信息和位置信息将对应动态元素叠合到底层画布上相应图层和位置，根据透明度信息、旋转角度信息、拉伸角度信息、边框尺寸信息和边框颜色信息分别进行对应动态元素的透明度设置、旋转角度设置、拉伸角度设置、边框尺寸设置和边框颜色设置。

5.根据权利要求1所述的一种动态图片生成方法，其特征在于，所述采用服务端渲染方法将动态内容合成图像数据渲染成最终动态效果图，包括：调用图片渲染服务端程序开启网页浏览器将动态内容合成图像数据在网页浏览器界面依据设定算法渲染成最终动态效果图。

6.一种动态图片生成系统，其特征在于，包括第一获取单元、第二获取单元、编辑单元、渲染单元和打包单元，其中：

第一获取单元，用于获取图片模板，并根据操作指令调整图片模板的基础属性，得到底层画布；

第二获取单元，用于获取各动态元素及对应的元素属性信息，所述动态元素包括文本信息和/或图片信息，所述元素属性信息包括对应动态元素的图层信息、尺寸信息、位置信息、透明度信息、旋转角度信息、拉伸角度信息、边框尺寸信息、边框颜色信息占位内容信息和渲染内容信息；

编辑单元，用于将各动态元素按照其对应的元素属性信息绘制在底层画布上，形成叠合后的动态内容合成图像数据，包括将占位内容信息同文本信息和/或图片信息占位叠合到底层画布上相应图层；

渲染单元，用于采用服务端渲染方法将动态内容合成图像数据渲染成最终动态效果图，包括用渲染内容信息替换占位内容信息；

打包单元，用于将最终动态效果图压缩打包为设定格式文件进行保存和输出。

7.一种动态图片生成设备，其特征在于，包括：

存储器，用于存储指令；

处理器，用于读取所述存储器中存储的指令，并根据指令执行权利要求1-5任意一项所述的方法。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有指令，当所述指令在计算机上运行时，使得所述计算机执行权利要求1-5任意一项所述的方法。