A method, apparatus, electronic device, and storage medium for synthesizing graphic and text materials

Abstract

This application relates to the field of computer technology, and particularly to a method, device, electronic device, and storage medium for synthesizing graphic and text materials, aiming to improve the efficiency of synthesizing graphic and text materials. Among them, the method includes: creating an entity corresponding to the resource file according to the pre-configured resource file, where the resource file includes a decorative resource file and a picture resource file to be synthesized; obtaining the target drawing attributes of the entity according to the rendering configuration information of the resource file; drawing corresponding picture entities and text entities in the rendering canvas according to the resource file and the target drawing attributes; and synthesizing the target graphic and text materials based on the picture entities and text entities. Since this application draws picture entities and text entities in the rendering canvas based on the pre-configured resource file, and automatically synthesizes the target graphic and text materials based on the drawn picture entities and text entities, without the need for manual adjustment, the efficiency of synthesizing graphic and text materials is improved.

Description

Background Art

[0002] With the development of intelligent terminals, audio and video technologies, etc., objects can browse, produce, and share multimedia resources such as pictures and videos through intelligent terminals. During the production process, more and more objects enrich the content of pictures or videos by synthesizing graphic and text materials.

[0003] In related technologies, synthesizing graphic and text materials mainly involves an object selecting appropriate materials from the decorative materials and background materials provided by the editing software, then manually adjusting the positions, sizes, etc. of the selected materials, and finally obtaining the synthesized picture or video according to the materials selected by the object and the adjustments made to the materials. However, when synthesizing graphic and text materials based on the above method, usually in order to achieve better effects, the object needs to make multiple selections and adjustments, which takes a long time.

[0004] Therefore, how to improve the efficiency of synthesizing graphic and text materials is an urgent problem to be solved at present. Summary of the Invention

[0005] Embodiments of the present application provide a method, device, electronic device, and storage medium for synthesizing graphic and text materials, so as to improve the efficiency of synthesizing graphic and text materials.

[0006] A method for synthesizing graphic and text materials provided by an embodiment of the present application includes:

[0007] Creating an entity corresponding to the resource file according to a pre-configured resource file, where the resource file includes a decorative resource file and a picture resource file to be synthesized;

[0008] Obtaining the target drawing attributes of the entity according to the rendering configuration information of the resource file;

[0009] Drawing corresponding picture entities and text entities in a rendering canvas according to the resource file and the target drawing attributes;

[0010] Synthesizing a target graphic and text material based on the picture entity and the text entity.

[0011] A device for synthesizing graphic and text materials provided by an embodiment of the present application includes:

[0012] A creating unit, configured to create an entity corresponding to the resource file according to a pre-configured resource file, where the resource file includes a decorative resource file and a picture resource file to be synthesized;

[0013] An obtaining unit, configured to obtain the target drawing attributes of the entity according to the rendering configuration information of the resource file;

[0014] A drawing unit, configured to draw corresponding picture entities and text entities in a rendering canvas according to the resource file and the target drawing attributes;

[0015] A synthesis unit for synthesizing a target graphic and text material based on the picture entity and the text entity.

[0016] The device further includes a compilation unit for:

[0017] Compiling the resource file into a target bytecode format;

[0018] The obtaining unit is specifically used for:

[0019] In the target bytecode running environment, obtaining the target drawing attributes of the entity according to the rendering configuration information of the resource file;

[0020] The drawing unit is specifically used for:

[0021] Drawing the corresponding picture entity and text entity in the rendering canvas according to the resource file in the target bytecode format and the target drawing attributes.

[0022] Optionally, the creating unit is specifically used for:

[0023] In the initial code running environment, parsing the pre-configured template configuration information to obtain the first address information of the resource file, and downloading the resource file according to the first address information, where the resource file is in the initial code format;

[0024] Traversing the resource file to create the entity corresponding to the resource file.

[0025] Optionally, the device further includes a saving unit:

[0026] Saving the resource file to the virtual file system and generating the storage information of the resource file;

[0027] Generating the rendering configuration information of the resource file according to the storage information and the pre-configured rendering information, and storing the pre-configured template configuration information and the rendering configuration information to the virtual file system.

[0028] Optionally, the target drawing attributes at least include the position and size of the entity; the obtaining unit is specifically used for:

[0029] In the target bytecode running environment, obtaining the second address information of the resource file in the virtual file system;

[0030] According to the second address information, obtaining the corresponding rendering configuration information in the virtual file system, and obtaining the position and size of the entity according to the rendering configuration information.

[0031] Optionally, the device further includes a display unit for:

[0032] Save the target graphic material to the virtual file system and create a display link to display the target graphic material according to the display link.

[0033] Optionally, the storage information includes index information and length information of the resource file in the virtual file system.

[0034] Optionally, the device further includes a first calling unit for:

[0035] In the initial code running environment, call the initialization canvas function and bind the target graphics library interface, so that the rendering canvas calls the WebGL (Web Graphics Library) in the target bytecode running environment;

[0036] The drawing unit is specifically used for:

[0037] In the rendering canvas, draw the corresponding picture entity by calling WebGL.

[0038] Optionally, the device further includes a second calling unit for:

[0039] In the initial code running environment, call the rendering entry function to draw the corresponding picture entity and text entity in the target bytecode running environment based on the rendering entry function.

[0040] Optionally:

[0041] The client creates an entity corresponding to the resource file according to the pre-configured resource file;

[0042] The client obtains the target drawing attributes of the entity according to the rendering configuration information of the resource file in the target bytecode format;

[0043] The client draws the corresponding picture entity and text entity in the rendering canvas according to the target drawing attributes;

[0044] The client synthesizes the target graphic material based on the picture entity and the text entity.

[0045] An electronic device provided by an embodiment of the present application includes a processor and a memory. Among them, the memory stores a computer program. When the computer program is executed by the processor, the processor executes the steps of any of the above graphic material synthesis methods.

[0046] An embodiment of the present application provides a computer-readable storage medium, which includes a computer program. When the computer program runs on an electronic device, the computer program is used to make the electronic device execute the steps of any of the above graphic material synthesis methods.

[0047] An embodiment of the present application provides a computer program product, which includes a computer program stored in a computer-readable storage medium; when a processor of an electronic device reads the computer program from the computer-readable storage medium, the processor executes the computer program, causing the electronic device to execute the steps of any one of the above-mentioned graphic and text material synthesis methods.

[0048] The beneficial effects of the present application are as follows:

[0049] An embodiment of the present application provides a graphic and text material synthesis method, device, electronic device, and storage medium. Since the present application can pre-configure a resource file, when graphic and text material synthesis is required, an entity corresponding to the resource file can be directly created according to the pre-configured resource file, and then the target drawing attributes of the entity can be obtained according to the rendering configuration information of the resource file. Finally, according to the resource file and the target drawing attributes, corresponding picture entities and text entities are drawn in the rendering canvas, and the target graphic and text material is automatically synthesized based on the picture entities and text entities. By synthesizing graphic and text materials in the above manner, picture entities and text entities are drawn based on the pre-configured resource file and automatically synthesized, without manual adjustment, effectively improving the material synthesis efficiency.

[0050] Other features and advantages of the present application will be described in the subsequent specification, and part of them will become obvious from the specification or be understood by implementing the present application. The objectives and other advantages of the present application can be achieved and obtained through the structures specifically pointed out in the written specification, claims, and drawings. BRIEF DESCRIPTION OF THE DRAWINGS

[0051] The drawings described herein are used to provide a further understanding of the present application and form a part of the present application. The schematic embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation to the present application. In the drawings:

[0052] Figure 1 is an optional schematic diagram of an application scenario in an embodiment of the present application;

[0053] Figure 2 is an implementation flowchart of a graphic and text material synthesis method provided by an embodiment of the present application;

[0054] Figure 3 is a schematic diagram of a target graphic and text material in an embodiment of the present application;

[0055] Figure 4 is an implementation flowchart of another graphic and text material synthesis method in an embodiment of the present application;

[0056] Figure 5Schematic diagram of the compilation process of a target bytecode in an embodiment of the present application;

[0057] Figure 6 Schematic diagram of the read / write process of a picture resource file in an embodiment of the present application;

[0058] Figure 7 Schematic diagram of the version relationship between graphic libraries in an embodiment of the present application;

[0059] Figure 8 Schematic diagram of the structure of a composite rendering engine in an embodiment of the present application;

[0060] Figure 9 Schematic diagram of the specific process of a method for synthesizing graphic and text materials in an embodiment of the present application;

[0061] Figure 10 Schematic diagram of the relationship between code and platform in an embodiment of the present application;

[0062] Figure 11 Schematic diagram of another target graphic and text material in an embodiment of the present application;

[0063] Figure 12 Schematic diagram of a background image in an embodiment of the present application;

[0064] Figure 13 Schematic diagram of the structure of a device for synthesizing graphic and text materials in an embodiment of the present application;

[0065] Figure 14 Schematic diagram of the hardware composition structure of an electronic device applying an embodiment of the present application;

[0066] Figure 15 Schematic diagram of the hardware composition structure of another electronic device applying an embodiment of the present application. Detailed implementation manners

[0067] To make the objectives, technical solutions, and advantages of the embodiments of the present application clearer, the technical solutions of the present application will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present application. Apparently, the described embodiments are some, rather than all, of the embodiments of the technical solutions of the present application. All other embodiments obtained by those of ordinary skill in the art based on the embodiments recorded in this application document without creative efforts shall fall within the scope of protection of the technical solutions of the present application.

[0068] Some concepts involved in the embodiments of the present application are introduced below.

[0069] The World Wide Web (Web), also known as the World Wide Web, is a global, dynamic, interactive, cross-platform distributed graphical information system based on hypertext and the HyperText Transfer Protocol (HTTP). It is a network service built on the Internet, providing a graphical and easy-to-access intuitive interface for browsers to search and view information on the network, and can provide the feature of integrating graphical, audio, and video information. Among them, the access to the website is achieved through the browser.

[0070] Browser: An application program used to retrieve, display, and transfer Web information resources, which are marked by uniform resource identifiers. It can be a web page, a picture, a video, or any content presented on the Web. Users can browse related information through hyperlinks with the help of the browser.

[0071] Open Graphics Library (OpenGL): A cross-language and cross-platform application programming interface for rendering 2D and 3D vector graphics. This interface consists of nearly 350 different function calls for drawing from simple graphic bits to complex 3D scenes. OpenGL is commonly used in CAD, virtual reality, scientific visualization programs, and video game development.

[0072] Web Graphics Library (WebGL): A 3D drawing protocol that allows the combination of JavaScript and OpenGL ES 2.0. By adding a JavaScript binding to OpenGL ES 2.0, WebGL can provide hardware 3D accelerated rendering for the HTML5 Canvas. In this way, web developers can use the system graphics card to more smoothly display 3D scenes and models in the browser, and can also create complex navigation and data visualization. The WebGL technology standard eliminates the trouble of developing dedicated web page rendering plugins. Without the support of any browser plugins, it uses the underlying graphics hardware acceleration function for graphics rendering, which is achieved through a unified, standard, and cross-platform OpenGL interface.

[0073] JavaScript (JS): It is a lightweight, interpreted or just-in-time compiled programming language with function priority. JavaScript is a high-level scripting language belonging to the web and has been widely used in web application development. It is often used to add various dynamic functions to web pages to provide users with a smoother and more beautiful browsing experience. The initial code format in the embodiments of this application may refer to JavaScript, and the initial code running environment is the JS running environment.

[0074] WebAssembly: Or wasm, it is a low-level, portable bytecode format for client-side scripts within browsers. It is a new type of code running in modern web browsers and provides new performance features and effects, which is effective for browser downloads and loads. The target bytecode format in the embodiments of this application may refer to WebAssembly, and the target bytecode running environment is the wasm running environment.

[0075] Shader: Applied in the field of computer graphics, it refers to a set of instructions used by computer graphics resources when performing rendering tasks, and is used to calculate the color or shading of an image.

[0076] Rendering configuration information: When rendering, the drawing attributes of an entity are automatically adjusted according to the rendering configuration information, which can include information such as pictures, fonts, text, and sizes.

[0077] Target drawing attributes: Used to draw an entity according to the target drawing attributes, where the target drawing attributes can include attributes such as the position, size, width, height, and shadow of the entity.

[0078] Compilation: The process of using a compiler to generate a target program from a source program written in a source language, or the action of using a compiler to generate a target program. The working process of a compiler translating a source program into a target program is divided into five stages: lexical analysis; syntax analysis; semantic checking and intermediate application development; code optimization; target application development. Mainly lexical analysis and syntax analysis are carried out, also known as source program analysis. If a syntax error is found during the analysis process, a prompt message is given.

[0079] The design concept of the embodiments of this application is briefly introduced below:

[0080] With the development of intelligent terminals, audio and video technologies, etc., objects can browse, produce, and share multimedia resources such as pictures and videos through intelligent terminals. During the production process, more and more objects enrich the content of pictures or videos by synthesizing graphic and text materials.

[0081] In related technologies, there are mainly the following two ways to synthesize graphic and text materials:

[0082] Method 1: The object selects appropriate materials from the decorative materials and background materials provided by the editing software, then manually adjusts the position, size, etc. of the selected materials. Finally, a synthesized picture or video is obtained based on the materials selected by the object and the adjustment of the materials. However, when synthesizing graphic and text materials based on the above Method 1, usually in order to achieve better effects, the object needs to make multiple selections and adjustments, which takes a long time.

[0083] Method 2: Synthesize graphic and text materials through the system engine on the server. In order to simplify some repetitive work and improve the efficiency of generating a single template picture, the system engine for efficiently and high-quality completing picture synthesis mainly processes on the server, which wastes the computing performance of the server very much, is inefficient, and the server processes image synthesis very slowly. If the quantity is large, it needs to wait in line, with low efficiency.

[0084] Therefore, how to improve the efficiency of graphic and text material synthesis is an urgent problem to be solved at present.

[0085] In view of this, the embodiments of the present application provide a method, device, electronic device and storage medium for synthesizing graphic and text materials. Since the present application creates an entity corresponding to the resource file according to the pre-configured resource file, then obtains the target drawing attributes of the entity according to the rendering configuration information of the resource file, and finally draws the corresponding picture entity and text entity in the rendering canvas based on the resource file and the target drawing attributes, and automatically synthesizes the target graphic and text materials based on the picture entity and the text entity. Based on the above method for synthesizing graphic and text materials, draw the picture entity and the text entity based on the pre-configured resource file and synthesize automatically, without manual adjustment, effectively improving the efficiency of material synthesis.

[0086] The following describes the preferred embodiments of the present application with reference to the accompanying drawings of the specification. It should be understood that the preferred embodiments described herein are only used to illustrate and explain the present application, and are not used to limit the present application. And without conflict, the embodiments in the present application and the features in the embodiments can be combined with each other.

[0087] As Figure 1 shown, it is a schematic diagram of the application scenario of the embodiments of the present application. The application scenario diagram includes two terminal devices 110 and a server 120.

[0088] In the embodiments of the present application, the terminal device 110 includes, but is not limited to, devices such as mobile phones, tablet computers, laptop computers, desktop computers, e-book readers, intelligent voice interaction devices, intelligent household appliances, vehicle-mounted terminals, etc.; a client related to graphic and text material synthesis can be installed on the terminal device, and the client can be software (such as a browser, image editing software, etc.), a web page, a small program, etc. The server 120 is a background server corresponding to the software, web page, small program, etc., or a server dedicated to graphic and text material synthesis, and the present application does not make specific limitations. The server 120 can be an independent physical server, a server cluster or a distributed system composed of multiple physical servers, or a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, Content Delivery Network (CDN), and big data and artificial intelligence platforms.

[0089] It should be noted that the graphic and text material synthesis method in the embodiments of the present application can be executed by an electronic device, and the electronic device can be the server 120 or the terminal device 110, that is, the method can be executed independently by the server 120 or the terminal device 110, or jointly executed by the server 120 and the terminal device 110. For example, when the server 120 and the terminal device 110 execute jointly, the server 120 sends a pre-configured resource file to the terminal device 110, and the terminal device 110 creates an entity corresponding to the resource file according to the pre-configured resource file, obtains the target drawing attributes of the entity according to the rendering configuration information of the resource file, and finally, according to the resource file and the target drawing attributes, draws corresponding picture entities and text entities in the rendering canvas, and synthesizes the target graphic and text material based on the picture entities and text entities.

[0090] In an alternative embodiment, the terminal device 110 and the server 120 can communicate through a communication network.

[0091] In an alternative embodiment, the communication network is a wired network or a wireless network.

[0092] It should be noted that Figure 1 The above is only an example, and actually the number of terminal devices and servers is not limited, and no specific limitation is made in the embodiments of the present application.

[0093] In the embodiments of the present application, when the number of servers is multiple, the multiple servers can form a blockchain, and the servers are nodes on the blockchain; for example, the graphic and text material synthesis method disclosed in the embodiments of the present application, and the resource files involved therein can be stored on the blockchain.

[0094] In addition, the embodiments of the present application can be applied to various scenarios, including not only the scenario of graphic and text material synthesis, but also including but not limited to scenarios such as cloud technology, artificial intelligence, intelligent transportation, and assisted driving. For example, when the embodiments of the present application are applied to the assisted driving scenario, map drawing can be performed based on the graphic and text material synthesis method in the present application.

[0095] Next, in combination with the above-described application scenarios, the graphic and text material synthesis method provided by the exemplary embodiments of the present application will be described with reference to the accompanying drawings. It should be noted that the above application scenarios are only shown for the convenience of understanding the spirit and principle of the present application, and the embodiments of the present application are not limited in this regard.

[0096] Refer to Figure 2 As shown, it is a flowchart of the implementation of a graphic and text material synthesis method provided by an embodiment of the present application. Taking the execution entity as the client as an example, the specific implementation process of this method includes the following steps S21 - S24:

[0097] S21: The client creates an entity corresponding to the resource file according to the pre-configured resource file;

[0098] Among them, the resource file includes the decoration resource file and the picture resource file to be synthesized. The decoration resource file includes decoration materials, which can be divided into image decoration materials and text decoration materials, and the picture resource file includes basic materials. A resource file can include multiple decoration resource files and picture resource files, then entities corresponding to each decoration resource file and each picture resource file included in the resource file are created respectively; it can also be that a resource file includes one decoration resource file or one picture resource file, then only an entity corresponding to one resource file needs to be created. The resource file can be pre-configured and stored in the server, and is sent to the client when an object (hereinafter referred to as the object) using the client for graphic and text material synthesis performs graphic and text material synthesis, or the object selects from the pre-configured resource files according to the requirements, and then sends the resource file selected by the object to the client, or the pictures or texts input by the object are used to generate a resource file for subsequent graphic and text material synthesis. The picture resource file can be pre-configured or generated according to the pictures or videos input by the object.

[0099] As Figure 3 shown, it is a schematic diagram of a target graphic and text material in an embodiment of the present application. Among them, the base map (i.e., the basic material) contains an image of a boy, the base map is saved in resource file 1, the image decoration material 1, and the text decoration materials 2 and 3 are saved in resource file 2. Object 1 inputs the base map and the selected template configuration information, the client generates resource file 1, and matches resource file 2 according to resource file 1 for graphic and text material synthesis. Adding decoration materials to the basic material can effectively enrich the content of the picture.

[0100] In addition, in this application, not only can pictures and decorative materials be synthesized, but also the videos uploaded by the user can be intelligently matched to generate a synchronized live version of the course video with explanatory text. Specifically, taking the Chinese course video input by the user 2 as an example, the client performs speech recognition on the Chinese course video, obtains the text contained in the Chinese course video, and generates a resource file 5 that includes the Chinese course video and the corresponding text. According to the resource file 5, a resource file 6 containing decorative resource files is matched. Based on the image and text decorative materials contained in the resource file 6, a synchronized live version of the course video with explanatory text for the Chinese course video is generated. By synthesizing the graphic and text materials of the video in the above manner, drawing the picture entities and text entities based on the pre-configured resource files and automatically synthesizing them, manual adjustment is not required, which effectively improves the efficiency of material synthesis, increases the visibility of the course video, and effectively enriches the content of the course video.

[0101] S22: The client obtains the target drawing attributes of the entity according to the rendering configuration information of the resource file;

[0102] Specifically, before drawing the picture entity, it is necessary to determine the target drawing attributes of the entity. The target drawing attributes at least include attributes such as width, height, size, shadow, and position. The rendering configuration information of the resource file can include information such as pictures, fonts, text, and size. According to the rendering configuration information of the resource file, the drawing attributes of the entity are adjusted to obtain the target drawing attributes of the entity. Among them, the rendering configuration information can be pre-stored in the resource file, each resource file contains the corresponding rendering configuration information, or it can be generated according to the form configured by the background administrator, or it can be input by the user, and no specific limitation is made here.

[0103] S23: The client draws the corresponding picture entity and text entity in the rendering canvas according to the resource file and the target drawing attributes;

[0104] Specifically, the client traverses the created entities and draws the text entities of the picture entity according to the resource file and the target drawing attributes. Among them, the picture entity can be drawn through OpenGL, and the text entity can be drawn through Skia (a 2D vector graphics processing library).

[0105] S24: The client synthesizes the target graphic and text materials based on the picture entity and the text entity.

[0106] In the embodiments of the present application, by creating an entity corresponding to the resource file according to the pre-configured resource file, then obtaining the target drawing attributes of the entity according to the rendering configuration information of the resource file, and finally drawing the corresponding picture entity and text entity in the rendering canvas according to the resource file and the target drawing attributes, and automatically synthesizing the target graphic and text material based on the picture entity and the text entity. By synthesizing the graphic and text material in the above manner, drawing the picture entity and the text entity based on the pre-configured resource file and automatically synthesizing them, without manual adjustment, effectively improving the efficiency of material synthesis.

[0107] In an alternative embodiment, after step S21, it further includes compiling the resource file into a target bytecode format. Then steps S21 - S24 can be implemented as follows: Refer to Figure 4 , which is the implementation flowchart of another graphic and text material synthesis method in the embodiments of the present application, including the following steps:

[0108] S41: Create an entity corresponding to the resource file according to the pre-configured resource file, and compile the resource file into a target bytecode format;

[0109] S42: In the target bytecode running environment, obtain the target drawing attributes of the entity according to the rendering configuration information of the resource file;

[0110] S43: Draw the corresponding picture entity and text entity in the rendering canvas according to the resource file in the target bytecode format and the target drawing attributes;

[0111] S44: Synthesize the target graphic and text material based on the picture entity and the text entity.

[0112] Among them, the target bytecode format can be WebAssembly (wasm), then the target bytecode running environment is wasm runtime. After compiling the resource file into the target bytecode format, a special bytecode between high-level language and machine code will be generated. This bytecode has no direct association with the platform and can run on different platforms. There is a set of code and logic for both the front-end and the back-end. After the back-end is modified and compiled into wasm, the front-end can use it directly. There is no front-end and back-end request latency, and the computing resources of the browser, i.e., the client, are used. Both the front-end and the back-end run on the client, thus realizing the computing resources on the client side, reducing the server cost, and improving the high availability of the service. And due to the characteristics of WebAssembly, the volume of the packaged wasm code is small, and the OpenGL specification used by the back-end supports good Shader coloring effects.

[0113] In an alternative embodiment, the execution subject of steps S41 - S44 is the client, including the following steps:

[0114] The client creates an entity corresponding to the resource file according to the pre-configured resource file;

[0115] The client obtains the target drawing attributes of the entity according to the rendering configuration information of the resource file in the target bytecode format;

[0116] The client draws the corresponding picture entity and text entity in the rendering canvas according to the target drawing attributes;

[0117] The client synthesizes the target graphic and text material based on the picture entity and the text entity.

[0118] In an alternative embodiment, step S21 may be implemented as:

[0119] First, in the initial code running environment, parse the pre-configured template configuration information to obtain the first address information of the resource file, and download the resource file according to the first address information. The resource file is in the initial code format; then, traverse the resource file to create an entity corresponding to the resource file.

[0120] Among them, the template configuration information is downloaded from the configuration items of the system and will be stored in the server after configuration. When using the template configuration information, all the stored template configuration information can be sent to the client, or the configuration information of the selected template of the object can be sent to the client. Since the template configuration information is generally a C / C++ file, it is necessary to parse the template configuration information. The initial code running environment refers to the Javascript running environment (i.e., js runtime), and the initial code format refers to C / C++ files, js files, etc. Javascript is responsible for pulling the template configuration information, downloading the resource file according to the file address provided by the template configuration information (i.e., the first detailed information), and writing it to the virtual file system. Among them, the virtual file system supports the initial code running environment and the target bytecode running environment.

[0121] Refer to Figure 5 , which is a schematic diagram of the compilation process of a target bytecode in an embodiment of the present application. After the resource file is compiled into wasm and js auxiliary files through the Emscripten toolchain, it can be executed in different wasm runtimes. Emscripten is a toolchain that compiles C / C++ files into asm.js and WebAssembly bytecodes through LLVM, enabling C / C++ files to run at nearly the fastest speed in web pages without any plugins. Since a computer can only recognize and execute machine code, it is also necessary to compile the wasm and js auxiliary files into machine code through compilers such as v8 wasm engine and wasmer before being recognized and executed by the computer.

[0122] In an alternative embodiment, after step S41 and before step S42, the following steps 1-2 may also be executed:

[0123] Step 1: Save the resource file to the virtual file system and generate storage information of the resource file;

[0124] Step 2: Generate rendering configuration information of the resource file according to the storage information and pre-configured rendering information, and store the pre-configured template configuration information and rendering configuration information in the virtual file system.

[0125] Specifically, saving the resource file in the virtual file system can obtain the written length and the index of the file in memory. For example, when saving resource file 3 to the virtual file system, the obtained written length is 256 characters and the index is 1.32.47. Fill the path of the resource file in the virtual file system into the configuration, and combine the content filled in the form (i.e., rendering information) to generate rendering configuration information, where the form refers to the background configuration form filled in by the administrator (editor) object and is used to generate rendering configuration information.

[0126] In an alternative embodiment, the storage information includes index information and length information of the resource file in the virtual file system.

[0127] For example, after saving resource file 4 to the virtual file system, the obtained index information of resource file 4 is 13.34.251 and the length information is 128 characters. The resource file can be read in the virtual file system according to the index information of the resource file, improving the reading efficiency.

[0128] Refer to Figure 6 , which is a schematic diagram of the reading and writing process of a picture resource file in an embodiment of the present application. Taking the reading and writing of picture 1 as an example, the reading process is as follows:

[0129] (1) fs.read(“1.png”), call the file to read picture 1 in the C / C++ function;

[0130] (2) Emscripten proxy to the virtual file system.

[0131] Among them, the role of Emscripten proxy to the virtual file system is to obtain the file content, that is, to obtain the content of picture 1. The file content can be read in the virtual file system through the associated index.

[0132] The writing process is as follows:

[0133] (1) fetch(“1.png”).then(() => { / *to array buffer and createdataview* / }), download picture 1 and create Dataview;

[0134] (2) Module.fa.writeFile(“ / 1.png”, Dataview), writing Picture 1 to the memory of the virtual file system through the fs module of Emscripten;

[0135] (3) After writing, the length of the written Picture 1 and its index in the memory can be obtained.

[0136] In an alternative embodiment, the target drawing attributes at least include the position and size of the entity; step S42 can be implemented as:

[0137] In the target bytecode running environment, obtain the second address information of the resource file in the virtual file system; according to the second address information, obtain the corresponding rendering configuration information in the virtual file system, and obtain the position and size of the entity according to the rendering configuration information.

[0138] Among them, the second address information of the resource file in the virtual file system can be the storage path of the resource file or the index of the resource file in the virtual file system. Read the corresponding resource file in the virtual file system according to the second address information, obtain the corresponding rendering configuration information, adjust the drawing attributes of the entity according to the rendering configuration information, and obtain the target drawing attributes of the entity, that is, the position and size of the entity.

[0139] In an alternative embodiment, after step S24, the following steps can also be executed:

[0140] Save the target graphic and text material to the virtual file system and create a display link to display the target graphic and text material according to the display link.

[0141] Specifically, after synthesizing the target graphic and text material, save the target graphic and text material to the memory of the virtual file system, read the target picture (target graphic and text material) in the memory in the initial code running environment (js runtime), and create a display link for displaying the target picture. Among them, the display link can be a blob link. In computer vision, a blob refers to a connected region in an image. Blob analysis is to perform connected component extraction and labeling on the binary image after foreground / background separation. Each labeled blob represents a foreground target, and then some related features of the blob can be calculated. Through blob extraction, information about the relevant region can be obtained.

[0142] In an alternative embodiment, before step S43, the following steps can also be executed:

[0143] In the initial code running environment, call the initialization canvas function and bind the target graphics library interface, so that the rendering canvas calls the WebGL (Web Graphics Library) in the target bytecode running environment.

[0144] Step S44 can be implemented as follows:

[0145] In the rendering canvas, draw the corresponding picture entities by calling WebGL.

[0146] Specifically, WebAssembly (Wasm) provides a function InitCanvas (initialization canvas function) for JavaScript (js) to call, which is responsible for binding the canvas WebGL context, enabling the rendering canvas to use WebGL technology and put in the content. Using WebGL can render graphics on the browser without downloading any plugins.

[0147] In an alternative implementation, before step S43, the following steps can also be executed:

[0148] In the initial code running environment, call the rendering entry function, so as to draw the corresponding picture entities and text entities in the target bytecode running environment based on the rendering entry function.

[0149] Specifically, WebAssembly provides a rendering entry function (Render) for the js environment (initial code running environment) to call, and is responsible for reading the rendering configuration information written by js. Js calls the Render of WebAssembly through the ccall module of Emscripten, and draws the corresponding picture entities and text entities in the WebAssembly running environment based on Render.

[0150] In the embodiments of the present application, using the WebAssembly method, the processing ends are on the same side, improving compatibility and performance. The rendered composite materials are diversified, supporting 100% of the material formats based on the browser rendering mode. Using the computing resources of the client instead of the server reduces the service cost and improves the high availability of the service. Based on the WebAssembly packaging, the volume of the engine source code is small and the performance is improved.

[0151] Refer to Figure 7, which is a schematic diagram of the version relationship between the graphics libraries in the embodiments of the present application. OpenGL is a software interface for rendering 2D and 3D vector graphics hardware by calling functions, supporting graphics drawing on different platforms. OpenGL ES is a subset of OpenGL and is a graphics development standard for embedded systems. WebGL is a technology used to draw and render complex 3D graphics on web pages and allows users to interact with them. As the performance of personal computers and browsers becomes stronger, it is possible to create more and more exquisite and complex 3D graphics on the web. Traditionally, to display 3D graphics, developers need to use C or C++ languages, supplemented by specialized computer graphics libraries such as OpenGL or Direct3D, to develop an independent application. Now, with WebGL, only by adding some additional 3D graphics code to the familiar HTML and JS can 3D graphics be displayed on the web page, and WebGL is embedded in the browser, and it can be directly used without installing plugins and libraries. OpenGL ES is a special version developed by OpenGL to meet the needs of embedded devices and is a subset of it; while WebGL combines JavaScript and OpenGL ES 2.0 for web page rendering effects and is obtained by adding a JavaScript binding to OpenGL ES 2.0. First, run the JavaScript program and call the relevant methods of webgl, then the vertex shader and fragment shader will be pointed to and drawn in the color buffer. At this time, the drawing area is cleared. Finally, the content of the color buffer will be automatically displayed on the canvas of the browser. The OpenGL specification used by the backend supports good Shader coloring effects, diverse drawing fusion materials, supports 100% of the material formats based on the browser rendering mode, and the synthesized target graphic and text materials have good effects.

[0152] See Figure 8 , which is a schematic diagram of the structure of a composite drawing engine in the embodiments of the present application, used for graphic and text material synthesis, where the composite drawing engine can run on the browser of the client. First, enter the rendering entry and download the template configuration information, where the template configuration information is downloaded from the template configuration center, and the downloaded template configuration information can be selected by the object or recommended by the composite drawing engine to the object; then, parse the template configuration information, pull the resource files, traverse the resource files and create the corresponding entities; finally, enter the drawing process, adjust the drawing attributes of the entities according to the rendering configuration information, and draw the entities after the adjustment. The drawn entities include picture materials, copywriting, fonts, etc., and the drawn entities can be synthesized to obtain the target graphic and text materials.

[0153] See Figure 9, which is a specific process schematic diagram of a graphic and text material synthesis method in an embodiment of the present application. It is divided into the following two parts according to different operating environments:

[0154] js runtime (initial code operating environment):

[0155] (1) Download the template configuration information and parse the template configuration information, and download the resource files according to the resource file addresses provided by the template configuration information;

[0156] (2) Then write the resource files into the memory of the virtual file system through the fs module of Emscripten, generate rendering configuration information according to the paths of the resource files in the virtual file system and the rendering information filled in by the administrator, and write the generated rendering configuration information and template configuration information into the memory;

[0157] (3) Call the wasm function "InitCanvas" through ccall to bind the canvas wengl context;

[0158] (4) Call the wasm rendering entry function "Render" through ccall;

[0159] (5) After synthesizing the image, read the image in the memory and create a blob link for display.

[0160] wasm runtime (target bytecode operating environment):

[0161] (1) Initialize the rendering canvas (InitCanvas);

[0162] (2) Create content header information (EMSCRIPTEN_WEBGL_CONTEXT_HANDLE);

[0163] (3) Rendering entry function "Render";

[0164] (4) Read the rendering configuration information and template configuration information;

[0165] (5) Proxy to the virtual file system;

[0166] (6) Traverse the material entities, and draw the image entities with OpenGL and the text entities with Skia;

[0167] (7) Synthesize the image and write it into the content.

[0168] Refer to Figure 10, which is a schematic diagram of the relationship between code and platform in the embodiments of the present application. After compiling the source code into WASM through the method in the present application, a special bytecode between high-level language and machine code will be generated. This bytecode has no direct association with the platform and can run on different platforms. For example, it can run on Figure 10 X64, X86, and ARM in

[0169] In the embodiments of the present application, based on WebAssembly packaging, the engine source code has a small volume and improved performance. There is a set of code and logic for both the front-end and the back-end. After the back-end is modified and compiled into wasm, the front-end can use it directly. There is no time-consuming for front-end and back-end requests, and the computing resources of the browser, i.e., the client, are used, reducing the server cost. Due to the characteristics of WebAssembly, the volume of the packaged wasm code is small. The OpenGL specification used by the back-end supports good Shader effects.

[0170] Refer to Figure 11 , which is another schematic diagram of the target graphic and text material in the embodiments of the present application. The method for synthesizing the graphic and text material in the present application will be introduced below in combination with Figure 11 First, the object Xiaohua inputs a background image as shown in Figure 12 . The synthesis drawing engine first generates resource file 4 according to the input background image and rendering information, downloads the template configuration information from the template configuration center, and downloads resource file 5 according to the template configuration information. Resource file 5 contains text decoration material 1 and text decoration material 2. Then, create picture entity 1, text entity 1, and text entity 2, and adjust the drawing attributes of picture entity 1, text entity 1, and text entity 2 respectively according to the rendering configuration information of the resource file. After the adjustment is completed, draw the entities in the rendering canvas according to the obtained target drawing attributes, and synthesize the drawn entities to obtain the target graphic and text material as shown in Figure 11 .

[0171] In the embodiments of the present application, through WebAssembly, preset pictures and copywriting configurations can be quickly used to generate pictures, or videos and explanatory copywriting can be uploaded, and a synchronized live version of the course video with explanatory copywriting can be intelligently matched and generated. Using WebAssembly to implement both the front-end and the back-end on the Web can greatly improve the synthesis speed. The final synthesized material has high compatibility when synthesized using a single terminal, and the synthesis error rate is extremely low. Using the WebAssembly method, the processing end is on the same side, improving compatibility and performance. The drawn fusion materials are diverse, supporting 100% of the material formats based on the browser rendering mode. Using the computing resources of the client instead of the server reduces the service cost and improves the high availability of the service. Based on WebAssembly packaging, the engine source code has a small volume and improved performance.

[0172] In addition, in the embodiments of the present application, by creating an entity corresponding to the resource file according to the pre-configured resource file, then obtaining the target drawing attributes of the entity according to the rendering configuration information of the resource file, and finally drawing the corresponding picture entity and text entity in the rendering canvas according to the resource file and the target drawing attributes, and automatically synthesizing the target graphic and text material based on the picture entity and the text entity. By synthesizing the graphic and text material in the above manner, drawing the picture entity and the text entity based on the pre-configured resource file and automatically synthesizing it, without manual adjustment, effectively improving the efficiency of material synthesis.

[0173] Based on the same inventive concept, the embodiments of the present application also provide a graphic and text material synthesis device. As Figure 13 shown, it is a schematic structural diagram of the graphic and text material synthesis device 1300, which may include:

[0174] A creation unit 1301, configured to create an entity corresponding to the resource file according to the pre-configured resource file, where the resource file includes a decoration resource file and a picture resource file to be synthesized;

[0175] An acquisition unit 1302, configured to obtain the target drawing attributes of the entity according to the rendering configuration information of the resource file;

[0176] A drawing unit 1303, configured to draw the corresponding picture entity and text entity in the rendering canvas according to the resource file and the target drawing attributes;

[0177] A synthesis unit 1304, configured to synthesize the target graphic and text material based on the picture entity and the text entity.

[0178] Optionally, the graphic and text material synthesis device further includes a compilation unit 1305, configured to:

[0179] Compile the resource file into a target bytecode format;

[0180] The acquisition unit 1302 is specifically configured to:

[0181] In the target bytecode running environment, obtain the target drawing attributes of the entity according to the rendering configuration information of the resource file;

[0182] The drawing unit 1303 is specifically configured to:

[0183] Draw the corresponding picture entity and text entity in the rendering canvas according to the resource file in the target bytecode format and the target drawing attributes.

[0184] Optionally, the creation unit 1301 is specifically configured to:

[0185] In the initial code running environment, parse the pre-configured template configuration information to obtain the first address information of the resource file, and download the resource file according to the first address information. The resource file is in the initial code format;

[0186] Traverse the resource file and create an entity corresponding to the resource file.

[0187] Optionally, the device further includes a saving unit 1306:

[0188] Save the resource file to the virtual file system and generate storage information of the resource file;

[0189] Generate rendering configuration information of the resource file according to the storage information and the pre-configured rendering information, and store the pre-configured template configuration information and the rendering configuration information in the virtual file system.

[0190] Optionally, the target drawing attributes at least include the position and size of the entity; the obtaining unit 1302 is specifically configured to:

[0191] In the target bytecode running environment, obtain the second address information of the resource file in the virtual file system;

[0192] According to the second address information, obtain the corresponding rendering configuration information in the virtual file system, and obtain the position and size of the entity according to the rendering configuration information.

[0193] Optionally, the device further includes a display unit 1307, configured to:

[0194] Save the target graphic material to the virtual file system and create a display link to display the target graphic material according to the display link.

[0195] Optionally, the storage information includes index information and length information of the resource file in the virtual file system.

[0196] Optionally, the device further includes a first calling unit 1308, configured to:

[0197] In the initial code running environment, call the initialization canvas function and bind the target graphics library interface, so that the rendering canvas calls the WebGL of the network graphics library in the target bytecode running environment;

[0198] The drawing unit is specifically configured to:

[0199] In the rendering canvas, draw the corresponding picture entity by calling WebGL.

[0200] Optionally, the device further includes a second calling unit 1309, configured to:

[0201] Call the rendering entry function in the initial code running environment to draw the corresponding picture entities and text entities in the target bytecode running environment based on the rendering entry function.

[0202] Optionally:

[0203] The client creates entities corresponding to the resource file according to the pre-configured resource file;

[0204] The client obtains the target drawing attributes of the entity according to the rendering configuration information of the resource file in the target bytecode format;

[0205] The client draws the corresponding picture entities and text entities in the rendering canvas according to the target drawing attributes;

[0206] The client synthesizes the target graphic and text material based on the picture entities and text entities.

[0207] In the embodiments of the present application, by creating entities corresponding to the resource file according to the pre-configured resource file, then obtaining the target drawing attributes of the entity according to the rendering configuration information of the resource file, and finally drawing the corresponding picture entities and text entities in the rendering canvas according to the resource file and the target drawing attributes, and automatically synthesizing the target graphic and text material based on the picture entities and text entities. By synthesizing the graphic and text material in the above manner, drawing the picture entities and text entities based on the pre-configured resource file and automatically synthesizing them can be achieved without manual adjustment, effectively improving the efficiency of material synthesis.

[0208] For the convenience of description, the above parts are divided into each module (or unit) according to functions and described separately. Of course, when implementing the present application, the functions of each module (or unit) can be implemented in the same or multiple software or hardware.

[0209] Those skilled in the art of the technical field to which the present application belongs can understand that various aspects of the present application can be implemented as a system, a method or a program product. Therefore, various aspects of the present application can be specifically implemented in the following forms, that is: a complete hardware implementation manner, a complete software implementation manner (including firmware, microcode, etc.), or an implementation manner combining hardware and software aspects, which can be collectively referred to as "circuit", "module" or "system" here.

[0210] Based on the same inventive concept as the above method embodiment, an electronic device is also provided in the embodiments of the present application. In one embodiment, the electronic device can be a server, such as Figure 1 the server 120 shown. In this embodiment, the structure of the electronic device can be as Figure 14 shown, including a memory 1401, a communication module 1403, and one or more processors 1402.

[0211] A memory 1401 for storing computer programs executed by a processor 1402. The memory 1401 mainly includes a program storage area and a data storage area. Among them, the program storage area can store an operating system, programs required for running the instant messaging function, etc.; the data storage area can store various instant messaging information and operation instruction sets, etc.

[0212] The memory 1401 can be a volatile memory, such as a random-access memory (RAM); the memory 1401 can also be a non-volatile memory, such as a read-only memory, a flash memory, a hard disk drive (HDD) or a solid-state drive (SSD); or the memory 1401 is any other medium that can be used to carry or store a desired computer program in the form of instructions or data structures and can be accessed by a computer, but is not limited thereto. The memory 1401 can be a combination of the above memories.

[0213] The processor 1402 can include one or more central processing units (CPUs) or be a digital processing unit, etc. The processor 1402 is used to implement the above-mentioned graphic and text material synthesis method when calling the computer program stored in the memory 1401.

[0214] A communication module 1403 is used to communicate with terminal devices and other servers.

[0215] In the embodiments of the present application, the specific connection medium between the above-mentioned memory 1401, communication module 1403 and processor 1402 is not limited. In the embodiments of the present application Figure 14 it is described that the memory 1401 and the processor 1402 are connected through a bus 1404. The bus 1404 is described in thick lines in Figure 14 The connection manners between other components are only for illustrative purposes and are not limited thereto. The bus 1404 can be divided into an address bus, a data bus, a control bus, etc. For the convenience of description, Figure 14 it is only described by a thick line in

[0216] The memory 1401 stores a computer storage medium, and the computer storage medium stores computer-executable instructions for implementing the graphic and text material synthesis method of the embodiments of the present application. The processor 1402 is used to execute the above-mentioned graphic and text material synthesis method, as Figure 2 shown.

[0217] In another embodiment, the electronic device can also be other electronic devices, such as Figure 1 the terminal device 110 shown. In this embodiment, the structure of the electronic device can be as Figure 15 shown, including components such as a communication component 1510, a memory 1520, a display unit 1530, a camera 1540, a sensor 1550, an audio circuit 1560, a Bluetooth module 1570, a processor 1580, etc.

[0218] The communication component 1510 is used to communicate with the server. In some embodiments, it may include a Wireless Fidelity (WiFi) module. The WiFi module belongs to short-range wireless transmission technology, and the electronic device can help users send and receive information through the WiFi module.

[0219] The memory 1520 can be used to store software programs and data. The processor 1580 executes various functions and data processing of the terminal device 110 by running the software programs or data stored in the memory 1520. The memory 1520 can include high-speed random access memory, and can also include non-volatile memory, such as at least one magnetic disk storage device, a flash memory device, or other volatile solid-state storage devices. The memory 1520 stores an operating system that enables the terminal device 110 to run. In this application, the memory 1520 can store the operating system and various application programs, and can also store the computer program for executing the graphic and text material synthesis method of the embodiments of this application.

[0220] The display unit 1530 can also be used to display information input by the user or information provided to the user, as well as the graphical user interface (GUI) of various menus of the terminal device 110. Specifically, the display unit 1530 can include a display screen 1532 disposed on the front of the terminal device 110. Among them, the display screen 1532 can be configured in the form of a liquid crystal display, a light-emitting diode, etc. The display unit 1530 can be used to display the graphic and text material synthesis user interface in the embodiments of this application, etc.

[0221] The display unit 1530 can also be used to receive input digital or character information, and generate signal inputs related to the user settings and function control of the terminal device 110. Specifically, the display unit 1530 can include a touch screen 1531 disposed on the front of the terminal device 110, which can collect touch operations of the user on or near it, such as clicking buttons, dragging scroll boxes, etc.

[0222] Among them, the touch screen 1531 can cover the display screen 1532, or the touch screen 1531 and the display screen 1532 can be integrated to implement the input and output functions of the terminal device 110. After integration, it can be simply called a touch display screen. In this application, the display unit 1530 can display application programs and corresponding operation steps.

[0223] The camera 1540 can be used to capture static images. Users can post comments on the images captured by the camera 1540 through an application. The camera 1540 can be one or multiple. An object generates an optical image through a lens and projects it onto a photosensitive element. The photosensitive element can be a charge coupled device (CCD) or a complementary metal-oxide-semiconductor (CMOS) phototransistor. The photosensitive element converts the optical signal into an electrical signal, and then transmits the electrical signal to the processor 1580 to be converted into a digital image signal.

[0224] The terminal device may further include at least one sensor 1550, such as an acceleration sensor 1551, a distance sensor 1552, a fingerprint sensor 1553, and a temperature sensor 1554. The terminal device may also be configured with other sensors such as a gyroscope, a barometer, a hygrometer, a thermometer, an infrared sensor, a light sensor, and a motion sensor.

[0225] The audio circuit 1560, the speaker 1561, and the microphone 1562 can provide an audio interface between the user and the terminal device 110. The audio circuit 1560 can transmit the electrical signal converted from the received audio data to the speaker 1561, and the speaker 1561 converts it into a sound signal for output. The terminal device 110 may also be configured with a volume button for adjusting the volume of the sound signal. On the other hand, the microphone 1562 converts the collected sound signal into an electrical signal, which is received by the audio circuit 1560 and converted into audio data, and then the audio data is output to the communication component 1510 to be sent to, for example, another terminal device 110, or the audio data is output to the memory 1520 for further processing.

[0226] The Bluetooth module 1570 is used to interact information with other Bluetooth devices having a Bluetooth module through the Bluetooth protocol. For example, the terminal device can establish a Bluetooth connection with a wearable electronic device (such as a smart watch) that also has a Bluetooth module through the Bluetooth module 1570, so as to perform data interaction.

[0227] The processor 1580 is the control center of the terminal device, connecting various parts of the entire terminal using various interfaces and circuits. By running or executing software programs stored in the memory 1520 and invoking data stored in the memory 1520, it performs various functions of the terminal device and processes data. In some embodiments, the processor 1580 may include one or more processing units; the processor 1580 may also integrate an application processor and a baseband processor, where the application processor mainly processes the operating system, user interface, application programs, etc., and the baseband processor mainly processes wireless communication. It can be understood that the above baseband processor may not be integrated into the processor 1580. In this application, the processor 1580 can run the operating system, application programs, user interface display, and touch response, as well as the graphic and text material synthesis method of the embodiments of this application. Additionally, the processor 1580 is coupled to the display unit 1530.

[0228] In some possible implementation manners, each aspect of the graphic and text material synthesis method provided in this application can also be implemented in the form of a program product, which includes a computer program. When the program product runs on an electronic device, the computer program is used to cause the electronic device to execute the steps in the graphic and text material synthesis method according to various exemplary embodiments of this application described above in this specification. For example, the electronic device can execute steps such as Figure 2 or Figure 4 shown in.

[0229] The program product can adopt any combination of one or more readable media. The readable medium can be a readable signal medium or a readable storage medium. The readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples (non-exhaustive list) of the readable storage medium include: an electrical connection with one or more wires, a portable disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above.

[0230] The program product of the embodiments of this application can adopt a portable compact disk read-only memory (CD-ROM) and include a computer program, and can run on an electronic device. However, the program product of this application is not limited to this. In this document, the readable storage medium can be any tangible medium that contains or stores a program, and this program can be used by or in combination with a command execution system, apparatus, or device.

[0231] A readable signal medium can include a data signal propagated in a baseband or as part of a carrier wave, which carries a readable computer program. Such a propagated data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. The readable signal medium can also be any readable medium other than a readable storage medium, which can send, propagate, or transmit a program for use by or in conjunction with a command execution system, apparatus, or device.

[0232] The computer program contained on the readable medium can be transmitted using any appropriate medium, including but not limited to wireless, wired, optical fiber, RF, etc., or any suitable combination of the above.

[0233] The computer program for performing the operations of the present application can be written in any combination of one or more programming languages. The programming languages include object-oriented programming languages such as Java, C++, etc., and also include conventional procedural programming languages such as the "C" language or similar programming languages. The computer program can be executed entirely on the user's electronic device, partially on the user's device, executed as a stand-alone software package, partially on the user's electronic device and partially on a remote electronic device, or entirely on a remote electronic device or server. In the case of a remote electronic device, the remote electronic device can be connected to the user's electronic device through any type of network, including a local area network (LAN) or a wide area network (WAN), or can be connected to an external electronic device (e.g., by connecting through the Internet using an Internet service provider).

[0234] It should be noted that although several units or subunits of the apparatus are mentioned in the above detailed description, such a division is merely exemplary and not mandatory. In fact, according to the embodiments of the present application, the features and functions of two or more of the above-described units can be embodied in one unit. Conversely, the features and functions of one unit described above can be further divided and embodied by multiple units.

[0235] In addition, although the operations of the method of the present application are described in a specific order in the drawings, this does not require or imply that these operations must be performed in that specific order, or that all the operations shown must be performed to achieve the desired result. Additionally or alternatively, some steps can be omitted, multiple steps can be combined into one step for execution, and / or one step can be decomposed into multiple steps for execution.

[0236] Those skilled in the art should understand that the embodiments of the present application can be provided as a method, a system, or a computer program product. Therefore, the present application can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present application can take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) that contain computer-usable computer programs.

[0237] The present application is described with reference to the flowcharts and / or block diagrams of methods, apparatuses (systems), and computer program products according to the embodiments of the present application. It should be understood that each flow and / or block in the flowchart and / or block diagram, as well as the combination of flows and / or blocks in the flowchart and / or block diagram, can be realized by computer program instructions. These computer program instructions can be provided to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing devices to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing devices generate means for realizing the functions specified in Figure 1 one or more of the processes Figure 1 or blocks.

[0238] These computer program instructions can also be stored in a computer-readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer-readable memory generate a manufactured article including instruction means that realize the functions specified in Figure 1 one or more of the processes Figure 1 or blocks.

[0239] These computer program instructions can also be loaded onto a computer or other programmable data processing device, so that a series of operation steps are executed on the computer or other programmable device to generate a computer-implemented process, and thus the instructions executed on the computer or other programmable device provide steps for realizing the functions specified in Figure 1 one or more of the processes Figure 1 or blocks.

[0240] Although the preferred embodiments of the present application have been described, those skilled in the art can make additional changes and modifications to these embodiments once they learn the basic creative concepts. Therefore, the appended claims are intended to be construed as including the preferred embodiments and all changes and modifications falling within the scope of the present application.

[0241] Obviously, those skilled in the art can make various changes and modifications to this application without departing from the spirit and scope of this application. Thus, if these modifications and variations of this application fall within the scope of the claims of this application and their equivalent technologies, this application is also intended to include these modifications and variations.

Claims

1. A method for synthesizing graphic and text materials, characterized in that The method includes: In the initial code running environment, the client creates an entity corresponding to the resource file according to the pre-configured resource file, where the resource file includes a decoration resource file and a picture resource file to be synthesized; The client compiles the resource file from the initial code format to the target bytecode format through a preset toolchain; where the target bytecode is a special bytecode between the initial code and the machine code; In the target bytecode running environment, after generating the rendering configuration information according to the resource file and the rendering information pre-filled by the object, the client adjusts the drawing attributes of the entity through the rendering configuration information to obtain the target drawing attributes of the entity; The client draws the corresponding picture entity and text entity in the rendering canvas according to the resource file in the target bytecode format and the target drawing attributes; The client synthesizes the target picture and text material based on the picture entity and the text entity.

2. The method according to claim 1, wherein The creating, in the initial code running environment, of an entity corresponding to the resource file according to the pre-configured resource file includes: In the initial code running environment, parsing the pre-configured template configuration information to obtain the first address information of the resource file, and downloading the resource file according to the first address information, where the resource file is in the initial code format; Traversing the resource file to create an entity corresponding to the resource file.

3. The method according to claim 1, wherein The generating of the rendering configuration information according to the resource file and the rendering information pre-filled by the object includes: Saving the resource file to the virtual file system and generating the storage information of the resource file; Generating the rendering configuration information of the resource file according to the storage information and the pre-configured rendering information, and storing the pre-configured template configuration information and the rendering configuration information to the virtual file system.

4. The method according to claim 3, wherein The target drawing attributes at least include the position and size of the entity; the adjusting of the drawing attributes of the entity through the rendering configuration information to obtain the target drawing attributes of the entity includes: In the target bytecode running environment, obtaining the second address information of the resource file in the virtual file system; According to the second address information, obtaining the corresponding rendering configuration information in the virtual file system, and obtaining the position and size of the entity according to the rendering configuration information.

5. The method according to claim 1, wherein After the synthesizing of the target picture and text material based on the picture entity and the text entity, it further includes: Saving the target picture and text material to the virtual file system and creating a display link to display the target picture and text material according to the display link.

6. The method according to claim 3, characterized in that, The storage information includes the index information and length information of the resource file in the virtual file system.

7. The method according to any one of claims 1 to 6, characterized in that Before the drawing of the corresponding picture entity and text entity in the rendering canvas according to the resource file in the target bytecode format and the target drawing attributes, it further includes: In the initial code running environment, calling the initialization canvas function and binding the target graphics library interface, so that the rendering canvas calls the WebGL (Web Graphics Library) in the target bytecode running environment; The drawing of the corresponding picture entity in the rendering canvas includes: In the rendering canvas, the corresponding picture entities are drawn by invoking WebGL.

8. The method according to any one of claims 1 to 6, characterized in that Before drawing the corresponding picture entities and text entities in the rendering canvas according to the resource file in the target bytecode format and the target drawing attributes, it further includes: Invoking a rendering entry function in the initial code running environment, so as to draw the corresponding picture entities and text entities in the target bytecode running environment based on the rendering entry function.

9. A graphic and text material synthesis device, characterized in that, It includes: A creation unit, configured for the client to create an entity corresponding to the resource file in the initial code running environment according to a pre-configured resource file, where the resource file includes a decoration resource file and a picture resource file to be synthesized; A compilation unit, configured for the client to compile the resource file from the initial code format into the target bytecode format through a preset tool chain; wherein, the target bytecode is a special bytecode between the initial code and the machine code; An acquisition unit, configured for the client to generate rendering configuration information according to the resource file and the rendering information pre-filled by the object in the target bytecode running environment, and then adjust the drawing attributes of the entity through the rendering configuration information to obtain the target drawing attributes of the entity; A drawing unit, configured for the client to draw the corresponding picture entities and text entities in the rendering canvas according to the resource file in the target bytecode format and the target drawing attributes; A synthesis unit, configured for the client to synthesize a target graphic and text material based on the picture entities and the text entities.

10. An electronic device, characterized in that, It includes a processor and a memory, wherein the memory stores a computer program, and when the computer program is executed by the processor, the processor executes the steps of any one of the methods recited in claims 1 to 8.

11. A computer-readable storage medium, characterized in that, It includes a computer program, and when the computer program runs on an electronic device, the computer program is used to cause the electronic device to execute the steps of any one of the methods recited in claims 1 to 8.

12. A computer program product, characterized in that, It includes a computer program, and the computer program is stored in a computer-readable storage medium; when a processor of an electronic device reads the computer program from the computer-readable storage medium, the processor executes the computer program, causing the electronic device to execute the steps of any one of the methods recited in claims 1 to 8.

Images