Cross-platform poster generation method and device

Abstract

The invention provides a cross-platform poster generation method and device, computing equipment and a computer readable storage medium. According to the method, a headless browser and Canvas drawing are combined and applied to the field of game poster automatic generation. Firstly, a headless browser is used for rendering at a server side, complete support of HTML5, CSS3 and Canvas is ensured, and the consistency of display effects of the design at all terminals is ensured; and in combination with a template engine and a Canvas API, poster generation driven by dynamic data is supported. A developer can use an HTML / CSS design template, different user and activity data can be automatically filled through placeholders, flexible layout is achieved, and hard coding of layer coordinates is not needed. All clients call the generation service through a unified back-end interface, and different templates or rendering parameters are automatically selected without repeated implementation for each platform. The scheme of the invention does not depend on a specific platform, is suitable for all environments supporting Chrome / Node. Js, and ensures the consistency of poster styles output by multiple terminals.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, apparatus, computing device, and computer-readable storage medium for generating posters across platforms. Background Art

[0002] In the process of online marketing, it is often necessary to automatically generate pictures of a unified style, such as invitation posters for friends and activity sharing pictures, for user dissemination. In the existing technology, the back-end service usually generates and returns the picture URL, or the client uses Canvas to dynamically draw and stitch pictures. In cross-end scenarios, there are differences in the rendering environment, style support, fonts and resolutions of different platforms, resulting in inconsistent image effects and difficulties in debugging and maintaining traditional solutions. For example, the client library relies on the local native environment and font configuration, has poor cross-platform compatibility, and style consistency is difficult to ensure. At the same time, the native Canvas of the mini program has layer and size limitations (2D images are up to 4096 pixels), and same-layer rendering also fails on some devices, limiting the generation of complex posters; in addition, the client screenshot generation solution requires user authorization, has a low degree of automation, and is difficult to mass produce. Summary of the Invention

[0003] In view of this, embodiments of the present application provide a method, apparatus, computing device, and computer-readable storage medium for generating posters across platforms to address the technical deficiencies in the prior art.

[0004] According to a first aspect of an embodiment of the present application, a method for generating a poster across platforms is provided, comprising:

[0005] Receive poster generation request sent by the client;

[0006] Creating a headless browser instance, opening a poster template in the headless browser instance, and filling the poster template according to the poster generation request; the poster template is a page pre-generated by HTML and / or CSS elements;

[0007] In the headless browser instance, layer drawing and composite rendering are completed through Canvas;

[0008] After rendering is completed, the output interface of the headless browser instance or Canvas is called to obtain the poster image.

[0009] According to a second aspect of an embodiment of the present application, a device for generating a poster across platforms is provided, comprising:

[0010] A receiving unit, configured to receive a poster generation request sent by a client;

[0011] A generation unit, configured to create a headless browser instance, open a poster template in the headless browser instance, and fill the poster template according to the poster generation request; the poster template is a page pre-generated by HTML and / or CSS elements;

[0012] A drawing unit, configured to complete the drawing and composite rendering of layers through Canvas in the headless browser instance;

[0013] The output unit is used to call the output interface of the headless browser instance or Canvas after the rendering is completed to obtain the poster image.

[0014] According to a third aspect of an embodiment of the present application, a computing device is provided, comprising a memory, a processor, and computer instructions stored in the memory and executable on the processor, wherein when the processor executes the instructions, the steps of the method for generating posters across platforms are implemented.

[0015] According to a fourth aspect of an embodiment of the present application, a computer-readable storage medium is provided, which stores computer instructions. When the instructions are executed by a processor, the steps of the method for generating a poster across platforms are implemented.

[0016] In an embodiment of the present application, a headless browser is combined with Canvas drawing and applied to the field of automatic generation of game posters. First, a headless browser is used for rendering on the server side to ensure full support for HTML5, CSS3 and Canvas, and to ensure the consistency of the design display effect on each terminal; and combined with the template engine and Canvas API, dynamic data-driven poster generation is supported. Developers can use HTML / CSS design templates and automatically fill in different user and activity data through placeholders to achieve flexible layout without hard-coding layer coordinates. All clients call the generation service through a unified back-end interface, without the need for repeated implementation for each platform, and automatically select different templates or rendering parameters. The solution of this application does not depend on a specific platform and is applicable to all environments that support Chrome / Node.js, ensuring the consistency of poster styles output on multiple terminals. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] Figure 1 is a structural block diagram of a computing device provided in an embodiment of the present application;

[0018] Figure 2 This is a flowchart of a method for generating posters across platforms provided in an embodiment of the present application;

[0019] Figure 3 This is a schematic structural diagram of a device for generating posters across platforms provided in an embodiment of the present application; DETAILED DESCRIPTION

[0020] The following description sets forth many specific details to facilitate a thorough understanding of the present application. However, the present application can be implemented in many other ways than those described herein, and those skilled in the art can make similar generalizations without violating the scope of the present application. Therefore, the present application is not limited to the specific implementations disclosed below.

[0021] The terms used in one or more embodiments of the present application are for the purpose of describing specific embodiments only and are not intended to limit one or more embodiments of the present application. The singular forms "a", "the" and "the" used in one or more embodiments of the present application and the appended claims are also intended to include plural forms, unless the context clearly indicates otherwise. It should also be understood that the term "and / or" used in one or more embodiments of the present application refers to and includes any or all possible combinations of one or more associated listed items.

[0022] It should be understood that although the terms first, second, etc. may be used to describe various information in one or more embodiments of the present application, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from each other. For example, without departing from the scope of one or more embodiments of the present application, first may also be referred to as second, and similarly, second may also be referred to as first. Depending on the context, the word "if" as used herein may be interpreted as "in response to determining."

[0023] In this application, a method and apparatus for generating a poster across platforms, a computing device, and a computer-readable storage medium are provided, which will be described in detail one by one in the following embodiments.

[0024] Figure 1 1 shows a block diagram of a computing device 100 according to an embodiment of the present application. Components of the computing device 100 include, but are not limited to, a memory 110 and a processor 120. The processor 120 is connected to the memory 110 via a bus 130, and a database 150 is used to store data.

[0025] The computing device 100 also includes an access device 140 that enables the computing device 100 to communicate via one or more networks 160. Examples of these networks include a public switched telephone network (PSTN), a local area network (LAN), a wide area network (WAN), a personal area network (PAN), or a combination of communication networks such as the Internet. The access device 140 may include one or more of any type of network interface (e.g., a network interface card (NIC)), whether wired or wireless, such as an IEEE 802.11 wireless local area network (WLAN) wireless interface, a Worldwide Interoperability for Microwave Access (Wi-MAX) interface, an Ethernet interface, a universal serial bus (USB) interface, a cellular network interface, a Bluetooth interface, a near field communication (NFC) interface, and the like.

[0026] In one embodiment of the present application, the above components of the computing device 100 and Figure 1 Other components not shown in the figure may also be connected to each other, for example, via a bus. Figure 1 The computing device structure block diagram shown is for illustrative purposes only and is not intended to limit the scope of the present application. Those skilled in the art may add or replace other components as needed.

[0027] The computing device 100 may be any type of stationary or mobile computing device, including a mobile computer or mobile computing device (e.g., a tablet computer, a personal digital assistant, a laptop computer, a notebook computer, a netbook computer, etc.), a mobile phone (e.g., a smartphone), a wearable computing device (e.g., a smartwatch, smart glasses, etc.), or other types of mobile devices, or a stationary computing device such as a desktop computer or PC. The computing device 100 may also be a mobile or stationary server.

[0028] In this article, the terms used include:

[0029] Puppeteer: A Node.js library maintained by Google for controlling Chrome / Chromium browsers via the Chrome DevTools Protocol, typically running in headless mode. It can be used for scenarios such as automated testing, page screenshots, and PDF generation.

[0030] Canvas: HTML5 provides <canvas>The element and its 2D drawing API allow for dynamic drawing of graphics using JavaScript. It can render images in the browser or be used in a Node.js environment using a simulation library.

[0031] Node.js: An open-source, cross-platform JavaScript runtime environment that allows JavaScript code to run on various server-side platforms.

[0032] DOM-to-Image: A JavaScript library that renders and exports arbitrary DOM nodes as vector (SVG) or raster (PNG / JPEG) images. It's useful for saving page content as images in a browser.

[0033] HTMLCanvasElement API: The Canvas element interface provided by the browser, including methods such as toDataURL() and toBlob(), which are used to output Canvas drawing content as image data.

[0034] WeChat Mini Program: WeChat Mini Program is a lightweight application environment that runs on the WeChat platform and supports some web technologies (such as Canvas 2D). The "Mini Program side" in this article specifically refers to the drawing capabilities and limitations of the WeChat Mini Program side.

[0035] Figure 2 , a flowchart of a method for generating a poster across platforms provided by the present application is shown in FIG. , which runs on a server and includes steps 202 to 208 .

[0036] Step 202: Receive a poster generation request sent by the client.

[0037] In an embodiment of the present application, a server receives a poster generation request from a client. The client device can be in various forms, including but not limited to HTML5 applications, mobile applications, or mini-programs, and the poster generation request is sent to the server by calling a general poster generation interface.

[0038] The request includes a specific poster template identifier and dynamic content. The dynamic content may include the user's personal information (such as a nickname), event-related information, and a QR code. The server receives the poster generation request and then generates a personalized poster based on the specified template identifier and dynamic data.

[0039] Preferably, the poster generation request is added to a task queue for temporary storage and management of pending tasks. Furthermore, multiple Worker processes or threads are used on the server side to execute tasks in the task queue; the Worker's ability to asynchronously process tasks enables the system to handle multiple tasks simultaneously, improving concurrent processing capabilities. Thus, batch poster generation under high concurrency is achieved through task scheduling and concurrent headless browser instance management. The use of a headless browser cluster or serverless architecture allows for elastic expansion to meet the needs of multiple people generating posters simultaneously during major promotions.

[0040] Step 204: Create a headless browser instance, open a poster template in the headless browser instance, and fill in the poster template according to the poster generation request; the poster template is a page pre-generated by HTML and / or CSS elements.

[0041] In the embodiment of the present application, the server environment installs the latest Node.js version to ensure that the system can take advantage of the latest language features and performance optimizations. Node.js is applicable to various operating systems such as Windows, Mac, and Linux. The specific installation steps vary depending on the operating system.

[0042] Furthermore, Puppeteer is installed on the server, for example, by executing the npm install Puppeteer command on the server.

[0043] In one feasible implementation, when the server receives a poster generation request, it creates a headless browser instance through Puppeteer.

[0044] / / Start the Puppeteer browser instance

[0045] const browser=await puppeteer.launch({headless:true});

[0046] const page=await browser.newPage();

[0047] Furthermore, in the Puppeteer browser instance, the poster template is opened; optionally, a template page can be loaded according to the template identifier in the poster generation request. The poster template is a page pre-generated with HTML and / or CSS elements, which provides the layout and visual framework required for the poster.

[0048] / / Define the template URL (can be a local HTML file path or an external URL)

[0049] const templateUrl=`http: / / localhost:3000 / templates / ${templateId}.html`;

[0050] / / Navigate to the template page

[0051] await page.goto(templateUrl);

[0052] Furthermore, the dynamic material in the poster generation request is added to the poster template. Specifically, in a feasible implementation, a template engine is used to add the dynamic material to the poster template. For example, a Handlebars template is used.

[0053] <! --templates / poster.handlebars-->

[0054] <div class＝"poster">

[0055] <h1> {{title}}< / h1>

[0056] Created by:{{username}}

[0057] <img src＝"{{avatarUrl}}"alt＝"User Avatar">

[0058] Score:{{score}}

[0059]

[0060] In the Puppeteer browser instance on the server, add dynamic assets to the HTML location of the template tag through the template engine:

[0061] / / Read the template file

[0062] const templateSource=fs.readFileSync('. / templates / poster.handlebars','utf8');

[0063] / / Compile template

[0064] const template=hbs.compile(templateSource);

[0065] / / Generate the final HTML using templates and dynamic assets

[0066] const html=template(dynamicData);

[0067] In another feasible implementation, scripts such as JavaScript are directly used to dynamically fill in data after the page is loaded. This is suitable for scenarios where content needs to be updated in real time, such as instant rendering after an avatar is uploaded.

[0068] / / Get dynamically uploaded data from the client

[0069] const dynamicData={

[0070] title:'Congratulations! ',

[0071] avatarUrl:' / avatar.jpg',

[0072] };

[0073] / / Load the uploaded content via script in the Puppeteer browser instance

[0074] document.addEventListener('DOMContentLoaded',()=>{

[0075] document.getElementById('title').textContent=dynamicData.title;

[0076] document.getElementById('avatar').src=dynamicData.avatarUrl;

[0077] });

[0078] Pages generated on the server using a template engine are suitable for generating static content with a consistent style. Front-end scripts can provide dynamic loading and real-time updates, suitable for scenarios where immediate results are needed after user interaction. By combining these two approaches, developers can flexibly meet the dynamic rendering needs of different environments.

[0079] Step 206: Complete layer drawing and composite rendering through Canvas in the headless browser instance.

[0080] In this step, the Canvas-related functions of HTML5 are used to draw the web page and render the HTML elements in the poster template.

[0081] Specifically, in the Puppeteer headless browser instance, create a Canvas element, including:

[0082] Import functions from the canvas library in the script for creating canvases, loading images, and registering fonts:

[0083] import{createCanvas,loadImage,registerFont}from'canvas';

[0084] Initialize the Canvas instance and implement the following code in the script:

[0085] const canvas = createCanvas(width, height); / / Create a new Canvas object and set its width and height.

[0086] const ctx = canvas.getContext('2d'); / / Get the 2D drawing context of the canvas for drawing operations.

[0087] The created drawing context is further used to complete the drawing of each layer, including but not limited to:

[0088] Background image: Load and draw the background image of the entire poster area:

[0089] const bg=await loadImage(backgroundImage);

[0090] ctx.drawImage(bg,0,0,width,height);

[0091] User avatar: Use the user avatar to draw a circle and crop it at the specified position:

[0092] ctx.drawImage(img,x,y,radius*2,radius*2);

[0093] User nickname: Use the registered font to draw the user nickname in white:

[0094] ctx.font = '24px OpenSans';

[0095] ctx.fillStyle = '#ffffff';

[0096] ctx.fillText(username,100,75);

[0097] Product image: Load and draw the product image to the specified position of the poster:

[0098] const productImg=await loadImage(productImage);

[0099] ctx.drawImage(productImg,40,120,width-80,400);

[0100] Product title: Draw the product title after setting the font style and set the color to dark:

[0101] ctx.font='bold 28px OpenSans';

[0102] ctx.fillStyle = '#333';

[0103] ctx.fillText(productTitle,40,560);

[0104] QR code: Load and draw a QR code image in the lower right corner of the poster for easy scanning:

[0105] const qr=await loadImage(qrCode);

[0106] ctx.drawImage(qr,width-160,height-160,120,120);

[0107] Convert the completed Canvas instance to a PNG image buffer format so that it can be used for storage or further processing:

[0108] return canvas.toBuffer('image / png');

[0109] Step 208: After rendering is completed, the output interface of the browser instance or Canvas is called to obtain the poster image.

[0110] In this step, the output interface of the browser instance or Canvas is called to obtain the poster image and return it to the client.

[0111] In one possible implementation, Puppeteer's page.screenshot() method is used to take a snapshot of the current page. Regardless of whether the page content is static or dynamic, this method can capture the entire page or a specified area and output it as an image file.

[0112] In another feasible implementation, the export interface of Canvas, such as HTMLCanvasElement.toDataURL(), may be used to export the content of Canvas as base64-encoded image data.

[0113] Furthermore, the obtained poster image is saved to an image hosting service or a file server, and the image link is returned through a link or an interface, so that the client can display the poster and share it.

[0114] In the embodiments of the present application, in order to solve the various inconsistencies and limitations in the cross-platform poster generation in the prior art, a headless browser is used for rendering on the server side to ensure full support for HTML5, CSS3 and Canvas, and to ensure the consistency of the design display effects on various terminals; and combined with the template engine and Canvas API, dynamic data-driven poster generation is supported. Developers can use HTML / CSS design templates and automatically fill in different user and activity data through placeholders to achieve flexible layout without hard-coding layer coordinates. All clients call the generation service through a unified back-end interface, without the need for repeated implementation for each platform, and automatically select different templates or rendering parameters. This application does not depend on a specific platform and is applicable to all environments that support Chrome / Node.js, ensuring consistency of multi-terminal output.

[0115] Corresponding to the above method embodiment, the present application also provides an embodiment of a device for generating posters across platforms, such as Figure 3 As shown, the device includes:

[0116] A receiving unit, configured to receive a poster generation request sent by a client;

[0117] A generation unit, configured to create a headless browser instance, open a poster template in the headless browser instance, and fill the poster template according to the poster generation request; the poster template is a page pre-generated by HTML and / or CSS elements;

[0118] A drawing unit, configured to complete the drawing and composite rendering of layers through Canvas in the headless browser instance;

[0119] The output unit is used to call the output interface of the headless browser instance or Canvas after the rendering is completed to obtain the poster image.

[0120] The above is a schematic diagram of a cross-platform poster generation device according to this embodiment. It should be noted that the technical solution of the cross-platform poster generation device and the technical solution of the cross-platform poster generation method described above are based on the same concept. For details not described in detail in the technical solution of the cross-platform poster generation device, please refer to the description of the technical solution of the cross-platform poster generation method described above.

[0121] In one embodiment of the present application, a computing device is also provided, including a memory, a processor, and computer instructions stored in the memory and executable on the processor. When the processor executes the instructions, the steps of the method for generating posters across platforms are implemented.

[0122] The above is a schematic diagram of a computing device according to this embodiment. It should be noted that the technical solution of this computing device and the technical solution of the above-mentioned method for generating posters across multiple platforms are based on the same concept. For details not described in detail in the technical solution of the computing device, please refer to the description of the technical solution of the above-mentioned method for generating posters across multiple platforms.

[0123] An embodiment of the present application further provides a computer-readable storage medium storing computer instructions, which, when executed by a processor, implement the steps of the method for generating a poster across platforms as described above.

[0124] The above is a schematic diagram of a computer-readable storage medium according to this embodiment. It should be noted that the technical solution of this storage medium is based on the same concept as the technical solution of the above-mentioned method for generating posters across platforms. For details not described in detail in the technical solution of the storage medium, please refer to the description of the technical solution of the above-mentioned method for generating posters across platforms.

[0125] The foregoing description describes specific embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims can be performed in an order different from that described in the embodiments and still achieve the desired results. Furthermore, the processes depicted in the accompanying drawings do not necessarily require the specific order shown or the sequential order to achieve the desired results. In certain embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0126] The computer instructions include computer program code, which may be in source code form, object code form, executable file, or some intermediate form. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording medium, USB flash drive, mobile hard disk, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electric carrier signal, telecommunication signal, and software distribution medium, etc. It should be noted that the content contained in the computer-readable medium may be appropriately increased or decreased according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, computer-readable media do not include electric carrier signals and telecommunication signals.

[0127] It should be noted that for the aforementioned method embodiments, for ease of description, they are all expressed as a series of action combinations, but those skilled in the art should be aware that this application is not limited by the order of the actions described, because according to this application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in this specification are all preferred embodiments, and the actions and modules involved are not necessarily required by this application.

[0128] In the above embodiments, the description of each embodiment has its own focus. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.

[0129] The preferred embodiments of the present application disclosed above are intended only to help illustrate the present application. The optional embodiments do not describe all details in detail, nor do they limit the invention to the specific embodiments described. Obviously, many modifications and variations can be made based on the content of this application. This application selects and describes these embodiments in detail in order to better explain the principles and practical applications of this application, so that those skilled in the art can better understand and utilize this application. This application is limited only by the claims and their full scope and equivalents.< / canvas>

Claims

1. A method for generating posters across platforms, used for a server, characterized in that: include: Receive poster generation request sent by the client; Creating a headless browser instance, opening a poster template in the headless browser instance, and filling the poster template according to the poster generation request; The poster template is a page pre-generated by HTML and / or CSS elements; In the headless browser instance, layer drawing and composite rendering are completed through Canvas; After rendering is completed, the output interface of the headless browser instance or Canvas is called to obtain the poster image.

2. The method according to claim 1, wherein The poster generation request includes a target poster template identifier and dynamic material.

3. The method according to claim 2, wherein: Filling the poster template according to the poster generation request includes: In the headless browser instance, the dynamic material is added to the HTML location of the poster template tag through the template engine.

4. The method according to claim 2, wherein: Filling the poster template according to the poster generation request includes: Directly use the script in the headless browser instance to dynamically fill in the dynamic material after the page is loaded to complete the update of the poster content.

5. The method according to claim 1, wherein The drawing and composite rendering of layers completed through Canvas in the headless browser instance include: Initialize the Canvas instance using a script in the headless browser instance to obtain the drawing context of the canvas; The drawing context is used to complete the drawing of each layer.

6. The method according to claim 1, wherein Creating a headless browser instance includes: Create a headless browser instance via Puppeteer.

7. The method according to claim 1, wherein The method further includes: After receiving the poster generation request sent by the client, the poster generation request is added to a task queue; and multiple processes or threads are used to execute the poster generation tasks in the task queue.

8. A device for generating posters across platforms, characterized in that: include: A receiving unit, configured to receive a poster generation request sent by a client; A generating unit, configured to create a headless browser instance, open a poster template in the headless browser instance, and fill in the poster template according to the poster generation request; The poster template is a page pre-generated by HTML and / or CSS elements; A drawing unit, configured to complete the drawing and composite rendering of layers through Canvas in the headless browser instance; The output unit is used to call the output interface of the headless browser instance or Canvas after the rendering is completed to obtain the poster image.

9. A computing device comprising a memory, a processor, and computer instructions stored in the memory and executable on the processor, wherein: When the processor executes the instructions, the steps of the method according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium storing computer instructions, characterized in that: When the instruction is executed by a processor, the steps of the method according to any one of claims 1 to 7 are implemented.

Images