CN113742530A

CN113742530A - System, method, device, processor and storage medium for realizing generation and processing of digital poster picture based on SVG

Info

Publication number: CN113742530A
Application number: CN202111070509.XA
Authority: CN
Inventors: 俞枫; 黄韦; 方优; 乐毅军
Original assignee: Guotai Junan Securities Co Ltd
Current assignee: Guotai Junan Securities Co Ltd
Priority date: 2021-09-13
Filing date: 2021-09-13
Publication date: 2021-12-03

Abstract

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.

Description

System, method, device, processor and storage medium for realizing generation and processing of digital poster picture based on SVG

Technical Field

The invention relates to the field of enterprise operation and publicity, in particular to a system, a method, a device, a processor and a computer readable storage medium for realizing the generation and processing of digital poster pictures based on SVG.

Background

In the prior art, pixel points and color values of picture rendering results in a common format are calculated to generate the SVG, and the SVG is only an information carrier for generating the results. In the prior art, picture paths in multiple SVG label attributes are also obtained, the multiple picture paths are recombined according to a rule sequence, and then required hand-drawn animation is generated, and dynamic editing of multiple elements and attributes of the text cannot be completed.

Disclosure of Invention

The invention aims to overcome the defects of the prior art and provides a system, a method, a device, a processor and a computer readable storage medium for realizing generation and processing of a digital poster picture based on SVG, which have the advantages of large information amount, high accuracy and wider application range.

In order to achieve the above object, the system, method, device, processor and computer readable storage medium thereof for realizing the digital poster picture generation processing based on SVG of the present invention are as follows:

this system based on SVG realizes that digital poster picture generates processing, its key feature is, the system include:

the carrier description module is used for abstracting the content of the SVG format picture into a JSON information body and marking data definition information of the SVG structure;

the rendering engine module is connected with the carrier description module and used for converting and outputting the input custom JSON into an SVG page and monitoring effective input events;

the dynamic generation module is connected with the rendering engine module and used for outputting a JSON information body with complete poster information and transmitting the JSON information body to the background generation module;

the background generation module is connected with the dynamic generation module and used for analyzing the customized JSON information and converting the customized JSON information into a picture with a required format by re-performing SVG drawing and rendering;

and the re-editing module is connected with the background generating module and used for manually editing, finely adjusting and outputting the picture.

Preferably, the rendering engine module includes:

the rendering component unit is connected with the carrier description module and the dynamic generation module and used for converting and outputting the input custom JSON into an SVG page for display;

and the event bus unit is connected with the rendering component unit and used for subscribing and monitoring the effective input events of the user and responding the events to perform corresponding behavior transformation on the SVG.

Preferably, the valid input events monitored by the rendering engine module include mouse events, element events and transition events.

Preferably, the system further comprises an HTML interface module connected with the rendering engine module and the background generation module, and configured to edit information on an SVG page, and package the information externally as a tag component, so that the system is directly embedded in the HTML page for use.

Preferably, the data definition information includes a template type, a poster size, and an element set, wherein the element set includes a text element and a picture element.

The method for realizing the SVG-based digital poster picture generation processing by utilizing the system is mainly characterized by comprising the following steps of:

(1) abstracting a JSON information body from the content of the SVG, and labeling data definition information of an SVG structure;

(2) the rendering engine module converts and outputs the input custom JSON into an SVG page and monitors effective input events;

(3) the dynamic generation module outputs a JSON information body with complete poster information and transmits the JSON information body to the background generation module;

(4) the background generation module analyzes the customized JSON information, and performs SVG rendering again to convert the customized JSON information into a picture with a required format;

(5) and carrying out manual editing and fine adjustment on the picture according to the returned JSON information and outputting the picture.

Preferably, the step (2) specifically comprises the following steps:

(2.1) converting and outputting the input custom JSON into an SVG page by the rendering component unit;

and (2.2) effectively inputting an event by the event bus unit user, and performing corresponding behavior transformation on the SVG in response to the event.

Preferably, the method further comprises the steps of:

and the rendering engine module edits information on the SVG page, packages the information externally into a tag component, and dynamically updates the JSON information body on the HTML page.

This a device for realizing digital poster picture generation processing based on SVG, its key feature is, the device include:

a processor configured to execute computer-executable instructions;

a memory storing one or more computer-executable instructions that, when executed by the processor, perform the steps of the above-described method for implementing SVG-based digitized poster graphic generation processing.

The processor for realizing the SVG-based digital poster picture generation processing is mainly characterized in that the processor is configured to execute computer-executable instructions, and when the computer-executable instructions are executed by the processor, the steps of the method for realizing the SVG-based digital poster picture generation processing are realized.

The computer-readable storage medium is primarily characterized in that a computer program is stored thereon, which computer program is executable by a processor for carrying out the steps of the above-described method for realizing the SVG-based digital poster picture generation process.

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 can be 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 very wide.

Drawings

Fig. 1 is a schematic diagram of a system for realizing digital poster picture generation processing based on SVG.

Detailed Description

In order to more clearly describe the technical contents of the present invention, the following further description is given in conjunction with specific embodiments.

The invention relates to a system for realizing generation and processing of digital poster pictures based on SVG, which comprises:

As a preferred embodiment of the present invention, the rendering engine module includes:

As a preferred embodiment of the present invention, the valid input events monitored by the rendering engine module include mouse events, element events and conversion events.

As a preferred embodiment of the present invention, the system further includes an HTML interface module, connected to the rendering engine module and the background generation module, for editing information on the SVG page, externally packaging the information as a tag component, and directly embedding the system in the HTML page for use.

As a preferred embodiment of the present invention, the data definition information includes a template type, a poster size, and an element set, wherein the element set includes a text element and a picture element.

The method for realizing the SVG-based digital poster picture generation processing by utilizing the system comprises the following steps:

(2.2) effectively inputting an event by an event bus unit user, and responding to the event to perform corresponding behavior transformation on the SVG;

As a preferred embodiment of the present invention, the method further comprises the steps of:

The device for realizing the SVG-based digital poster picture generation processing comprises the following steps:

a processor configured to execute computer-executable instructions;

The processor for implementing SVG-based digitized poster graphic generation processing of the present invention, wherein said processor is configured to execute computer-executable instructions which, when executed by said processor, implement the steps of the above-described method for implementing SVG-based digitized poster graphic generation processing.

The computer-readable storage medium of the present invention has stored thereon a computer program executable by a processor to implement the steps of the above-described method of implementing SVG-based digital poster picture generation processing.

In the specific implementation mode of the invention, a method for automatically producing poster pictures in batch is provided aiming at the business requirements of enterprise operation poster propaganda.

The system of the present invention comprises:

information carrier description, self-defining a set of JSON information body, describing elements such as pictures, texts, shapes and the like in the poster, generating the size, category, style and the like of the poster;

the HTML interface module takes the SVG as canvas, is externally packaged as a tag component and can be directly embedded in an HTML page for use;

the event bus module monitors various user effective input events from the embedded page and responds to the events to perform corresponding behavior transformation on the SVG;

and the converted SVG can output a JSON information body with complete poster information at the front end and transmit the JSON information body to the background generation module, and the background analyzes the customized JSON information and re-draws and renders the SVG to convert the JSON information body into pictures with required formats such as PNG (portable network graphics), JEPG (Japanese image guidance) and the like.

And the re-editing module can directly and manually edit and fine tune the machine map on a system page and then output the machine map by the generating module.

The invention is based on SVG vector graphics description format, dynamically separates, edits and combines the picture information, can generate pictures according to business customization, solves the requirement of operators on propagating materials for a large amount of digital posters for a long time, greatly reduces the labor cost for poster making, and simultaneously technically realizes that the core function is abstracted into npm packages, the information carrier can be arbitrarily defined, has good application expandability, and meets the output requirements of various customized pictures.

Fig. 1 is a schematic flow chart of the technical solution of the present invention. The invention abstracts the content of the SVG into a JSON information body to mark the position, element size, element type, picture element connection or base64 value, text element attribute and the like in the SVG structure. The front end encapsulates a rendering engine by using javascript, the rendering engine comprises a rendering component and an event bus, the rendering component can convert and output input custom JSON into SVG page display, and the event bus subscribes events and corresponding event response actions such as dragging and clicking keyboard keys by various users. The whole rendering engine is written by Javascript and can be directly combined with HTML5 pages. After the HTML5 page user finishes editing, the modified JSON information body is output and transmitted back to the background module, the background module is converted into new pictures in formats such as Base64, PNG, JPEG and the like through rendering and output, and simultaneously transmitted back to the page JSON information body, and the user can fine-tune and output again according to the transmitted JSON.

The method is characterized in that event monitoring is carried out on an SVG label node embedded in an HTML page by utilizing the characteristics of XML (extensible markup language) labels of the SVG, the SVG is enabled to change along with the input of a user, information generated by the change is transmitted to a background in a JSON (Java Server object notation) form, JSON information is converted into the SVG according to a corresponding node and an attribute value by the background, the SVG is rendered in a background service and converted into pictures with required formats such as Base64, PNG, JEPG and the like, the converted format is not a core, the core is a static description language of the SVG, picture elements are subjected to data abstraction, and the SVG is changed into a dynamic self-defined editing and readjustable picture generating system through design.

The text is a self-defined edition aiming at all types of tags, and can change the address of a picture, the content of a text, the style of the text, the size and the position of the picture and the text and the like.

For a specific implementation of this embodiment, reference may be made to the relevant description in the above embodiments, which is not described herein again.

It is understood that the same or similar parts in the above embodiments may be mutually referred to, and the same or similar parts in other embodiments may be referred to for the content which is not described in detail in some embodiments.

It should be noted that the terms "first," "second," and the like in the description of the present invention are used for descriptive purposes only and are not to be construed as indicating or implying relative importance. Further, in the description of the present invention, the meaning of "a plurality" means at least two unless otherwise specified.

Any process or method descriptions in flow charts or otherwise described herein may be understood as representing modules, segments, or portions of code which include one or more executable instructions for implementing specific logical functions or steps of the process, and alternate implementations are included within the scope of the preferred embodiment of the present invention in which functions may be executed out of order from that shown or discussed, including substantially concurrently or in reverse order, depending on the functionality involved, as would be understood by those reasonably skilled in the art of the present invention.

It should be understood that portions of the present invention may be implemented in hardware, software, firmware, or a combination thereof. In the above embodiments, the various steps or methods may be implemented in software or firmware stored in memory and executed by suitable instruction execution devices. For example, if implemented in hardware, as in another embodiment, any one or combination of the following techniques, which are known in the art, may be used: a discrete logic circuit having a logic gate circuit for implementing a logic function on a data signal, an application specific integrated circuit having an appropriate combinational logic gate circuit, a Programmable Gate Array (PGA), a Field Programmable Gate Array (FPGA), or the like.

It will be understood by those skilled in the art that all or part of the steps carried by the method for implementing the above embodiments may be implemented by hardware related to instructions of a program, and the corresponding program may be stored in a computer readable storage medium, and when executed, the program includes one or a combination of the steps of the method embodiments.

In addition, functional units in the embodiments of the present invention may be integrated into one processing module, or each unit may exist alone physically, or two or more units are integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode. The integrated module, if implemented in the form of a software functional module and sold or used as a separate product, may also be stored in a computer readable storage medium.

The storage medium mentioned above may be a read-only memory, a magnetic or optical disk, etc.

In the description herein, references to the description of the term "one embodiment," "some embodiments," "an example," "a specific example," or "some examples," etc., mean that a particular feature, structure, material, or characteristic described in connection with the embodiment or example is included in at least one embodiment or example of the invention. In this specification, the schematic representations of the terms used above do not necessarily refer to the same embodiment or example. Furthermore, the particular features, structures, materials, or characteristics described may be combined in any suitable manner in any one or more embodiments or examples.

In this specification, the invention has been described with reference to specific embodiments thereof. It will, however, be evident that various modifications and changes may be made thereto without departing from the broader spirit and scope of the invention. The specification and drawings are, accordingly, to be regarded in an illustrative rather than a restrictive sense.

Claims

1. A system for realizing digital poster picture generation processing based on SVG is characterized in that the system comprises:

2. The system for implementing digital poster picture generation processing based on SVG of claim 1, wherein said rendering engine module comprises:

3. The system for implementing a digital poster picture generation process based on SVG of claim 1, wherein said valid input events intercepted by said rendering engine module include mouse events, element events and transition events.

4. The system for realizing generation and processing of digitized poster pictures based on SVG as claimed in claim 1, wherein said system further comprises an HTML interface module connected to said rendering engine module and background generation module for editing information on SVG page, externally packaging as tag component, and directly embedding system on HTML page for use.

5. The system for implementing a digitized poster graphic generation process based on SVG of claim 1 wherein said data defining information includes a template type, poster size and a set of elements, wherein the set of elements includes text elements and graphic elements.

6. A method for implementing SVG-based digital poster graphic generation processing using the system of claim 1, said method comprising the steps of:

7. The method for realizing SVG-based digitized poster picture generation processing according to claim 6, wherein said step (2) specifically comprises the steps of:

8. The method of implementing SVG-based digitized poster picture generation processing of claim 6, further comprising the steps of:

9. An apparatus for implementing SVG-based digital poster picture generation processing, said apparatus comprising:

a processor configured to execute computer-executable instructions;

a memory storing one or more computer-executable instructions that, when executed by the processor, perform the steps of the method of any of claims 6 to 8 for performing SVG-based digital poster picture generation processing.

10. A processor for implementing SVG-based digitized poster graphic generation processing, characterized in that said processor is configured to execute computer-executable instructions which, when executed by said processor, implement the steps of the method of implementing SVG-based digitized poster graphic generation processing of any of claims 6 to 8.

11. A computer-readable storage medium, characterized in that a computer program is stored thereon, which computer program is executable by a processor to implement the steps of the method of implementing the SVG-based digitized poster picture generation process of any of claims 6 to 8.