基于svg实现数字化海报图片生成处理的系统、方法、装置、处理器及其存储介质

文档序号:1921667 发布日期:2021-12-03 浏览:13次 >En<

阅读说明:本技术 基于svg实现数字化海报图片生成处理的系统、方法、装置、处理器及其存储介质 (System, method, device, processor and storage medium for realizing generation and processing of digital poster picture based on SVG ) 是由 俞枫 黄韦 方优 乐毅军 于 2021-09-13 设计创作,主要内容包括:本发明涉及一种基于SVG实现数字化海报图片生成处理的系统,包括载体描述模块用于将SVG格式图片的内容抽象为JSON信息体,标注SVG结构的数据定义信息;渲染引擎模块用于将输入自定义JSON转换输出为SVG页面以及监听有效输入事件;动态生成模块用于输出带有完整海报信息的JSON信息体;后台生成模块用于进行SVG绘制渲染转化为所需格式图片;再编辑模块,对图片进行人工编辑微调并输出。本发明还涉及一种实现基于SVG的数字化海报图片生成处理的方法。采用了本发明的基于SVG实现数字化海报图片生成处理的系统、方法、装置、处理器及其计算机可读存储介质,利用SVG基于图形元素、不依赖分辨率等特点,以SVG作为图片信息画布,在HTML页面快速生成海报图片素材,适用范围广泛。(The invention relates to a system for realizing generation and processing of a digital poster picture based on SVG (scalable vector graphics), which comprises a carrier description module, a display module and a display module, wherein the carrier description module is used for abstracting the content of a SVG format picture into a JSON information body and marking data definition information of an SVG structure; the rendering engine module is used for converting and outputting the input custom JSON into an SVG page and monitoring an effective input event; the dynamic generation module is used for outputting a JSON information body with complete poster information; the background generation module is used for carrying out SVG drawing and rendering and converting the SVG drawing and rendering into pictures with required formats; and the re-editing module is used for manually editing, finely adjusting and outputting the picture. The invention also relates to a method for realizing the generation and processing of the digital poster picture based on the SVG. By adopting the system, the method, the device, the processor and the computer readable storage medium for realizing the generation and the processing of the digital poster picture based on the SVG, the poster picture material is quickly generated on an HTML page by taking the SVG as the picture information canvas by utilizing the characteristics of the SVG, such as being based on graphic elements, independent of resolution ratio and the like, and the application range is wide.)

基于SVG实现数字化海报图片生成处理的系统、方法、装置、处 理器及其存储介质

技术领域

本发明涉及企业运营宣传领域,尤其涉及图片处理领域,具体是指一种基于SVG实现数字化海报图片生成处理的系统、方法、装置、处理器及其计算机可读存储介质。

背景技术

现有技术将一般格式的图片渲染结果的像素点、颜色值计算生成SVG,SVG只是它生成结果的信息承载体。现有技术还获取多个SVG标签属性中的图片路径,对多个图片路径根据规则顺序重组,完后生成所需手绘动画,且无法完成本文的多种元素和属性动态编辑。

发明内容

本发明的目的是克服了上述现有技术的缺点,提供了一种满足信息量大、准确性高、适用范围较为广泛的基于SVG实现数字化海报图片生成处理的系统、方法、装置、处理器及其计算机可读存储介质。

为了实现上述目的,本发明的基于SVG实现数字化海报图片生成处理的系统、方法、装置、处理器及其计算机可读存储介质如下:

该基于SVG实现数字化海报图片生成处理的系统,其主要特点是,所述的系统包括:

载体描述模块,用于将SVG格式图片的内容抽象为JSON信息体,标注SVG结构的数据定义信息;

渲染引擎模块,与所述的载体描述模块相连接,用于将输入自定义JSON转换输出为SVG页面,以及监听有效输入事件;

动态生成模块,与所述的渲染引擎模块相连接,用于输出带有完整海报信息的JSON信息体,传输至后台生成模块;

后台生成模块,与所述的动态生成模块相连接,用于解析自定义JSON信息,重新进行SVG绘制渲染转化为所需格式图片;

再编辑模块,与所述的后台生成模块相连接,对图片进行人工编辑微调并输出。

较佳地,所述的渲染引擎模块包括:

渲染组件单元,与所述的载体描述模块和动态生成模块相连接,用于将输入自定义JSON转换输出为SVG页面展示;

事件总线单元,与所述的渲染组件单元相连接,用于订阅监听用户的有效输入事件,并响应事件对SVG进行相应行为变换。

较佳地,所述的渲染引擎模块监听的有效输入事件包括鼠标事件、元素事件和转换事件。

较佳地,所述的系统还包括HTML接口模块,与所述的渲染引擎模块和后台生成模块相连接,用于在SVG页面上编辑信息,对外封装为标签组件,系统在HTML页面直接嵌入使用。

较佳地,所述的数据定义信息包括模板类型、海报尺寸和元素集,其中,元素集包括文本元素和图片元素。

该利用上述系统实现基于SVG的数字化海报图片生成处理的方法,其主要特点是,所述的方法包括以下步骤:

(1)将SVG的内容抽象JSON信息体,标注SVG结构的数据定义信息;

(2)渲染引擎模块将输入自定义JSON转换输出为SVG页面,以及监听有效输入事件;

(3)动态生成模块输出带有完整海报信息的JSON信息体,并传输至后台生成模块;

(4)后台生成模块解析自定义JSON信息,重新进行SVG绘制渲染转化为所需格式图片;

(5)根据回传的JSON信息,对图片进行人工编辑微调并输出。

较佳地,所述的步骤(2)具体包括以下步骤:

(2.1)渲染组件单元将输入自定义JSON转换输出为SVG页面展示;

(2.2)事件总线单元用户的有效输入事件,并响应事件对SVG进行相应行为变换。

较佳地,所述的方法还包括以下步骤:

渲染引擎模块在SVG页面上编辑信息,对外封装为标签组件,在HTML页面上动态更新JSON信息体。

该用于实现基于SVG的数字化海报图片生成处理的装置,其主要特点是,所述的装置包括:

处理器,被配置成执行计算机可执行指令;

存储器,存储一个或多个计算机可执行指令,所述的计算机可执行指令被所述的处理器执行时,实现上述的实现基于SVG的数字化海报图片生成处理的方法的步骤。

该用于实现基于SVG的数字化海报图片生成处理的处理器,其主要特点是,所述的处理器被配置成执行计算机可执行指令,所述的计算机可执行指令被所述的处理器执行时,实现上述的实现基于SVG的数字化海报图片生成处理的方法的步骤。

该计算机可读存储介质,其主要特点是,其上存储有计算机程序,所述的计算机程序可被处理器执行以实现上述的实现基于SVG的数字化海报图片生成处理的方法的各个步骤。

采用了本发明的基于SVG实现数字化海报图片生成处理的系统、方法、装置、处理器及其计算机可读存储介质,利用SVG基于图形元素、不依赖分辨率等特点,以SVG作为图片信息画布,能在HTML页面快速生成海报图片素材,适用范围十分广泛。

附图说明

图1为本发明的基于SVG实现数字化海报图片生成处理的系统的方案示意图。

具体实施方式

为了能够更清楚地描述本发明的技术内容,下面结合具体实施例来进行进一步的描述。

本发明的该基于SVG实现数字化海报图片生成处理的系统,其中包括:

载体描述模块,用于将SVG格式图片的内容抽象为JSON信息体,标注SVG结构的数据定义信息;

渲染引擎模块,与所述的载体描述模块相连接,用于将输入自定义JSON转换输出为SVG页面,以及监听有效输入事件;

动态生成模块,与所述的渲染引擎模块相连接,用于输出带有完整海报信息的JSON信息体,传输至后台生成模块;

后台生成模块,与所述的动态生成模块相连接,用于解析自定义JSON信息,重新进行SVG绘制渲染转化为所需格式图片;

再编辑模块,与所述的后台生成模块相连接,对图片进行人工编辑微调并输出。

作为本发明的优选实施方式,所述的渲染引擎模块包括:

渲染组件单元,与所述的载体描述模块和动态生成模块相连接,用于将输入自定义JSON转换输出为SVG页面展示;

事件总线单元,与所述的渲染组件单元相连接,用于订阅监听用户的有效输入事件,并响应事件对SVG进行相应行为变换。

作为本发明的优选实施方式,所述的渲染引擎模块监听的有效输入事件包括鼠标事件、元素事件和转换事件。

作为本发明的优选实施方式,所述的系统还包括HTML接口模块,与所述的渲染引擎模块和后台生成模块相连接,用于在SVG页面上编辑信息,对外封装为标签组件,系统在HTML页面直接嵌入使用。

作为本发明的优选实施方式,所述的数据定义信息包括模板类型、海报尺寸和元素集,其中,元素集包括文本元素和图片元素。

本发明的该利用上述系统实现基于SVG的数字化海报图片生成处理的方法,其中包括以下步骤:

(1)将SVG的内容抽象JSON信息体,标注SVG结构的数据定义信息;

(2)渲染引擎模块将输入自定义JSON转换输出为SVG页面,以及监听有效输入事件;

(2.1)渲染组件单元将输入自定义JSON转换输出为SVG页面展示;

(2.2)事件总线单元用户的有效输入事件,并响应事件对SVG进行相应行为变换;

(3)动态生成模块输出带有完整海报信息的JSON信息体,并传输至后台生成模块;

(4)后台生成模块解析自定义JSON信息,重新进行SVG绘制渲染转化为所需格式图片;

(5)根据回传的JSON信息,对图片进行人工编辑微调并输出。

作为本发明的优选实施方式,所述的方法还包括以下步骤:

渲染引擎模块在SVG页面上编辑信息,对外封装为标签组件,在HTML页面上动态更新JSON信息体。

本发明的该用于实现基于SVG的数字化海报图片生成处理的装置,其中所述的装置包括:

处理器,被配置成执行计算机可执行指令;

存储器,存储一个或多个计算机可执行指令,所述的计算机可执行指令被所述的处理器执行时,实现上述的实现基于SVG的数字化海报图片生成处理的方法的步骤。

本发明的该用于实现基于SVG的数字化海报图片生成处理的处理器,其中所述的处理器被配置成执行计算机可执行指令,所述的计算机可执行指令被所述的处理器执行时,实现上述的实现基于SVG的数字化海报图片生成处理的方法的步骤。

本发明的该计算机可读存储介质,其上存储有计算机程序,所述的计算机程序可被处理器执行以实现上述的实现基于SVG的数字化海报图片生成处理的方法的各个步骤。

本发明的具体实施方式中,针对企业运营海报宣传的业务需求,提出了一种自动化批量生产海报图片的方法。

本发明的系统包括:

信息载体描述,自定义一套JSON信息体,描述海报中图片、文本和形状等元素,以及生成海报尺寸、类别和风格等;

HTML接口模块,将SVG作为画布,对外封装为标签组件,可在HTML页面直接嵌入使用;

事件总线模块,监听多种来自嵌入页面的用户有效输入事件,并响应事件对SVG做出相应行为变换;

动态生成模块,变换后的SVG可在前端输出带有完整海报信息的JSON信息体,将其传给后台生成模块,后台经过对自定义JSON信息解析,重新SVG绘制渲染,将其转化为PNG、JEPG等需要格式图片。

再编辑模块,对于机器出图,可在系统页面上直接人工编辑微调,再由生成模块输出。

本发明基于SVG矢量图形描述格式,将图片信息动态拆分编辑组合,可根据业务定制化产生图片,解决了运营人员长期大量的数字化海报宣传物料的需求,大大降低了海报制作人力成本,同时技术实现上核心功能抽象成npm包,信息载体可任意定义,有很好的应用可扩展性,满足各种定制化图片输出需求。

如图1所示,为本发明技术方案的流程示意图。本发明将SVG的内容抽象JSON信息体,用来标注SVG结构里的位置、元素大小、元素类型、图片元素连接或base64值、文本元素属性等。前端使用javascript封装了一个渲染引擎,里面包含渲染组件和事件总线,渲染组件可将输入自定义JSON转换输出为SVG页面展示,事件总线订阅了各种用户拖拽点击键盘按键等事件及对应的事件响应动作。整个渲染引擎使用Javascript编写,可直接与HTML5页面结合。HTML5页面用户编辑完成后,输出修改后的JSON信息体,回传给后台模块,后台模块通过渲染转换为新的Base64、PNG、JPEG等格式图片输出,同时回传给页面JSON信息体,用户可根据回传的JSON,重新微调再输出。

本文是利用SVG的XML标注的特点,对嵌入HTML页的SVG标签节点进行事件监听,使SVG随用户输入产生变化,将变化产生的信息以JSON形式传给后台,后台将JSON信息按对应节点及属性值转成SVG,再将SVG在后台服务渲染,将其转化为Base64、PNG、JEPG等需要格式图片,转化格式不是核心,核心是将SVG这种静态的描述语言,将图片元素进行数据抽象,通过设计变为一种动态可自定义编辑可再调整的图片生成系统。

本文是针对所有类型标签的一种自定义编辑,可以改变图片地址,可以改变文本内容,文本样式,图片及文本大小、位置等信息。

本实施例的具体实现方案可以参见上述实施例中的相关说明,此处不再赘述。

可以理解的是,上述各实施例中相同或相似部分可以相互参考,在一些实施例中未详细说明的内容可以参见其他实施例中相同或相似的内容。

需要说明的是,在本发明的描述中,术语“第一”、“第二”等仅用于描述目的,而不能理解为指示或暗示相对重要性。此外,在本发明的描述中,除非另有说明,“多个”的含义是指至少两个。

流程图中或在此以其他方式描述的任何过程或方法描述可以被理解为,表示包括一个或更多个用于实现特定逻辑功能或过程的步骤的可执行指令的代码的模块、片段或部分,并且本发明的优选实施方式的范围包括另外的实现,其中可以不按所示出或讨论的顺序,包括根据所涉及的功能按基本同时的方式或按相反的顺序,来执行功能,这应被本发明的实施例所属技术领域的技术人员所理解。

应当理解,本发明的各部分可以用硬件、软件、固件或它们的组合来实现。在上述实施方式中,多个步骤或方法可以用存储在存储器中且由合适的指令执行装置执行的软件或固件来实现。例如,如果用硬件来实现,和在另一实施方式中一样,可用本领域公知的下列技术中的任一项或他们的组合来实现:具有用于对数据信号实现逻辑功能的逻辑门电路的离散逻辑电路,具有合适的组合逻辑门电路的专用集成电路,可编程门阵列(PGA),现场可编程门阵列(FPGA)等。

本技术领域的普通技术人员可以理解实现上述实施例方法携带的全部或部分步骤是可以通过程序来指令相关的硬件完成,相应的程序可以存储于一种计算机可读存储介质中,该程序在执行时,包括方法实施例的步骤之一或其组合。

此外,在本发明各个实施例中的各功能单元可以集成在一个处理模块中,也可以是各个单元单独物理存在,也可以两个或两个以上单元集成在一个模块中。上述集成的模块既可以采用硬件的形式实现,也可以采用软件功能模块的形式实现。集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时,也可以存储在一个计算机可读取存储介质中。

上述提到的存储介质可以是只读存储器,磁盘或光盘等。

在本说明书的描述中,参考术语“一个实施例”、“一些实施例”、“示例”、“具体示例”、或“一些示例”等的描述意指结合该实施例或示例描述的具体特征、结构、材料或者特点包含于本发明的至少一个实施例或示例中。在本说明书中,对上述术语的示意性表述不一定指的是相同的实施例或示例。而且,描述的具体特征、结构、材料或者特点可以在任何的一个或多个实施例或示例中以合适的方式结合。

采用了本发明的基于SVG实现数字化海报图片生成处理的系统、方法、装置、处理器及其计算机可读存储介质,利用SVG基于图形元素、不依赖分辨率等特点,以SVG作为图片信息画布,能在HTML页面快速生成海报图片素材,适用范围十分广泛。

在此说明书中,本发明已参照其特定的实施例作了描述。但是,很显然仍可以作出各种修改和变换而不背离本发明的精神和范围。因此,说明书和附图应被认为是说明性的而非限制性的。

9页详细技术资料下载
上一篇:一种医用注射器针头装配设备
下一篇:一种图推荐方法、装置及电子设备

网友询问留言

已有0条留言

还没有人留言评论。精彩留言会获得点赞!

精彩留言,会给你点赞!