Poster generation method and device, nonvolatile storage medium and electronic equipment

Abstract

The invention discloses a poster generation method and device, a nonvolatile storage medium and electronic equipment. The method comprises the following steps: determining a plurality of candidate application ends cooperatively executing poster generation with a front end; determining calling statements corresponding to a plurality of candidate application ends respectively according to a predetermined processing instruction needing to be executed by the front end in the poster generation process; under the condition that the calling statements corresponding to the multiple candidate application ends are different, a preset processing instruction is adjusted to obtain a target processing instruction, so that the calling statements corresponding to the multiple candidate application ends are the same, and the execution functions of the preset processing instruction and the target processing instruction are the same; and under the condition that the target application end is selected to cooperatively execute poster generation, generating a target poster at the front end based on the target processing instruction. According to the invention, the technical problem of insufficient compatibility of multiple platforms in the prior art is solved.

Description

Technical Field

[0001] The present invention relates to the field of front-end development technology, and in particular to a poster generation method, device, non-volatile storage medium and electronic device. Background Art

[0002] There are a lot of poster generation needs in mini programs, but the conventional Canvas generation method is cumbersome, especially for precise control of design and layout. Although the Canvas API provides a wealth of drawing functions that can be used to generate complex graphics and posters, the Canvas programming process is relatively complex and requires precise control of coordinates, size, color, etc.

[0003] Although there are many simple poster generation libraries on the H5 side, they are not compatible with mini-programs due to differences between mini-programs and H5 in terms of operating environment and API support. Different mini-program platforms provide different Canvas APIs and performance, and poster generation involves a lot of graphics processing and calculations, which has high performance requirements and may cause mini-programs to freeze or crash during operation. At present, the poster generation method in the existing technology has problems such as insufficient compatibility and high development costs on multiple platforms such as H5 and mini-programs.

[0004] To address the above-mentioned problems, no effective solution has been proposed yet. Summary of the invention

[0005] The embodiments of the present invention provide a poster generation method, device, non-volatile storage medium and electronic device to at least solve the technical problem of insufficient multi-platform compatibility existing in the related art.

[0006] According to one aspect of an embodiment of the present invention, a poster generation method is provided, comprising: determining a plurality of candidate application ends that collaborate with a front end to execute poster generation; determining call statements corresponding to the plurality of candidate application ends respectively for predetermined processing instructions that the front end needs to execute during the poster generation process; in a case where the call statements corresponding to the plurality of candidate application ends are different, adjusting the predetermined processing instructions to obtain target processing instructions so that the call statements corresponding to the plurality of candidate application ends are the same, wherein the predetermined processing instructions have the same execution function as the target processing instructions; in a case where a target application end is selected to collaborate in executing poster generation, generating a target poster at the front end based on the target processing instructions.

[0007] Optionally, the determining of the calling statements respectively corresponding to the multiple candidate application ends for the predetermined processing instructions that need to be executed by the front end during the poster generation process includes: determining the drawing contexts respectively corresponding to the multiple candidate application ends, wherein the drawing contexts are used to execute the poster generation function on the multiple candidate application ends; compiling based on the drawing contexts respectively corresponding to the multiple candidate application ends to obtain the interaction interfaces respectively corresponding to the front end and the multiple candidate application ends; and determining the calling statements respectively corresponding to the multiple candidate application ends through the interaction interfaces respectively corresponding to the multiple candidate application ends for the predetermined processing instructions.

[0008] Optionally, there are multiple target processing instructions, and the multiple target processing instructions correspond to different execution functions. The target poster is generated in the front end based on the target processing instructions, including: obtaining a poster template; adjusting the initial canvas included in the front end according to the canvas parameters indicated by the poster template to obtain the target canvas; calling the call statements corresponding to the target application end for processing through the multiple target processing instructions, and generating the target poster on the target canvas.

[0009] Optionally, adjusting the initial canvas included in the front end according to the canvas parameters indicated by the poster template to obtain the target canvas includes: acquiring screen information displayed by the front end; adjusting the canvas parameters based on the screen information to obtain adjusted canvas parameters; and adjusting the initial canvas using the adjusted canvas parameters to obtain the target canvas.

[0010] Optionally, adjusting the initial canvas included in the front end according to the canvas parameters indicated by the poster template to obtain the target canvas includes: determining the screen resolution and pixel resolution indicated by the screen information; adjusting the initial size of the initial canvas based on the ratio of the screen resolution to the pixel resolution to obtain the target size; and adjusting the initial canvas according to the target size to obtain the target canvas.

[0011] Optionally, generating the target poster on the target canvas includes: determining the QR code size information and encoding system information indicated in the poster template; converting a predetermined address according to the encoding system information to obtain a target array; generating a pixel point set corresponding to the target array; generating a target QR code based on the pixel point set and the QR code size information; and obtaining the target poster based on the target QR code.

[0012] Optionally, after the target poster is generated at the front end, the method further includes: determining the save instructions respectively supported by the multiple candidate application ends; performing encapsulation processing based on the save instructions respectively supported by the multiple candidate application ends to obtain a save interface commonly used by the multiple candidate application ends; and storing the target poster to the target application end through the save interface.

[0013] According to another aspect of an embodiment of the present invention, a poster generating device is provided, comprising: a server-side determination module, used to determine multiple candidate application ends that collaborate with a front end to execute poster generation; a call statement determination module, used to determine the call statements corresponding to the multiple candidate application ends respectively for predetermined processing instructions that need to be executed by the front end during the poster generation process; an adjustment processing instruction module, used to adjust the predetermined processing instructions to obtain target processing instructions when the call statements corresponding to the multiple candidate application ends are different, so that the call statements corresponding to the multiple candidate application ends are the same, wherein the predetermined processing instructions have the same execution function as the target processing instructions; a target poster generation module, used to generate a target poster at the front end based on the target processing instructions when the target application end is selected to collaborate in the poster generation.

[0014] According to another aspect of an embodiment of the present invention, a non-volatile storage medium is provided, wherein the non-volatile storage medium stores a plurality of instructions, wherein the instructions are suitable for being loaded by a processor and executing any one of the poster generation methods.

[0015] According to another aspect of an embodiment of the present invention, there is provided an electronic device, comprising: one or more processors and a memory, wherein the memory is used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement any one of the poster generation methods described.

[0016] In an embodiment of the present invention, a poster generation method is adopted, by determining multiple candidate application terminals that cooperate with the front end to perform poster generation; for the predetermined processing instructions that the front end needs to execute during the poster generation process, the call statements corresponding to the multiple candidate application terminals are determined; when the call statements corresponding to the multiple candidate application terminals are different, the predetermined processing instructions are adjusted to obtain target processing instructions, so that the call statements corresponding to the multiple candidate application terminals are the same, wherein the predetermined processing instructions have the same execution function as the target processing instructions; when the target application terminal is selected to cooperate with the poster generation, the target poster is generated at the front end based on the target processing instructions. The purpose of improving the efficiency of poster generation is achieved, and the technical effect of multi-platform compatibility is realized, thereby solving the technical problem of insufficient multi-platform compatibility existing in the related technology. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0018] Figure 1 is a flowchart of an optional poster generation method provided according to an embodiment of the present invention;

[0019] Figure 2 is a first schematic flow chart of an optional poster generation method provided according to an embodiment of the present invention;

[0020] Figure 3 is a second schematic flow chart of an optional poster generation method provided according to an embodiment of the present invention;

[0021] Figure 4 is a third schematic flow chart of an optional poster generation method provided according to an embodiment of the present invention;

[0022] Figure 5 is a fourth schematic flow chart of an optional poster generation method provided according to an embodiment of the present invention;

[0023] Figure 6 is a schematic diagram of an optional poster generating device provided according to an embodiment of the present invention. DETAILED DESCRIPTION

[0024] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.

[0025] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0026] For the convenience of description, some nouns or terms involved in the embodiments of the present application are explained below:

[0027] HTML5 (H5) is a Hyper Text Markup Language, an interactive web application built on HTML5 technology. H5 features include audio and video playback, canvas drawing, geolocation services, drag-and-drop functionality, etc.

[0028] API (Application Programming Interface), application programming interface, API is a set of predefined functions, protocols and tools that allow different software applications to interact and communicate with each other. Through API, developers can take advantage of the functions of specific software or hardware without accessing the source code or having a deep understanding of the internal working mechanism.

[0029] Canvas is an element in HTML5 and mini-program platforms. It can be used to draw graphics, animations, and other visual effects. It can be controlled by JavaScript to achieve various interactive and dynamic effects.

[0030] uni-app is a framework for developing all front-end applications using Vue.js. Developers write a set of codes that can be published to multiple platforms such as iOS, Android, Web (responsive), and various applets.

[0031] The uni-app cross-end API refers to an API set that encapsulates the features of each platform. The mini program also extends various wx.xx, my.xx, and swan.xx APIs based on standard JS. Take the uni.createCanvasContext method for creating a Canvas drawing context as an example. When the project is compiled to the mini program platform, the uni object will be converted to the mini program's own object. For example, on the mini program platform, this method will be converted to use wx.createCanvasContext. When compiled to the web platform H5, the browser-specific API document.createElement and Canvas.getContext("2d") are used to complete the creation of the Canvas drawing context.

[0032] JSON (JavaScript Object Notation) is a lightweight data exchange format based on text, easy for people to read and write, and easy for machines to parse and generate. JSON uses a text format that is completely independent of the language, but also uses conventions similar to the C language family. JSON is an optional data representation.

[0033] According to an embodiment of the present invention, a method embodiment of poster generation is provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0034] Figure 1 is a flowchart of an optional poster generation method provided according to an embodiment of the present invention. Figure 1 As shown, the method comprises the following steps:

[0035] Step S102, determining multiple candidate application terminals that collaborate with the front end to generate a poster;

[0036] It can be understood that the candidate application end that collaborates with the front end to perform poster generation is determined. The front end is the front-end uni-app project, and the application end is the mini program and H5 end. The cross-platform characteristics of the uni-app project are used to ensure seamless integration and data exchange between a set of front-end project codes and multiple application ends.

[0037] Step S104, determining the call statements corresponding to the plurality of candidate application ends respectively for the predetermined processing instructions that the front end needs to execute during the poster generation process;

[0038] It can be understood that the predetermined processing instructions that need to be executed by the front end during the poster generation process are determined, and the calling statements corresponding to the mini program and the H5 application end are determined for the predetermined processing instructions. Through the predetermined processing instructions, an efficient and secure poster generation function can be achieved.

[0039] In an optional embodiment, for predetermined processing instructions that need to be executed by the front end during the poster generation process, calling statements corresponding to multiple candidate application ends are determined, including: determining drawing contexts corresponding to the multiple candidate application ends, wherein the drawing contexts are used to execute the poster generation function on the multiple candidate application ends; compiling based on the drawing contexts corresponding to the multiple candidate application ends to obtain interaction interfaces corresponding to the front end and the multiple candidate application ends; for the predetermined processing instructions, determining calling statements corresponding to the multiple candidate application ends through the interaction interfaces corresponding to the multiple candidate application ends.

[0040] It can be understood that for a predetermined processing instruction, determining the call statements corresponding to the mini program and the H5 application end respectively includes: determining the drawing contexts corresponding to the multiple candidate application ends for executing the poster generation function respectively, compiling based on the drawing contexts, obtaining the interaction interfaces corresponding to the front end and the multiple candidate application ends respectively, and determining the call statements corresponding to the multiple candidate application ends respectively through the interaction interfaces. By defining a unified drawing context and interaction interface, the consistency and compatibility of the mini program and the H5 end in the poster generation function can be ensured, without the need to write duplicate code for different platforms.

[0041] Step S106, when the call statements corresponding to the multiple candidate application ends are different, adjusting the predetermined processing instruction to obtain the target processing instruction, so that the call statements corresponding to the multiple candidate application ends are the same, wherein the predetermined processing instruction and the target processing instruction have the same execution function;

[0042] It can be understood that when the call statements corresponding to the multiple candidate application ends are different, the predetermined processing instruction is adjusted to obtain a target processing instruction with the same execution function as the predetermined processing instruction, so that the call statements corresponding to the multiple candidate application ends are the same. By converting the call statements, cross-platform consistency and compatibility are ensured.

[0043] Optionally, the above call statement adjustment method can be multiple. For example, in addition to the need for compatibility processing for obtaining Canvas component instances, there are also some differences in the content drawing interface on the mini program and H5 that need to be processed. If the Canvas between the mini program platforms has the old Canvas interface and the new Canvas 2D interface, the old Canvas interface CanvasContext.drawImage directly passes in the image URL for image drawing, and the new Canvas 2D interface needs to first create the image object through Canvas.createImage. The onload event is triggered after the loading and initialization events are completed, that is, after the onload image loading completion callback is triggered, the image object is passed to context.drawImage for drawing. However, the Canvas drawing context of H5 does not have the createImage method to create an image object, so when drawing the image sub-element in the poster, the ctx.drawImage method shared by the mini program and H5 is selected. For other poster elements such as text, rectangles, and QR codes, the API shared by the two application ends is also selected for drawing.

[0044] Step S108, when the target application end is selected to collaboratively execute poster generation, a target poster is generated at the front end based on the target processing instruction.

[0045] It can be understood that after confirming the target application end, based on the target processing instructions, the front end is responsible for receiving the data or instructions returned by the application end and dynamically generating posters. By directly generating the target poster through the front end, the user experience is optimized, the real-time and interactivity of the application are enhanced, and the computing burden of the front end is reduced by using server-side processing.

[0046] In an optional embodiment, it is characterized in that there are multiple target processing instructions, and the multiple target processing instructions correspond to different execution functions. Based on the target processing instructions, a target poster is generated in the front end, including: obtaining a poster template; adjusting the initial canvas included in the front end according to the canvas parameters indicated by the poster template to obtain the target canvas; through multiple target processing instructions, calling the call statement corresponding to the target application end for processing, and generating a target poster on the target canvas.

[0047] It can be understood that there are multiple target processing instructions, and the multiple target processing instructions correspond to different execution functions. By obtaining the poster template, that is, the JSON specification, the initial canvas included in the front end is adjusted according to the canvas parameters indicated by the poster template to obtain the target canvas, and the target poster is generated on the target canvas through multiple target processing instructions and processing using call statements. By calling different functions of the target application end respectively through multiple target processing instructions, the front end can generate the target poster efficiently and flexibly.

[0048] Optionally, the above JSON specifications can be multiple. For example, after JSON is parsed by js, it becomes an object, that is, the string in JSON format is converted into JavaScript, that is, an object that can be operated by js. The properties on the object are: width specifies the canvas width; height specifies the canvas height, background specifies the canvas background, and views is an array of poster elements.

[0049] Optionally, the above views poster element array can be multiple. For example, in the views poster element array, the array sub-item public attributes are: type, type specifies the poster element type, and there are four optional values: image, text, rect, and qrcode; width specifies the element width, height specifies the element height, left specifies the horizontal distance of the element relative to the upper left corner of the canvas, top specifies the vertical distance of the element relative to the upper left corner of the canvas, borderRadius specifies the element's rounded corner style, and rotate specifies the element's rotation angle. The array sub-items in the views poster element array have special attributes depending on the type. When the array sub-item type is image, the element displays the image content, and the special attributes are: url is the image http / https link, mode is the image display format, and can be configured to stretch fill or not stretch. When the array sub-item type is text, the element displays text, and the special attributes are: maxLines maximum number of lines, lineHeight text line height, color text color, fontSize text size, fontWeight text thickness, textAlign text alignment direction, and fontFamily font setting. When the array item type is rect, the element displays a rectangle, and the special attributes are: background background color, borderWidth border size, borderColor border color, and shadow shadow. When the array item type is qrcode, the element displays a QR code, and has a url attribute. The url attribute value should be text, such as the web address carrying the sharing information.

[0050] Optionally, Figure 2 is a first schematic flow chart of an optional poster generation method provided according to an embodiment of the present invention. Figure 2 As shown in the figure, the poster JSON architecture diagram includes: mobile poster components, poster content description JSON specifications and PC poster editor. After the C-end (Custom end, client) uni-app project is connected to the poster component, it is compiled into H5 and applet, and the poster content is dynamically drawn by parsing the poster JSON. The PC poster editor can facilitate developers and designers to efficiently design poster templates and produce poster JSON that meets the specifications.

[0051] In an optional embodiment, the initial canvas included in the front end is adjusted according to the canvas parameters indicated by the poster template to obtain the target canvas, including: obtaining screen information displayed on the front end; adjusting the canvas parameters based on the screen information to obtain adjusted canvas parameters; and adjusting the initial canvas using the adjusted canvas parameters to obtain the target canvas.

[0052] It can be understood that the screen information displayed on the front end is obtained, and the canvas parameters are adjusted based on the screen information to obtain the adjusted canvas parameters, and the initial canvas is adjusted to obtain the target canvas. In the process of poster generation, the screen information displayed on the front end is obtained and the canvas parameters are adjusted accordingly, so that responsive design can be achieved to ensure that the poster can present the best visual effect on different devices.

[0053] Optionally, the above canvas parameters may be multiple, for example, the canvas parameters include canvas size, ie, canvas width and height, canvas background, poster element array, etc.

[0054] In an optional embodiment, the initial canvas included in the front end is adjusted according to the canvas parameters indicated by the poster template to obtain the target canvas, including: determining the screen resolution and pixel resolution indicated by the screen information; adjusting the initial size of the initial canvas based on the ratio of the screen resolution and the pixel resolution to obtain the target size; adjusting the initial canvas according to the target size to obtain the target canvas.

[0055] It can be understood that obtaining the target canvas requires compatibility processing of the screen resolution, determining the screen resolution and pixel resolution indicated by the screen information, adjusting the initial size of the initial canvas based on the ratio of the screen resolution and the pixel resolution to obtain the target size, and adjusting the initial canvas based on the target size to obtain the target canvas. By compatibly processing the screen resolution and adjusting the initial canvas size according to the resolution and pixel ratio indicated by the screen information, a high degree of resolution adaptability and improved image clarity are achieved.

[0056] Optionally, the above-mentioned screen resolution compatibility processing methods can be multiple. For example, the screen resolutions of different devices may be different, which will affect the display effect of the poster. The mobile pictorial component library uses certain compatibility strategies to ensure that the poster can present good visual effects on devices with different resolutions. At present, the industry usually uses 750 pixels as the standard for visual drafts when developing mini-programs or H5, and then developers use responsive design to scale the content proportionally according to the screen width. In order to facilitate developer access, this embodiment also uses 750 pixels as the poster content size description standard, so that developers can directly use the values ​​marked on the visual draft to complete the JSON editing of the poster content description. The mobile pictorial component library, that is, the poster component, first uses the uni.getSystemInfoSync statement in the uni-app cross-end API to obtain screen information, mainly obtaining the screen width pixels and the DPR (Device Pixel Ratio) display's physical pixel resolution to the CSS pixel resolution ratio, combined with the background width and height pixel values ​​of the poster JSON, calculates the width and height values ​​CanvasWidthInPx and CanvasHeightInPx required for the Canvas canvas, and finally adds attributes to the Canvas component tag, that is, the characteristics or information of the canvas object, by<Canvas:width="CanvasWidthInPx":height="CanvasHeightInPx"> To complete the Canvas size setting, the canvas display meets the size designed by the visual draft. In the subsequent poster content drawing process, the required width and height of each child element will be calculated according to the values ​​provided by JSON, and then the drawing API will be called to draw the content.

[0057] In an optional embodiment, a target poster is generated on a target canvas, including: determining the QR code size information and encoding base information indicated in the poster template; converting a predetermined address according to the encoding base information to obtain a target array; generating a pixel point set corresponding to the target array; generating a target QR code based on the pixel point set and the QR code size information; and obtaining a target poster based on the target QR code.

[0058] It can be understood that the size information of the QR code indicated in the poster template and the encoding system information are determined, and the predetermined address is converted according to the encoding system information to obtain the target array, and the pixel point set corresponding to the target array is generated to generate the target QR code. According to the size information of the QR code and the encoding system information indicated in the poster template, through precise encoding and pixel point set generation, efficient and accurate generation of the QR code can be achieved, ensuring the size, clarity and visual effect of the QR code.

[0059] Optionally, the above-mentioned method for generating a QR code can be multiple. For example, the QR code element drawing first configures the size of the QR code display according to the width and height in the JSON, and then converts the sharing address text from utf16 to utf8, that is, converts the text in 16-bit coding units into 8-bit coding units. qrcode.js refers to a JavaScript library, and qrcode.js is used to generate a two-dimensional array. ctx.fillRect is a method in the Canvas 2D API, which is used to draw a matrix filled with colors. Finally, ctx.fillRect is used to draw the pixel points corresponding to the two-dimensional array to form a QR code.

[0060] In an optional embodiment, after the target poster is generated at the front end, the method also includes: determining the save instructions respectively supported by multiple candidate application ends; performing encapsulation processing based on the save instructions respectively supported by the multiple candidate application ends to obtain a save interface commonly used by the multiple candidate application ends; and storing the target poster to the target application end through the save interface.

[0061] It can be understood that after the front end generates the target poster, it determines the save instructions supported by multiple candidate application terminals respectively, performs encapsulation processing based on the save instructions, that is, compatible encapsulation, obtains the save interface commonly used by multiple candidate application terminals, and stores the target poster to the target application terminal. The unified save interface can adapt to the save instructions of different application terminals, and the poster generated by the front end can be seamlessly stored on any application terminal that supports the interface, without the need for separate coding or configuration for each application terminal, which greatly improves the flexibility of storage and the compatibility of the system.

[0062] Optionally, the above-mentioned compatible encapsulation methods can be multiple. For example, the Canvas component instance acquisition is compatible. There are differences in the Canvas APIs of the mini program and H5. For example, the mini program platform needs to use wx.createCanvasContext to create the Canvas drawing context, the mpass mini program platform needs to use my.createCanvasContext, and H5 uses document.createElement and Canvas.getContext("2d") to complete the creation of the Canvas drawing context. The mobile pictorial component library uses the uni-app cross-end API - uni.createCanvasContext to achieve Canvas drawing context acquisition compatibility, and converts it into the interface of the platform according to the compilation platform. Canvas generates compatible images. In the process of generating images, the component library also performs corresponding compatibility processing. For the saving of image files, the mini program and H5 save them differently. By encapsulating these differences, the component library allows developers to use a unified interface to generate images. In the mini program platform, use ctx.toTempFilePath to save the current Canvas as a temporary file, and then use uni.saveImage (uni-app cross-end API) to save the image file locally; in H5, use toDataURL('image / png') to convert the image into Base64, use the a tag to point to this Base64, and the user can download it after clicking; if H5 is loaded in the Yifu Pay APP, it will also use the Yifu Pay APP interactive savePicture to directly save the image to the user's mobile phone album.

[0063] Through the above step S102, multiple candidate application terminals that collaborate with the front end to execute poster generation are determined; step S104, for the predetermined processing instructions that the front end needs to execute during the poster generation process, the call statements corresponding to the multiple candidate application terminals are determined; step S106, when the call statements corresponding to the multiple candidate application terminals are different, the predetermined processing instructions are adjusted to obtain the target processing instructions, so that the call statements corresponding to the multiple candidate application terminals are the same, wherein the predetermined processing instructions and the target processing instructions have the same execution function; step S108, when the target application terminal is selected to collaborate with the poster generation, the target poster is generated at the front end based on the target processing instructions. The purpose of improving the efficiency of poster generation is achieved, and the technical effect of multi-platform compatibility is realized, thereby solving the technical problem of insufficient multi-platform compatibility existing in the related technology.

[0064] Based on the above embodiments and optional embodiments, the present invention proposes an optional implementation mode, such as Figure 3 As shown, Figure 3It is a second schematic flow chart of an optional poster generation method provided according to an embodiment of the present invention, that is, a mobile-side pictorial component generates a poster process. This embodiment includes a mobile-side poster component, a poster content description JSON specification, and a PC-side poster editor. The mobile-side poster component integrates and encapsulates the Canvas canvas of the mini program and H5, uses uni-app conditional compilation to handle multi-terminal differences, draws poster elements in sequence according to the poster content description JSON given by the developer, and supports the application end to obtain JSON, and only needs to adjust the background JSON configuration without the front end to change the poster content. The poster content description JSON specification stipulates that the poster elements have text, pictures, rectangles, and QR code types, and stipulates the layout and styles supported by various elements, so that developers do not need to understand the Canvas canvas API to draw poster content. The PC-side poster editor built based on the canvas graphics library fabric.js can set the poster size in the editor, and can add 4 elements defined by the JSON specification to the poster, supporting style operations such as dragging element positions, scaling element sizes, and setting element background colors.

[0065] Step S1, obtain the poster JSON template, the template content is the poster size, background image, and activity style group. The JSON can be read from the front-end local file and obtained from the back-end interface.

[0066] Optionally, the above poster JSON can be of multiple types. For example, the information content of the user's participation in the activity can be added to the poster JSON, such as a sharing QR code, an invitation QR code, a reward collection QR code, etc.

[0067] Step S2, the poster component is initialized, and the Canvas drawing context is created through uni.createCanvasContext (uni-app cross-end API). The drawing context is created, and the inconsistent methods of obtaining the drawing context of H5 and the mini program are optimized. The screen information is obtained through uni.getSystemInfoSync (uni-app cross-end API), and the inconsistent methods of obtaining system information of H5 and the mini program are optimized. The poster size of the poster JSON is combined to calculate the required width and height values ​​of the Canvas canvas to complete the resolution adaptation.

[0068] Step S3, the poster component parses the background image field in the poster JSON to set the Canvas background, supports setting the color using CSS-like syntax, and also supports filling the background with images.

[0069] Step S4, the poster component parses the views poster element array in the poster JSON, and determines which poster element to draw according to the type field. To draw the picture element, first obtain the width and height data of the picture resource, and then calculate the parameters needed to draw the image in combination with the picture size and element position set in JSON, and call the canvas instance ctx.drawImage (this method and the following ctx.xxx methods are common APIs for H5 and mini programs) to draw the picture. To draw the text element, set the text style according to the text size, thickness and font in JSON, and support fixed width and automatic line wrapping. Use ctx.measureText to measure whether the current line has reached the width set in JSON to decide whether to wrap. Finally, draw hollow text through ctx.storkeText, and draw solid text through ctx.fillText. To draw the rectangle element, first use ctx.createRadialGradient or ctx.createLinearGradient to fill the gradient background color, or just use fillStyle to set a simple solid color background, then draw the border, and support three types of border drawing: solid, dashed, and dotted. Finally, use ctx.fill to complete the rectangle drawing. To draw the QR code element, first configure the size of the QR code display according to the width and height in JSON, then convert the shared address text from utf16 to utf8, use qrcode.js to generate a two-dimensional array, and finally use ctx.fillRect to draw the pixels corresponding to the two-dimensional array to form a QR code.

[0070] Step S5, after all poster elements are drawn, the canvas is displayed on the page through ctx.draw. The user can scan the code face to face or click the save button: in the applet, use ctx.toTempFilePath to save the current Canvas as a temporary file, and then use uni.saveImage (uni-app cross-end API) to save the image file locally; in H5, use toDataURL('image / png') to convert the image into Base64, use the a tag to point to this Base64, and the user can download it after clicking.

[0071] The interface of the PC poster editor is as follows: The template area on the left shows some beautiful posters that have been designed. Click to import the corresponding poster JSON into the canvas. In the middle is the canvas area, which shows the real poster effect. The elements added to the canvas can be dragged, rotated, and scaled directly with the mouse. There are export JSON and import JSON buttons in the first row of the operation area. Export JSON converts the canvas into a pictorial JSON, which can be copied to the local mobile project or saved through the backend interface. Import JSON can import posters designed by others and display them on the canvas for continued editing. There are five buttons in the second row of the operation area, including canvas, text, rectangle, picture, and QR code. The third row of the operation area is the detailed setting parameters of various elements. The configurable properties of different elements are displayed according to the buttons clicked in the second row. There are corresponding add buttons for text, rectangle, picture, and QR code. After clicking the add button, a new poster element will be added to the canvas. Existing poster elements can be selected by clicking, and the configurable properties of the currently selected object will pop up on the right side of the editor.

[0072] Figure 4 This is the third schematic flow chart of an optional poster generation method provided according to an embodiment of the present invention, namely, the PC-side poster editing process. Create a new template on the PC-side poster editor or select a template in the template area on the left, and click the Import JSON button in the upper right corner to import an existing poster template. Select the canvas configuration in the right operation area to set the canvas width, height, and background color. There are text, short form, picture, and QR code buttons in the right operation area to add poster elements as needed. In the middle canvas area, dragging the position of the poster element in the poster can stretch the element size and adjust the element angle; continue to set the poster element width, height, color, font size, shadow and other styles in the right operation area. Click the upper right corner to export JSON, export the file for use in the C-side project, or click the Save button to save the JSON to the backend interface.

[0073] Figure 5 This is the fourth schematic flow chart of an optional poster generation method provided according to an embodiment of the present invention, namely, the access and use process of the mobile poster component. The C-end uni-app project accesses the poster component, uses the front-end local JSON file or connects to the back-end poster JSON acquisition interface, and packages the mini-program product or H5 product for online use by users. Users participate in activities or initiate activities, trigger sharing scenarios, request the back-end interface poster JSON acquisition interface or read the front-end local JSON content, adjust the poster JSON content such as drawing a QR code carrying personal activity sharing information, and the poster component displays the content and the save button; the user clicks the save button, and the poster component converts the canvas into a png (an image format) file and saves it to the user's device.

[0074] The above optional implementation method achieves at least the following effects: supports automatic poster generation for H5 and mini-programs at the same time, avoiding the problem of repeated code writing; the poster content description JSON specification stipulates that poster elements include text, pictures, rectangles, QR code types, etc., and stipulates the layout and styles supported by various elements, so that developers do not need to understand the Canvas API to realize the poster drawing function, thereby reducing development and quickly completing poster needs. A PC poster editor is provided, which can build poster templates by dragging and dropping poster elements, and beautify poster content by modifying element styles. After the poster template is edited, it can be exported to JSON as a front-end project file to complete static template use, or it can be saved to the back-end to support dynamic acquisition of the latest poster template.

[0075] It should be noted that the steps shown in the flowcharts of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and that, although a logical order is shown in the flowcharts, in some cases, the steps shown or described can be executed in an order different from that shown here.

[0076] In this embodiment, a poster generation device is also provided, which is used to implement the above-mentioned embodiments and preferred implementation modes, and the descriptions that have been made will not be repeated. As used below, the terms "module" and "device" can implement a combination of software and / or hardware for a predetermined function. Although the devices described in the following embodiments are preferably implemented in software, the implementation of hardware, or a combination of software and hardware, is also possible and conceivable.

[0077] According to an embodiment of the present invention, a device embodiment for implementing the poster generation method is also provided. Figure 6 is a schematic diagram of an optional poster generating device provided according to an embodiment of the present invention, such as Figure 6 As shown, the poster generating device includes a server-side determining module 602, a calling statement determining module 604, a processing instruction adjusting module 606, and a target poster generating module 608. The device is described below.

[0078] Determine a server-side module 602, used to determine multiple candidate application ends that collaborate with the front end to perform poster generation;

[0079] The calling statement determination module 604 is connected to the server-side determination module 602 and is used to determine the calling statements corresponding to the plurality of candidate application ends respectively according to the predetermined processing instructions that the front end needs to execute during the poster generation process;

[0080] The processing instruction adjustment module 606 is connected to the calling statement determination module 604 and is used to adjust the predetermined processing instruction to obtain the target processing instruction when the calling statements corresponding to the multiple candidate application ends are different, so that the calling statements corresponding to the multiple candidate application ends are the same, wherein the predetermined processing instruction and the target processing instruction have the same execution function;

[0081] The target poster generation module 608 is connected to the adjustment processing instruction module 606, and is used to generate the target poster at the front end based on the target processing instruction when the target application end is selected to cooperate in executing the poster generation.

[0082] In a poster generation device provided by an embodiment of the present invention, a server-side determination module 602 is set to determine multiple candidate application terminals that cooperate with the front end to perform poster generation; a call statement determination module 604 is connected to the server-side determination module 602, and is used to determine the call statements corresponding to multiple candidate application terminals respectively for the predetermined processing instructions that the front end needs to execute during the poster generation process; an adjustment processing instruction module 606 is connected to the call statement determination module 604, and is used to adjust the predetermined processing instructions when the call statements corresponding to the multiple candidate application terminals are different, and obtain the target processing instructions, so that the call statements corresponding to the multiple candidate application terminals are the same, wherein the predetermined processing instructions and the target processing instructions have the same execution function; a target poster generation module 608 is connected to the adjustment processing instruction module 606, and is used to generate a target poster at the front end based on the target processing instructions when the target application terminal is selected to cooperate with the poster generation. The purpose of improving the poster generation efficiency is achieved, and the technical effect of multi-platform compatibility is achieved, thereby solving the technical problem of insufficient multi-platform compatibility existing in the related technology.

[0083] It should be noted that the above modules can be implemented by software or hardware. For example, for the latter, it can be implemented in the following ways: the above modules can be located in the same processor; or the above modules can be located in different processors in any combination.

[0084] It should be noted that the above-mentioned server-side determination module 602, call statement determination module 604, processing instruction adjustment module 606, and target poster generation module 608 correspond to steps S102 to S108 in the embodiment, and the examples and application scenarios implemented by the above-mentioned modules and corresponding steps are the same, but are not limited to the contents disclosed in the above-mentioned embodiment. It should be noted that the above-mentioned modules can be run in a computer terminal as part of the device.

[0085] It should be noted that the optional or preferred implementation of this embodiment can refer to the relevant description in the embodiment, which will not be repeated here.

[0086] The above-mentioned poster generation device may also include a processor and a memory, and the server-side module 602, the call statement module 604, the processing instruction adjustment module 606, the target poster generation module 608, etc. are all stored in the memory as program units, and the processor executes the above-mentioned program units stored in the memory to realize the corresponding functions.

[0087] The processor includes a kernel, which retrieves the corresponding program unit from the memory. There can be one or more kernels. The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM, and the memory includes at least one storage chip.

[0088] An embodiment of the present invention provides a non-volatile storage medium on which a program is stored. When the program is executed by a processor, a poster generation method is implemented.

[0089] An embodiment of the present invention provides an electronic device, which includes a processor, a memory, and a program stored in the memory and executable on the processor. When the processor executes the program, the following steps are implemented: determining multiple candidate application terminals that cooperate with the front end to execute poster generation; determining the call statements corresponding to the multiple candidate application terminals for the predetermined processing instructions that the front end needs to execute during the poster generation process; in the case where the call statements corresponding to the multiple candidate application terminals are different, adjusting the predetermined processing instructions to obtain target processing instructions, so that the call statements corresponding to the multiple candidate application terminals are the same, wherein the predetermined processing instructions and the target processing instructions have the same execution function; in the case where the target application terminal is selected to cooperate with the poster generation, generating the target poster at the front end based on the target processing instructions. The device in this article can be an application terminal, a PC, etc.

[0090] The present invention also provides a computer program product, which, when executed on a data processing device, is suitable for executing a program that initializes the following method steps: determining multiple candidate application ends that collaborate with a front end to execute poster generation; determining calling statements corresponding to the multiple candidate application ends for predetermined processing instructions that the front end needs to execute during the poster generation process; when the calling statements corresponding to the multiple candidate application ends are different, adjusting the predetermined processing instructions to obtain target processing instructions so that the calling statements corresponding to the multiple candidate application ends are the same, wherein the predetermined processing instructions and the target processing instructions have the same execution function; when the target application end is selected to collaborate with the poster generation, generating a target poster on the front end based on the target processing instructions.

[0091] Those skilled in the art will appreciate that embodiments of the present invention may be provided as methods, systems, or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present invention may 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.) containing computer-usable program code.

[0092] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowchart and / or block diagram, as well as the combination of processes and / or blocks in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0093] These computer program instructions may also be stored in a computer-readable memory capable of directing a computer or other programmable data processing device to operate in a specific manner, so that the instructions stored in the computer-readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 A process or multiple processes and / or boxes Figure 1 A function specified in one or more boxes.

[0094] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operating steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing instructions for implementing the process. Figure 1 A process or multiple processes and / or boxes Figure 1 The steps for the functions specified in one or more boxes.

[0095] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0096] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0097] Computer readable media include permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. Information can be computer readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, magnetic tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer readable media does not include temporary computer readable media (transitory media), such as modulated data signals and carrier waves.

[0098] It should also be noted that the terms "include", "comprises" or any other variations thereof are intended to cover non-exclusive inclusion, so that a process, method, commodity or device including a series of elements includes not only those elements, but also other elements not explicitly listed, or also includes elements inherent to such process, method, commodity or device. In the absence of more restrictions, the elements defined by the sentence "comprises a ..." do not exclude the existence of other identical elements in the process, method, commodity or device including the elements.

[0099] It will be appreciated by those skilled in the art that embodiments of the present invention may be provided as methods, systems or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment or an embodiment combining software and hardware. Moreover, the present invention may 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.) containing computer-usable program codes.

[0100] The above are only embodiments of the present invention and are not intended to limit the present invention. For those skilled in the art, the present invention may have various modifications and variations. Any modification, equivalent substitution, improvement, etc. made within the spirit and principle of the present invention should be included in the scope of the claims of the present invention.

Claims

1. A poster generation method, characterized in that: include: Determine multiple candidate application ends for cooperating with the front end to perform poster generation; Determine the calling statements corresponding to the plurality of candidate application ends respectively according to the predetermined processing instructions that the front end needs to execute during the poster generation process; In the case where the call statements corresponding to the multiple candidate application ends are different, adjusting the predetermined processing instruction to obtain a target processing instruction so that the call statements corresponding to the multiple candidate application ends are the same, wherein the predetermined processing instruction has the same execution function as the target processing instruction; In the case where the target application end is selected to collaboratively execute poster generation, a target poster is generated at the front end based on the target processing instruction.

2. The method according to claim 1, characterized in that The determining of the calling statements corresponding to the plurality of candidate application ends respectively for the predetermined processing instructions that the front end needs to execute during the poster generation process includes: Determine drawing contexts corresponding to the multiple candidate application terminals respectively, wherein the drawing contexts are used to perform a poster generation function on the multiple candidate application terminals; Compiling based on the drawing contexts respectively corresponding to the multiple candidate application ends, to obtain interaction interfaces respectively corresponding to the front end and the multiple candidate application ends; For the predetermined processing instruction, the calling statements corresponding to the multiple candidate application ends are determined respectively through the interaction interfaces corresponding to the multiple candidate application ends respectively.

3. The method according to claim 1, characterized in that There are multiple target processing instructions, each of which corresponds to a different execution function. Based on the target processing instructions, generating a target poster at the front end includes: Get the poster template; According to the canvas parameters indicated by the poster template, the initial canvas included in the front end is adjusted to obtain a target canvas; Through the multiple target processing instructions, the call statements corresponding to the target application end are called for processing, and the target poster is generated on the target canvas.

4. The method according to claim 3, characterized in that The adjusting the initial canvas included in the front end according to the canvas parameters indicated by the poster template to obtain the target canvas includes: Acquire screen information displayed on the front end; Based on the screen information, adjusting the canvas parameters to obtain adjusted canvas parameters; The initial canvas is adjusted using the adjusted canvas parameters to obtain a target canvas.

5. The method according to claim 4, characterized in that The adjusting the initial canvas included in the front end according to the canvas parameters indicated by the poster template to obtain the target canvas includes: Determining a screen resolution and a pixel resolution indicated by the screen information; Based on the ratio of the screen resolution to the pixel resolution, adjusting the initial size of the initial canvas to obtain a target size; The initial canvas is adjusted according to the target size to obtain the target canvas.

6. The method according to claim 3, characterized in that The step of generating the target poster on the target canvas comprises: Determine the size information and encoding system information of the QR code indicated in the poster template; According to the encoding system information, the predetermined address is converted to obtain a target array; Generate a pixel point set corresponding to the target array; Generate a target two-dimensional code based on the pixel point set and the two-dimensional code size information; Based on the target QR code, the target poster is obtained.

7. The method according to any one of claims 1 to 6, characterized in that: After the front end generates the target poster, the method further includes: Determining the save instructions respectively supported by the multiple candidate application terminals; Perform encapsulation processing based on the save instructions respectively supported by the multiple candidate application terminals to obtain a save interface commonly used by the multiple candidate application terminals; The target poster is stored in the target application end through the saving interface.

8. A poster generating device, characterized in that: include: Determine a server-side module, which is used to determine multiple candidate application ends that collaborate with the front end to perform poster generation; A calling statement determination module is used to determine the calling statements corresponding to the plurality of candidate application ends respectively according to the predetermined processing instructions that the front end needs to execute during the poster generation process; A processing instruction adjustment module is used to adjust the predetermined processing instruction to obtain a target processing instruction when the call statements corresponding to the multiple candidate application ends are different, so as to make the call statements corresponding to the multiple candidate application ends the same, wherein the predetermined processing instruction has the same execution function as the target processing instruction; A target poster generation module is used to generate a target poster at the front end based on the target processing instruction when the target application end is selected to collaboratively execute poster generation.

9. A non-volatile storage medium, characterized in that: The non-volatile storage medium stores a plurality of instructions, and the instructions are suitable for being loaded by a processor and executing the poster generating method described in any one of claims 1 to 7.

10. An electronic device, characterized in that: include: One or more processors and a memory, wherein the memory is used to store one or more programs, wherein when the one or more programs are executed by the one or more processors, the one or more processors implement the poster generation method described in any one of claims 1 to 7.

Images