CN117056630A - Webpage layout picture display method, system, terminal equipment and medium - Google Patents
Webpage layout picture display method, system, terminal equipment and medium Download PDFInfo
- Publication number
- CN117056630A CN117056630A CN202311095464.0A CN202311095464A CN117056630A CN 117056630 A CN117056630 A CN 117056630A CN 202311095464 A CN202311095464 A CN 202311095464A CN 117056630 A CN117056630 A CN 117056630A
- Authority
- CN
- China
- Prior art keywords
- picture
- data
- structured
- target
- displaying
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 38
- 238000004590 computer program Methods 0.000 claims description 21
- 230000010354 integration Effects 0.000 claims description 6
- 239000000463 material Substances 0.000 claims description 5
- 238000012423 maintenance Methods 0.000 abstract description 9
- 230000004044 response Effects 0.000 abstract description 2
- 230000006870 function Effects 0.000 description 7
- 238000010586 diagram Methods 0.000 description 5
- 238000009877 rendering Methods 0.000 description 5
- BUGBHKTXTAQXES-UHFFFAOYSA-N Selenium Chemical compound [Se] BUGBHKTXTAQXES-UHFFFAOYSA-N 0.000 description 3
- 230000000694 effects Effects 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 229910052711 selenium Inorganic materials 0.000 description 3
- 239000011669 selenium Substances 0.000 description 3
- 230000009286 beneficial effect Effects 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000015572 biosynthetic process Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000003287 optical effect Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000003786 synthesis reaction Methods 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- General Engineering & Computer Science (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The application provides a display method, a system, terminal equipment and a medium of a webpage layout picture, which are applied to a browser, wherein the method comprises the following steps: generating picture drawing data in response to the drawing operation; sending the picture drawing data to a server through an http protocol so that the server generates a picture object, thereby generating a target picture through the generated picture object, and sending a URL path of the target picture to a browser through the http protocol; and displaying the target picture through the URL path. By implementing the method and the device, the picture object is generated through the server, so that the target picture is generated, the browser-supported library does not need to be additionally installed and configured, the difficulty of deployment and maintenance is reduced, and the workload of maintenance personnel is reduced.
Description
Technical Field
The present application relates to the field of web page layout, and in particular, to a method, a system, a terminal device, and a computer readable storage medium for displaying a web page layout picture.
Background
With the requirements on the attractive layout of the webpage, the requirements on the generation of pictures are increasing. Currently, web page layout pictures are generated based on a browser, such as Puppeteer, playwright or Selenium libraries, which require browser support in the process of generating pictures, and they generally provide a "headless" mode, i.e., a kernel of the browser is run without a visual interface, so as to realize the generation of pictures. Such "headless" modes typically require significant system resources, including but not limited to memory and processors, and may suffer from limited performance and scalability issues for large-scale concurrent generation of picture requirements; on the other hand, it has a dependency on external libraries, requiring steps of installation, configuration, etc., which can lead to complexity in deployment and maintenance.
Disclosure of Invention
The application provides a display method, a system, terminal equipment and a computer readable storage medium for web page layout pictures, which are used for solving the technical problem of how to reduce the complexity of deployment and maintenance.
In order to solve the above technical problems, an embodiment of the present application provides a method for displaying a web page layout picture, which is applied to a browser, and the generating method includes:
responding to drawing operation of generating a picture on a target, which acts on a preset drawing area, and generating corresponding picture drawing data; the picture drawing data comprises structured background data, structured text data and structured picture data;
sending the picture drawing data to a server through an http protocol, so that the server generates picture objects according to the structured background data, the structured text data and the structured picture data respectively, a target picture is generated through the generated picture objects, and a URL path of the target picture is sent to the browser through the http protocol;
and displaying the target picture through the URL path.
As a preferred solution, the server generates a picture object according to the structured background data, the structured text data, and the structured picture data, so as to generate a target picture through the generated picture object, including:
the server generates a first picture object corresponding to the structured background data, a second picture object corresponding to the structured text data and a third picture object corresponding to the structured picture data through a freetype package and an image package, and generates the target picture according to the first picture object, the second picture object and the third picture object.
Preferably, the generating the target picture according to the first picture object, the second picture object and the third picture object includes:
and circularly nesting the second picture object and the third picture object on the base map through a left margin field and a top margin field by taking the first picture object as the base map, so as to generate the target picture.
Preferably, the generating the target picture includes:
integrating each first picture object, each second picture object and each third picture which are nested on the base picture, storing an integration result to a specified path, and generating the target picture; wherein the specified path corresponds to the URL path.
Preferably, the structured background data includes background picture data and background color data; the structured text data is text data contained in the target picture; the structured picture data comprises pre-configured material picture data.
Correspondingly, the embodiment of the application also provides a display system of the webpage layout picture, which is applied to the browser, and the generation system comprises a drawing module, a generation module and a display module; wherein,
the drawing module is used for responding to drawing operation of a target generated picture acting on a preset drawing area and generating corresponding picture drawing data; the picture drawing data comprises structured background data, structured text data and structured picture data;
the generation module is used for sending the picture drawing data to a server through an http protocol, so that the server generates picture objects according to the structured background data, the structured text data and the structured picture data respectively, a target picture is generated through the generated picture objects, and a URL path of the target picture is sent to the browser through the http protocol;
and the display module is used for displaying the target picture through the URL path.
As a preferred solution, the server generates a picture object according to the structured background data, the structured text data, and the structured picture data, so as to generate a target picture through the generated picture object, including:
the server generates a first picture object corresponding to the structured background data, a second picture object corresponding to the structured text data and a third picture object corresponding to the structured picture data through a freetype package and an image package, and generates the target picture according to the first picture object, the second picture object and the third picture object.
Preferably, the generating, by the server, the target picture according to the first picture object, the second picture object, and the third picture object includes:
and the server uses the first picture object as a base map, and circularly nests the second picture object and the third picture object on the base map through a left margin field and a top margin field, so as to generate the target picture.
Preferably, the server generates the target picture, including:
the server integrates each first picture object, each second picture object and each third picture which are nested on the base map, stores an integration result in a specified path and generates the target picture; wherein the specified path corresponds to the URL path.
Preferably, the structured background data includes background picture data and background color data; the structured text data is text data contained in the target picture; the structured picture data comprises pre-configured material picture data.
Correspondingly, the embodiment of the application also provides a terminal device, which comprises a processor, a memory and a computer program stored in the memory and configured to be executed by the processor, wherein the display method of the webpage layout picture is realized when the processor executes the computer program.
Correspondingly, the embodiment of the application also provides a computer readable storage medium, which comprises a stored computer program, wherein the device where the computer readable storage medium is located is controlled to execute the method for displaying the webpage layout picture when the computer program runs.
Compared with the prior art, the embodiment of the application has the following beneficial effects:
the embodiment of the application provides a display method, a system, terminal equipment and a computer readable storage medium of a webpage layout picture, wherein the display method is applied to a browser and comprises the following steps: responding to drawing operation of generating a picture on a target, which acts on a preset drawing area, and generating corresponding picture drawing data; the picture drawing data comprises structured background data, structured text data and structured picture data; sending the picture drawing data to a server through an http protocol, so that the server generates picture objects according to the structured background data, the structured text data and the structured picture data respectively, a target picture is generated through the generated picture objects, and a URL path of the target picture is sent to the browser through the http protocol; and displaying the target picture through the URL path. According to the method and the device, the server side respectively generates the picture objects according to the structured background data, the structured text data and the structured picture data, so that the target picture is generated, and a browser-supported library such as Puppeteer, playwright, selenium is not required to be additionally installed and configured, so that the difficulty of deployment and maintenance is reduced, and the workload of maintenance personnel is reduced; in addition, compared with the technical scheme of generating, presenting and rendering pictures by means of browser kernels in the prior art, the display result diversity caused by differences among different browser kernels is avoided, and even different browsers can display consistent results; moreover, an example of a headless browser is not required to be started every time when the picture is generated, so that the starting time is shortened, the picture generation efficiency is improved, and meanwhile, the method has higher performance and better expansibility compared with the prior art when the large-scale concurrent picture generation requirement is met.
Drawings
Fig. 1: the application provides a flow chart of an embodiment of a method for displaying a webpage layout picture.
Fig. 2: the application provides an effect schematic diagram of a drawing operation of a webpage layout picture display method.
Fig. 3: the application provides a structural schematic diagram of an embodiment of a webpage layout picture display system.
Detailed Description
The following description of the embodiments of the present application will be made clearly and completely with reference to the accompanying drawings, in which it is apparent that the embodiments described are only some embodiments of the present application, but not all embodiments. All other embodiments, which can be made by those skilled in the art based on the embodiments of the application without making any inventive effort, are intended to be within the scope of the application.
Example 1
Referring to fig. 1, fig. 1 is a diagram illustrating a web page layout picture according to an embodiment of the present application, which is applied to a browser and includes steps S1 to S3; wherein,
step S1, responding to drawing operation of a target generated picture acting on a preset drawing area, and generating corresponding picture drawing data; the picture drawing data comprises structured background data, structured text data and structured picture data.
In this embodiment, the user accesses the web application, that is, the web page end, by using the browser, and performs drawing in the preset drawing area, that is, the drawing operation, the effect schematic diagram may refer to fig. 2, and fig. 2 is a schematic diagram of drawing a nameplate picture. It should be noted that the target generation picture is not limited to the drawing of the nameplate, and may be in the form of a poster or the like.
Further, the picture drawing data is picture related content data generated by a webpage end user when drawing a target generated picture, belongs to structural data, and can be data expressed in a fixed format.
In this embodiment, the picture drawing data includes structured background data, structured text data, and structured picture data. Preferably, the structured background data includes background picture data and background color data; the structured text data is text data contained in the target picture; the structured picture data comprises pre-configured material picture data.
As an example of this embodiment, structured background data may be expressed as "[ { Status:1, color:" #FF0000", bgImg:"/005. Png ", width:800, height:480, }".
Wherein "Status:1" represents 0 (background picture), 1 (background color); "Color:" # FF0000"" -represents the background Color of the picture; "BgImg:"/005. Png "" represents a picture background picture; "Width:800" means a picture Width 800, and "Height:80" means a picture Height 480.
The structured text data may be expressed as "[ { TextMode:1, text:" participant name ", width:" 800, height:80, font: "C: \Windows\fonts\simsunttc", size:72, color: "#fff196", align:1, vertical Align:1, left:0, top:181} ".
Wherein "TextMode:1" means 1 (line feed beyond width), 2 (line feed beyond width, reduced text font size); "Text:" participant name "", means drawing Text content; "Width:800" means a text box Width 800, and "Height:80" means a text box Height 80; "Font: font path" means the Font that rendered the text; "Color:" # fff196 "indicates font Color; ", align:1" means text alignment 1: centering 2: left alignment 3: right alignment; "Vertically aligned 1" means that the text is vertically aligned 1: centering 2: top alignment 3: low alignment, "Left:0" represents the text box Left margin and "Top:181" represents the text box Top margin.
The structured picture data may be expressed as "[ { Width:80, height:80, path:"/005. Png ", left:0, top:181 }".
Where "Width:800" represents picture Width 80 and "Height:80" represents picture Height 80; "Path:"/005. Png "" -means a picture Path; "Left:0" represents the Left margin of the picture, and "Top:181" represents the Top margin of the picture.
And S2, sending the picture drawing data to a server through an http protocol, so that the server generates picture objects according to the structured background data, the structured text data and the structured picture data respectively, thereby generating a target picture through the generated picture objects, and sending a URL path of the target picture to the browser through the http protocol.
In this embodiment, after the browser responds to and executes the drawing operation, the picture drawing data is sent to the server through an http protocol.
The server side generates picture objects according to the structured background data, the structured text data and the structured picture data respectively, so that a target picture is generated through the generated picture objects, and specifically:
the server generates a first picture object corresponding to the structured background data, a second picture object corresponding to the structured text data and a third picture object corresponding to the structured picture data through a freetype package and an image package, and generates the target picture according to the first picture object, the second picture object and the third picture object.
The FreeType package is a Golang package based on a FreeType font library and is used for realizing font rendering and text drawing. Which provides functions including, but not limited to, loading font files, setting font properties, rendering glyphs, rendering text, and the like. The package may be used to draw text on an image or canvas, including selecting fonts, setting font sizes, or setting font styles (e.g., bold, italics), and the like.
The image package is an image processing package in the Golang standard library, and provides functions of image creation, reading, writing, processing and the like. It supports common image formats including JPEG, PNG, or GIF, etc., and provides basic operations of the image such as cropping, scaling, rotation, adjusting brightness and contrast, etc. The package may be used to process and manipulate images, including reading image files, creating new images, modifying image properties, performing image synthesis, and the like. The above-mentioned freetype package and image package are only examples of the present embodiment, and are implemented on the server side without support of a browser, so that compared with the prior art, the deployment and maintenance complexity is further reduced without additionally configuring or installing a third party library.
Further, the generating the target picture according to the first picture object, the second picture object and the third picture object includes:
and circularly nesting the second picture object and the third picture object on the base picture (background picture) through a Left margin field (Left) and a Top margin field (Top) by taking the first picture object as the base picture. As an example of this embodiment, the nesting operation may use a draw function in a golang image package, and implement precise nesting through left margin data and top margin data.
Integrating each first picture object, each second picture object and each third picture which are nested on the base picture, storing an integration result to a specified path, and generating the target picture; wherein the specified path corresponds to the URL path.
And then sending the appointed URL path stored by the integration result to the browser.
And step S3, displaying the target picture through the URL path.
In this embodiment, the target picture may be displayed to the user through the URL path, that is, the user may implement a preview after drawing the target picture. Because operations such as nesting and the like in the picture generation process are executed at the server, the generated pictures can be disregarded from the kernel differences of different browsers, and the same display effect can be obtained no matter what browser implements the implementation mode of the application; in addition, when the picture is generated each time, a headless browser instance is not required to be started, longer starting time is avoided, and the picture generation efficiency can be effectively improved.
Correspondingly, referring to fig. 3, the embodiment of the application also provides a display system of the webpage layout picture, which is applied to a browser, and the generation system comprises a drawing module 101, a generation module 102 and a display module 103; wherein,
the drawing module 101 is configured to generate corresponding drawing data of a picture in response to a drawing operation on a target generated picture acting on a preset drawing area; the picture drawing data comprises structured background data, structured text data and structured picture data;
the generating module 102 is configured to send the picture drawing data to a server through an http protocol, so that the server generates picture objects according to the structured background data, the structured text data and the structured picture data, thereby generating a target picture through the generated picture objects, and send a URL path of the target picture to the browser through the http protocol;
the display module 103 is configured to display the target picture through the URL path.
As a preferred solution, the server generates a picture object according to the structured background data, the structured text data, and the structured picture data, so as to generate a target picture through the generated picture object, including:
the server generates a first picture object corresponding to the structured background data, a second picture object corresponding to the structured text data and a third picture object corresponding to the structured picture data through a freetype package and an image package, and generates the target picture according to the first picture object, the second picture object and the third picture object.
Preferably, the generating, by the server, the target picture according to the first picture object, the second picture object, and the third picture object includes:
and the server uses the first picture object as a base map, and circularly nests the second picture object and the third picture object on the base map through a left margin field and a top margin field, so as to generate the target picture.
Preferably, the server generates the target picture, including:
the server integrates each first picture object, each second picture object and each third picture which are nested on the base map, stores an integration result in a specified path and generates the target picture; wherein the specified path corresponds to the URL path.
Preferably, the structured background data includes background picture data and background color data; the structured text data is text data contained in the target picture; the structured picture data comprises pre-configured material picture data.
Correspondingly, the embodiment of the application also provides a terminal device, which comprises a processor, a memory and a computer program stored in the memory and configured to be executed by the processor, wherein the display method of the webpage layout picture is realized when the processor executes the computer program.
The processor may be a central processing unit (Central Processing Unit, CPU), other general purpose processors, digital signal processors (Digital Signal Processor, DSP), application specific integrated circuits (Application Specific Integrated Circuit, ASIC), off-the-shelf programmable gate arrays (Field-Programmable Gate Array, FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, or the like. The general purpose processor may be a microprocessor or the processor may be any conventional processor or the like, which is a control center of the terminal, connecting various parts of the entire terminal using various interfaces and lines.
The memory may be used to store the computer program, and the processor may implement various functions of the terminal by running or executing the computer program stored in the memory and invoking data stored in the memory. The memory may mainly include a storage program area and a storage data area, wherein the storage program area may store an operating system, an application program (such as a sound playing function, an image playing function, etc.) required for at least one function, and the like; the storage data area may store data (such as audio data, phonebook, etc.) created according to the use of the handset, etc. In addition, the memory may include high-speed random access memory, and may also include non-volatile memory, such as a hard disk, memory, plug-in hard disk, smart Media Card (SMC), secure Digital (SD) Card, flash Card (Flash Card), at least one disk storage device, flash memory device, or other volatile solid-state storage device.
Correspondingly, the embodiment of the application also provides a computer readable storage medium, which comprises a stored computer program, wherein the device where the computer readable storage medium is located is controlled to execute the method for displaying the webpage layout picture when the computer program runs.
The module integrated by the display system of the web page layout picture can be stored in a computer readable storage medium if the module is realized in the form of a software functional unit and sold or used as a separate product. Based on such understanding, the present application may implement all or part of the flow of the method of the above embodiment, or may be implemented by a computer program to instruct related hardware, where the computer program may be stored in a computer readable storage medium, and when the computer program is executed by a processor, the computer program may implement the steps of each of the method embodiments described above. Wherein the computer program comprises computer program code which may be in source code form, object code form, executable file or some intermediate form etc. The computer readable medium may include: any entity or device capable of carrying the computer program code, a recording medium, a U disk, a removable hard disk, a magnetic disk, an optical disk, a computer Memory, a Read-Only Memory (ROM), a random access Memory (RAM, random Access Memory), an electrical carrier signal, a telecommunications signal, a software distribution medium, and so forth.
Compared with the prior art, the embodiment of the application has the following beneficial effects:
the embodiment of the application provides a display method, a system, terminal equipment and a computer readable storage medium of a webpage layout picture, wherein the display method is applied to a browser and comprises the following steps: responding to drawing operation of generating a picture on a target, which acts on a preset drawing area, and generating corresponding picture drawing data; the picture drawing data comprises structured background data, structured text data and structured picture data; sending the picture drawing data to a server through an http protocol, so that the server generates picture objects according to the structured background data, the structured text data and the structured picture data respectively, a target picture is generated through the generated picture objects, and a URL path of the target picture is sent to the browser through the http protocol; and displaying the target picture through the URL path. According to the method and the device, the server side respectively generates the picture objects according to the structured background data, the structured text data and the structured picture data, so that the target picture is generated, and a browser-supported library such as Puppeteer, playwright, selenium is not required to be additionally installed and configured, so that the difficulty of deployment and maintenance is reduced, and the workload of maintenance personnel is reduced; in addition, compared with the technical scheme of generating, presenting and rendering pictures by means of browser kernels in the prior art, the display result diversity caused by differences among different browser kernels is avoided, and even different browsers can display consistent results; moreover, an example of a headless browser is not required to be started every time when the picture is generated, so that the starting time is shortened, the picture generation efficiency is improved, and meanwhile, the method has higher performance and better expansibility compared with the prior art when the large-scale concurrent picture generation requirement is met.
The foregoing embodiments have been provided for the purpose of illustrating the general principles of the present application, and are not to be construed as limiting the scope of the application. It should be noted that any modifications, equivalent substitutions, improvements, etc. made by those skilled in the art without departing from the spirit and principles of the present application are intended to be included in the scope of the present application.
Claims (10)
1. The method for displaying the webpage layout picture is characterized by being applied to a browser, and the generating method comprises the following steps:
responding to drawing operation of generating a picture on a target, which acts on a preset drawing area, and generating corresponding picture drawing data; the picture drawing data comprises structured background data, structured text data and structured picture data;
sending the picture drawing data to a server through an http protocol, so that the server generates picture objects according to the structured background data, the structured text data and the structured picture data respectively, a target picture is generated through the generated picture objects, and a URL path of the target picture is sent to the browser through the http protocol;
and displaying the target picture through the URL path.
2. The method for displaying a web page layout picture according to claim 1, wherein the server generates a picture object according to the structured background data, the structured text data, and the structured picture data, respectively, so as to generate a target picture through the generated picture object, and the method comprises:
the server generates a first picture object corresponding to the structured background data, a second picture object corresponding to the structured text data and a third picture object corresponding to the structured picture data through a freetype package and an image package, and generates the target picture according to the first picture object, the second picture object and the third picture object.
3. The method for displaying a web page layout picture according to claim 2, wherein the generating the target picture according to the first picture object, the second picture object, and the third picture object comprises:
and circularly nesting the second picture object and the third picture object on the base map through a left margin field and a top margin field by taking the first picture object as the base map, so as to generate the target picture.
4. A method of displaying a web page layout picture according to claim 3, wherein said generating said target picture comprises:
integrating each first picture object, each second picture object and each third picture which are nested on the base picture, storing an integration result to a specified path, and generating the target picture; wherein the specified path corresponds to the URL path.
5. The method for displaying a web page layout picture according to claim 1, wherein the structured background data includes background picture data and background color data; the structured text data is text data contained in the target picture; the structured picture data comprises pre-configured material picture data.
6. The display system of the webpage layout picture is characterized by being applied to a browser, and the generation system comprises a drawing module, a generation module and a display module; wherein,
the drawing module is used for responding to drawing operation of a target generated picture acting on a preset drawing area and generating corresponding picture drawing data; the picture drawing data comprises structured background data, structured text data and structured picture data;
the generation module is used for sending the picture drawing data to a server through an http protocol, so that the server generates picture objects according to the structured background data, the structured text data and the structured picture data respectively, a target picture is generated through the generated picture objects, and a URL path of the target picture is sent to the browser through the http protocol;
and the display module is used for displaying the target picture through the URL path.
7. The system for displaying a web page layout picture according to claim 6, wherein the server generates a picture object according to the structured background data, the structured text data, and the structured picture data, respectively, so as to generate a target picture by using the generated picture object, and the method comprises:
the server generates a first picture object corresponding to the structured background data, a second picture object corresponding to the structured text data and a third picture object corresponding to the structured picture data through a freetype package and an image package, and generates the target picture according to the first picture object, the second picture object and the third picture object.
8. The system for displaying a web page layout picture according to claim 7, wherein the server generates the target picture according to the first picture object, the second picture object, and the third picture object, comprising:
and the server uses the first picture object as a base map, and circularly nests the second picture object and the third picture object on the base map through a left margin field and a top margin field, so as to generate the target picture.
9. A terminal device comprising a processor, a memory and a computer program stored in the memory and configured to be executed by the processor, the processor implementing a method of displaying a web page layout picture according to any one of claims 1 to 5 when the computer program is executed.
10. A computer readable storage medium, wherein the computer readable storage medium comprises a stored computer program, and the computer program when executed controls a device in which the computer readable storage medium is located to execute a method for displaying a web page layout picture according to any one of claims 1 to 5.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311095464.0A CN117056630A (en) | 2023-08-28 | 2023-08-28 | Webpage layout picture display method, system, terminal equipment and medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311095464.0A CN117056630A (en) | 2023-08-28 | 2023-08-28 | Webpage layout picture display method, system, terminal equipment and medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117056630A true CN117056630A (en) | 2023-11-14 |
Family
ID=88657035
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311095464.0A Pending CN117056630A (en) | 2023-08-28 | 2023-08-28 | Webpage layout picture display method, system, terminal equipment and medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117056630A (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111915705A (en) * | 2019-05-07 | 2020-11-10 | 百度在线网络技术（北京）有限公司 | Picture visual editing method, device, equipment and medium |
| CN112257406A (en) * | 2020-10-23 | 2021-01-22 | 上海趣蕴网络科技有限公司 | Content cover generator and method based on web front end |
| CN113031950A (en) * | 2021-04-29 | 2021-06-25 | 北京字节跳动网络技术有限公司 | Picture generation method, device, equipment and medium |
| CN113221043A (en) * | 2021-05-31 | 2021-08-06 | 口碑(上海)信息技术有限公司 | Picture generation method and device, computer equipment and computer readable storage medium |
| CN114780888A (en) * | 2022-04-29 | 2022-07-22 | 深圳市欧瑞博科技股份有限公司 | Webpage picture generation method and system, electronic equipment and storage medium |
| CN115272530A (en) * | 2022-06-09 | 2022-11-01 | 知学云(北京)科技股份有限公司 | Intelligent dynamic cover synthesis method and system for enterprise online education |
| CN115797508A (en) * | 2022-11-17 | 2023-03-14 | 深圳市迅雷网文化有限公司 | Real-time dynamic animation generation method, device, equipment and storage medium |
| CN115982502A (en) * | 2023-01-18 | 2023-04-18 | 上海壹佰米网络科技有限公司 | Image-text synthesis method and device |
-
2023
- 2023-08-28 CN CN202311095464.0A patent/CN117056630A/en active Pending
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111915705A (en) * | 2019-05-07 | 2020-11-10 | 百度在线网络技术（北京）有限公司 | Picture visual editing method, device, equipment and medium |
| CN112257406A (en) * | 2020-10-23 | 2021-01-22 | 上海趣蕴网络科技有限公司 | Content cover generator and method based on web front end |
| CN113031950A (en) * | 2021-04-29 | 2021-06-25 | 北京字节跳动网络技术有限公司 | Picture generation method, device, equipment and medium |
| CN113221043A (en) * | 2021-05-31 | 2021-08-06 | 口碑(上海)信息技术有限公司 | Picture generation method and device, computer equipment and computer readable storage medium |
| CN114780888A (en) * | 2022-04-29 | 2022-07-22 | 深圳市欧瑞博科技股份有限公司 | Webpage picture generation method and system, electronic equipment and storage medium |
| CN115272530A (en) * | 2022-06-09 | 2022-11-01 | 知学云(北京)科技股份有限公司 | Intelligent dynamic cover synthesis method and system for enterprise online education |
| CN115797508A (en) * | 2022-11-17 | 2023-03-14 | 深圳市迅雷网文化有限公司 | Real-time dynamic animation generation method, device, equipment and storage medium |
| CN115982502A (en) * | 2023-01-18 | 2023-04-18 | 上海壹佰米网络科技有限公司 | Image-text synthesis method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11600301B2 (en) | Method and device of editing a video | |
| US20210240913A1 (en) | Font rendering method and apparatus, and computer-readable storage medium | |
| JP5290487B2 (en) | System and method for digital document processing | |
| JP5306429B2 (en) | Method for digital document processing | |
| CN107895394B (en) | Animation special effect implementation method and device, terminal equipment and storage medium | |
| US8682964B1 (en) | Progressively loading network content | |
| US9256919B2 (en) | Systems and methods for image processing using a resizing template | |
| CN108320319B (en) | Cartoon synthesis method, device and equipment and computer readable storage medium | |
| JP2014524623A (en) | Template file processing method and apparatus | |
| JP2014524623A5 (en) | ||
| US9727293B1 (en) | Method and apparatus for paginating electronic documents | |
| US20170091152A1 (en) | Generating grid layouts with mutable columns | |
| CN109783792A (en) | Picture and text composition method and device | |
| CN117056630A (en) | Webpage layout picture display method, system, terminal equipment and medium | |
| CN112995711A (en) | Method and system for processing and synthesizing framing and picture of web front-end video | |
| CN112559109A (en) | Method, system, device and medium for generating display interface based on component library | |
| CN115474074B (en) | Video background replacement method, device, computing equipment and storage medium | |
| CN116663496A (en) | SVG technology-based browser small font display component, display method and creation method | |
| CN116578795A (en) | Webpage generation method and device, storage medium and electronic equipment | |
| CN114697555B (en) | Image processing method, device, equipment and storage medium | |
| CN110569460A (en) | Push information display method and device and storage medium | |
| CN115988285A (en) | Video creation method, device, equipment and medium | |
| CN116010736A (en) | Vector icon processing method, device, equipment and storage medium | |
| CN112348928A (en) | Animation synthesis method, animation synthesis device, electronic device, and medium | |
| CN114117302A (en) | Data conversion method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination |