CN114780888A - Webpage picture generation method and system, electronic equipment and storage medium - Google Patents
Webpage picture generation method and system, electronic equipment and storage medium Download PDFInfo
- Publication number
- CN114780888A CN114780888A CN202210476158.0A CN202210476158A CN114780888A CN 114780888 A CN114780888 A CN 114780888A CN 202210476158 A CN202210476158 A CN 202210476158A CN 114780888 A CN114780888 A CN 114780888A
- Authority
- CN
- China
- Prior art keywords
- design
- picture
- generating
- server
- client
- 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 64
- 238000013461 design Methods 0.000 claims abstract description 348
- 238000006243 chemical reaction Methods 0.000 claims description 8
- 230000008569 process Effects 0.000 abstract description 20
- 230000006870 function Effects 0.000 description 13
- 238000010586 diagram Methods 0.000 description 10
- 238000012545 processing Methods 0.000 description 7
- 238000004891 communication Methods 0.000 description 4
- 230000000694 effects Effects 0.000 description 4
- 238000009877 rendering Methods 0.000 description 4
- 238000004590 computer program Methods 0.000 description 3
- 230000004044 response Effects 0.000 description 3
- 230000008878 coupling Effects 0.000 description 2
- 238000010168 coupling process Methods 0.000 description 2
- 238000005859 coupling reaction Methods 0.000 description 2
- 238000005034 decoration Methods 0.000 description 2
- 238000011160 research Methods 0.000 description 2
- 238000012546 transfer Methods 0.000 description 2
- BUGBHKTXTAQXES-UHFFFAOYSA-N Selenium Chemical compound [Se] BUGBHKTXTAQXES-UHFFFAOYSA-N 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 238000013500 data storage Methods 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 230000003993 interaction Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000003973 paint Substances 0.000 description 1
- 229910052711 selenium Inorganic materials 0.000 description 1
- 239000011669 selenium Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Images
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/9574—Browsing optimisation, e.g. caching or content distillation of access to content, e.g. by caching
-
- 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/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Landscapes
- Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Theoretical Computer Science (AREA)
- Data Mining & Analysis (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Information Transfer Between Computers (AREA)
Abstract
The embodiment of the application discloses a webpage picture generating method, a webpage picture generating system, electronic equipment and a storage medium. The technical scheme provided by the embodiment of the application is applied to a server and used for generating a request by receiving the picture sent by the client; the picture generation request comprises design data of a design area in a design interface; and then generating a design drawing page according to the design data, and finally generating a design picture based on the design drawing page. Therefore, the design picture is generated by the server, the resource occupation of the client caused by the generation of the design picture can be effectively reduced, and meanwhile, the user does not need to wait for the generation of the picture in the process of generating the design picture, so that the waiting time of the user is reduced.
Description
Technical Field
The present application relates to the field of image processing technologies, and in particular, to a method, a system, an electronic device, and a storage medium for generating a web page image.
Background
With the continuous popularization of the internet, the life of people becomes more and more convenient. For example: people can select the furniture of heart appearance to simulate the fitment in the webpage of browser according to house type of oneself, then will like the fitment effect picture save to can purchase corresponding furniture according to the effect picture of saving afterwards and decorate the house, avoid directly purchasing the condition that the furniture style of purchasing dislikes after alone.
However, in the research and practice process of the related art, the inventors of the present application found that when a picture is generated in a web page, if too many elements in the picture occupy a large amount of memory resources of a browser, the picture generation speed is slow, and even the browser is crashed. Therefore, how to reduce the occupation of browser resources in the process of generating pictures is a problem that needs to be solved urgently at present.
Disclosure of Invention
In view of the above problems, the present application provides a method, a system, an electronic device, and a storage medium for generating a web page picture, which can effectively reduce the occupation of resources in a browser in the picture generation process.
In order to solve the above technical problem, an embodiment of the present application provides the following technical solutions:
in a first aspect, an embodiment of the present application provides a method for generating a web page picture, which is applied to a server, and the method includes: receiving a picture generation request sent by a client; the picture generation request comprises design data of a design area in a design interface; generating a design drawing page according to the design data; a design picture is generated based on the design drawing page.
In some embodiments, generating a plan view page from the design data includes:
starting a third-party library according to the picture generation request;
starting a browser kernel through a third-party library;
and generating a design drawing page according to the design data based on the browser kernel.
In some embodiments, generating a blueprint page from the design data based on the browser kernel includes:
loading a preset font through a browser kernel;
and generating a design drawing page according to a preset font and design data based on the browser kernel, wherein the text content in the design drawing page is displayed in the preset font.
In some embodiments, generating the design picture based on the design drawing page comprises:
and converting the design picture page into a design picture according to a preset picture conversion mode.
In some embodiments, the method for generating a webpage picture further includes:
and saving the design picture to a cloud server.
In a second aspect, an embodiment of the present application provides a method for generating a web page picture, which is applied to a client, and the method includes:
responding to picture generation operation on a design interface, and acquiring design data of a design area in the design interface;
generating a picture generation request based on the design data;
and sending the picture generation request to the server so that the server generates a design picture corresponding to the design data according to the picture generation request.
In some embodiments, the method for generating a web page picture further includes:
responding to the picture acquisition operation of the design interface, and acquiring a storage address of a target design picture corresponding to the picture acquisition operation from a server;
and acquiring a target design picture from the cloud server according to the stored address.
In a third aspect, an embodiment of the present application provides a web page picture generating system, where the system includes a client and a server:
the client is used for responding to the picture generation operation on the design interface and acquiring the design data of the design area in the design interface;
the client is also used for generating a picture generation request based on the design data;
the client is also used for sending the picture generation request to the server so that the server generates a design picture corresponding to the design data according to the picture generation request;
the server is used for receiving a picture generation request sent by the client; the picture generation request comprises design data of a design area in a design interface;
the server is also used for generating a design drawing page according to the design data;
the server is also used for generating a design picture based on the design picture page.
In a fourth aspect, an embodiment of the present application provides an electronic device, including: one or more processors, memory, and one or more applications. Wherein the one or more applications are stored in the memory and configured to be executed by the one or more processors, the one or more programs configured to perform the web page picture generation method described above.
In a fifth aspect, an embodiment of the present application provides a computer-readable storage medium, where a program code is stored in the computer-readable storage medium, and the program code may be called by a processor to execute the method for generating a web page picture.
The technical scheme provided by the application is applied to a server side, and the request is generated by receiving the picture sent by the client side; the picture generation request comprises design data of a design area in a design interface; and then generating a design drawing page according to the design data, and finally generating a design picture based on the design drawing page. Therefore, the design picture is generated by the server side, the resource occupation of the client side caused by the generation of the design picture can be effectively reduced, meanwhile, the user does not need to wait for the generation of the picture in the process of generating the design picture, and the waiting time of the user is reduced.
Drawings
In order to more clearly illustrate the technical solutions in the embodiments of the present application, the drawings needed to be used in the description of the embodiments are briefly introduced below, and it is obvious that the drawings in the following description are only some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts.
Fig. 1 is a schematic structural diagram of a web page picture generating system provided in an embodiment of the present application.
Fig. 2 is a schematic flowchart of a method for generating a web page picture according to an embodiment of the present disclosure.
Fig. 3 is an execution flowchart of a web page picture generation method provided in the embodiment of the present application.
Fig. 4 is a schematic flowchart of another method for generating a web page picture according to an embodiment of the present application.
Fig. 5 is a schematic structural diagram of a web page picture generating device according to an embodiment of the present application.
Fig. 6 is a schematic structural diagram of another web page picture generating device according to an embodiment of the present application.
Fig. 7 is a schematic structural diagram of an electronic device according to an embodiment of the present application.
Fig. 8 is a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present application.
Detailed Description
The technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only a part of the embodiments of the present application, and not all of the embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.
With the continuous popularization of the internet, the life of people becomes more convenient. In the prior art, people can design pictures on line through the internet and store the designed pictures for subsequent viewing. For example: the furniture of the heart instrument can be selected in the webpage of the browser to simulate decoration according to house types of the house, and then the favorite decoration effect graph is stored, so that corresponding furniture can be purchased according to the stored effect graph to decorate the house, and the condition that the purchased furniture style is disliked after direct independent purchase is avoided.
However, in the research and practice process of the related art, the inventors of the present application found that, when the number of elements in the picture is too large, the picture generation process occupies a large amount of memory resources of the browser, so that the picture generation speed is slow, and even the browser is crashed, so that the user experience is not good. Therefore, how to reduce the occupation of browser resources in the process of generating pictures is a problem that needs to be solved urgently at present.
Therefore, in order to solve the above problem, an embodiment of the present application provides a method for generating a web page picture, which is applied to a server and receives a picture generation request sent by a client; the picture generation request comprises design data of a design area in a design interface; and then generating a design drawing page according to the design data, and finally generating a design picture based on the design drawing page. Therefore, the process of generating the design picture is transferred to the server side to be executed, so that the occupation of resources in the client side due to the generation of the design picture is effectively reduced, and meanwhile, a user does not need to wait for the generation of the picture in the process of generating the design picture, and the waiting time of the user is reduced.
The following describes an application environment of the method for generating a web page picture according to the embodiment of the present invention.
Referring to fig. 1, fig. 1 illustrates a web page image generating system 100 according to an embodiment of the present application, which includes a client 110 and a server 120.
In some embodiments, the client may be an application running on a browser of the terminal. The terminal can be, for example, a mobile phone, a tablet computer, a notebook computer, a desktop computer, an intelligent television, an intelligent projector, an intelligent control panel, and the like. The client 110 may be configured to respond to a picture generation operation on the design interface and obtain design data of a design area in the design interface; the client 110 is also used to generate a picture generation request based on the design data; the client 110 is further configured to send a picture generation request to the server 120, so that the server 120 generates a design picture corresponding to the design data according to the picture generation request.
In some embodiments, a server may refer to an individual server or a server cluster. The server 120 may be configured to receive a picture generation request sent by the client 110; the picture generation request comprises design data of a design area in a design interface; the server 120 is further configured to generate a design drawing page according to the design data; the server 120 is also used to generate design pictures based on the design drawing page.
In some embodiments, client terminal 110 and server terminal 120 may communicate with each other via a Network, which is typically the internet, but may be any Network including, but not limited to, a Local Area Network (LAN), a Metropolitan Area Network (MAN), a Wide Area Network (WAN), a mobile, wireline or wireless Network, a private Network, or any combination of virtual private networks. In some embodiments, the communication transmission between the client 110 and the server 120 may also be performed through a specific communication protocol, which includes but is not limited to BLE (Bluetooth low energy) protocol, WLAN (Wireless Local Area Network) protocol, Bluetooth protocol, ZigBee (ZigBee) protocol, or Wi-Fi (Wireless Fidelity) protocol.
It should be noted that the scene schematic diagram of the web page image generating system shown in fig. 1 is only an example, and the web page image generating system and the scene described in the embodiment of the present application are for more clearly illustrating the technical solution of the embodiment of the present application, and do not form a limitation on the technical solution provided in the embodiment of the present application.
The following is a detailed description by way of specific examples.
Referring to fig. 2, fig. 2 is a schematic flowchart illustrating a method for generating a web page picture according to an embodiment of the present application, where the method is applied to a server. The web page picture generating method may include steps S210 to S230.
In step S110, a picture generation request sent by the client is received.
In the embodiment of the application, after receiving a picture generation request sent by a client, a server generates a design picture according to data carried in the picture generation request. The picture generation request may include design data of a design area in the design interface.
In some embodiments, the design interface may refer to a display interface on a terminal, the design area may also refer to all or part of an area in the design interface for a user to perform layout design, and the design data refers to data, such as patterns, characters, numbers, and the like, finally formed in the design area according to the layout design of the user.
In step S120, a plan view page is generated from the design data.
In the embodiment of the application, after receiving a picture generation request sent by a client, a server generates a design drawing page according to design data carried in the picture generation request. The design drawing page is a page formed according to the design data, and the page includes design content (i.e., design data) in the design area of the client.
In some embodiments, after receiving the design data, the server inputs the design data into an HTML (HyperText Markup Language) parser of the server to generate a DOM (Document Object Model) tree, then parses the CSS tag through a cssing Style Sheets (cssos) interpreter to generate a CSSOM (CSSOM Object Model) tree, merges the DOM and the CSSOM into a rendering tree, performs layout processing on each node of the rendering tree, determines a display position of the CSSOM on a display interface, and finally traverses each node of the rendering tree and performs drawing to generate a design drawing page.
In some embodiments, after receiving a picture generation request sent by a client, a server may start a third-party library, then start a browser kernel through the third-party library, and finally generate a design drawing page from design data carried in the picture birth request through the browser kernel.
In some embodiments, the third-party library may be, for example, a puppeter library, a playright library, a Selenium library, etc., and the server may start the third-party library by calling an API (Application Programming Interface); the browser kernel may be, for example, Trident, Gecko, Webkit, etc. It can be understood that, because the characteristics of each third party library and the browser kernel are different, the specifically used third party library and browser kernel may be selected according to actual needs, which is not limited in the embodiment of the present application.
In some embodiments, the text content (text, numbers, english, etc.) in the blueprint page may be displayed in a preset font in the blueprint page. Specifically, after the server side starts the browser kernel through the third-party library, a preset font can be loaded through the browser kernel, then a design drawing page is generated according to the preset font and design data carried in the received picture generation request, that is, text content in the design drawing page formed according to the design data is displayed in the preset font.
In some embodiments, the preset font may be a default font (e.g., a regular font, a song style font, etc.) of the client, or may be a font manually set by the user (e.g., an clerical script, a cursive script, etc.), and the preset font may be specifically set according to an actual need, which is not limited in this embodiment of the present application.
In step S130, a design picture is generated based on the design drawing page.
In the embodiment of the present application, the design picture refers to a picture corresponding to design content in the client design area. And after the server generates a design drawing page, generating a design picture according to the design drawing page. Specifically, the server converts the generated design drawing page into a design drawing according to a preset picture conversion mode.
The Format of the design picture may be, for example, GIF (Graphics Interchange Format), JPG (Joint Photographic experts Group Format), PNG (Portable Network Graphics Format), and the like, and may be specifically set according to actual needs.
Optionally, the format of the generated design picture may be a preset default format, for example: the format of the design picture generated by default is the PNG format. Optionally, the format of the generated design picture may also be a format selected by the user according to actual needs, for example: the generated design picture can be in PNG and JPG formats, the format required by the user is in the PNG format, and therefore the design picture in the PNG format can be selected to be generated.
Further, in some embodiments, after selecting a format of a design picture that needs to be generated, the user may package the design picture as a preset picture format into the picture generation request, that is, the preset picture format is carried in the picture generation request. Specifically, the client generates a picture generation request according to design data of a design area in a design interface and a preset picture format selected by a user, sends the picture generation request to the server, and the server generates a design picture page according to the design data carried in the picture generation request after receiving the picture generation request and converts the design picture page into a design picture in the preset picture format according to the preset picture format carried in the picture generation request.
In some embodiments, the preset image conversion manner may be to generate the design image through a graphics function (e.g., an Imagick function in PHP, a paint function in JAVA, etc.), that is, the server may convert the content in the design image page into the image through the written graphics function. The graph function may be a self-defined function or a packaged function. It can be understood that the graph function may be selected according to actual needs, which is not limited in this embodiment of the present application.
In some embodiments, the preset image conversion mode may also be to convert the design drawing page into a document and then convert the document into the design drawing. The Format of the Document may be PDF (Portable Document Format), Word (Microsoft Office Word, binary file Format), or the like, for example. Illustratively, after the server generates the design drawing page, the design drawing page is first converted into the PDF document, and then the PDF document is converted into the design picture. It can be understood that the document format may be selected according to actual needs, and the embodiment of the present application does not limit this.
In some embodiments, the preset image conversion manner may also be a screenshot of a design drawing page, so as to generate a design image. The design drawing page can be subjected to screenshot by using a screenshot plug-in, which may be, for example, PhantomJS, html2canvas, SlimerJS, or the like. It can be understood that the type of the screenshot plug-in may be selected according to actual needs, which is not limited in this embodiment of the present application.
Optionally, the screenshot plug-in may be an external plug-in, and the server may call the screenshot plug-in through the API to realize screenshot of the design drawing page, so as to obtain the design drawing. Optionally, the screenshot plug-in may also be a built-in plug-in of the server, and after the design drawing page is generated, the screenshot of the design drawing page is realized according to the built-in screenshot plug-in, so as to obtain the design drawing.
In some embodiments, after the design picture is generated according to the design picture page, the generated design picture may be further optimized, for example, to improve the resolution of the design picture, adjust the picture size of the design picture, and the like. Furthermore, after the design picture is generated, the watermark can be added to the design picture, so that the picture is prevented from being stolen by other people and the rights and interests of the user are prevented from being infringed.
Alternatively, the generated design drawing page may be entirely converted into a design drawing, that is, the design drawing page is entirely converted into a design drawing. Optionally, a specific area in the design drawing page may be converted into the design picture, and the specific area at least includes design content in the design drawing page corresponding to the design area in the design interface.
In some embodiments, after the server generates the design picture according to the design picture page, the server may send the design picture to the cloud server, so that the design picture is stored in the cloud server. Further, after receiving and storing the design picture, the cloud server can send the storage result to the server, and the server sends the received storage result to the client, so that the user can determine whether the design picture is successfully stored according to the storage result received by the client.
The storage result sent by the cloud server may carry a storage address of the design picture in the cloud server, so that a user can obtain the successfully stored design picture from the cloud server through the storage address carried in the storage result received by the client.
In some embodiments, the picture generation request sent by the client to the server may further carry a client identifier, after the server generates the design picture, the server may send a picture storage request including the design picture and the client identifier to the cloud server, and after receiving the picture storage request, the cloud server stores the design picture carried in the picture storage request and sends a storage result of the design picture to the corresponding client according to the client identifier carried in the picture storage request.
Specifically, referring to fig. 3, after determining design data of a design area, a client generates a picture generation request according to the design data, sends the picture generation request to a server, the server receives the picture generation request, then starts a third party library, starts a browser kernel by using the third party library, then generates a design drawing page by using the browser kernel for the design data in the picture generation request, generates a design picture according to the design drawing page, sends the generated design picture to a cloud server for storage, and then the client can obtain a successfully stored design picture from the cloud server, for example, can send the request to the server, and the server returns a corresponding design picture according to the request of the client.
As can be seen from the above, in the embodiment of the present application, a picture generation request sent by a client is received; the picture generation request comprises design data of a design area in a design interface; and then generating a design drawing page according to the design data, and finally generating a design picture based on the design drawing page. Therefore, the design picture is generated by the server side, the resource occupation of the client side caused by the generation of the design picture can be effectively reduced, meanwhile, the user does not need to wait for the generation of the picture in the process of generating the design picture, and the waiting time of the user is reduced.
Referring to fig. 4, fig. 4 is a schematic flowchart illustrating a method for generating a web page picture according to another embodiment of the present application, where the method is applied to a client. The method may include steps S210 to S230.
In step S210, in response to a picture generation operation on the design interface, design data of a design area in the design interface is acquired.
Specifically, the client responds to the picture generation operation of the user on the design interface to acquire the design data of the design area in the design interface. The picture generation operation may be a touch operation of the user on the design interface, for example, a click operation, a long press operation, and the like.
Illustratively, the client is installed in a computer, a user can click a 'save picture' control on a design interface through a mouse to generate a picture generation operation, and then the client acquires design data of a design area according to the picture generation operation.
In some embodiments, the picture generation operation may also be an operation of automatically generating a picture based on newly added design data when the client acquires the design data added to the design interface by the user through the mouse, and at this time, the client may splice the design data by using JavaScript after acquiring the design data, and then send the spliced design data to the server.
In step S220, a picture generation request is generated based on the design data.
In the embodiment of the application, after the client acquires the design data of the design area, a picture generation request is generated according to the design data, that is, the picture generation request includes the design data of the design area.
In step S230, the picture generation request is sent to the server, so that the server generates a design picture corresponding to the design data according to the picture generation request.
In the embodiment of the application, after the client generates the picture generation request according to the design data, the picture generation request is sent to the server, and after the server receives the picture generation request, the server generates the design picture corresponding to the design data according to the design data carried in the picture generation request.
In some embodiments, the client may initiate the server through an API, so that the client may perform data interaction with the server. For example, if the server provides an HTTP (HyperText Transfer Protocol) service, the client may start the HTTP service of the server by calling an HTTP interface.
In some embodiments, the client may transmit the generated picture generation request to the server through Ajax (Asynchronous JavaScript and XML), so as to transfer the picture generation process to the server to be implemented.
In some embodiments, if the cloud server stores the storage result of the design picture and feeds the storage result back to the server, but the server does not feed the storage result back to the client, the storage address of the design picture in the cloud server is stored in the server, so that the client can respond to the picture generation operation of the user on the design interface and obtain the storage address of the target design picture corresponding to the picture acquisition operation from the server.
The target design picture refers to a design picture which needs to be acquired by a user, the server acquires the corresponding target design picture from the cloud server according to the storage address acquired by the picture acquisition operation on the client, and finally the server sends the acquired target design picture to the client.
Further, a unique picture identifier may exist in a design picture stored by a user in the client, and a corresponding relation between the picture identifier and a storage address exists in the server, so that when the user acquires the picture from the client, a picture acquisition request can be generated and sent to the server, the picture identifier is carried in the picture acquisition request, the server determines the picture identifier carried by the server after receiving the picture acquisition request, then the storage address of a target design picture corresponding to the carried picture identifier is acquired according to the corresponding relation between the picture identifier and the storage address, and then the target design picture is acquired from the cloud server according to the storage address.
In some embodiments, if the storage result of the design picture stored by the cloud server is fed back to the client, the storage address of the design picture in the cloud server is stored in the server, so that the client can respond to the picture obtaining operation of the user on the design interface and obtain the storage address of the target design picture corresponding to the picture obtaining operation from the server, wherein the picture obtaining operation carries the design picture to be obtained, namely the storage address of the target design picture in the cloud server, the server sends the picture obtaining operation to the cloud server after receiving the picture obtaining operation, and finally the cloud server obtains the target design picture according to the storage address of the target design picture carried in the received picture obtaining operation.
In some embodiments, if the client stores the storage address of the design picture in the cloud server, the client may also directly obtain the target design picture from the cloud server. Specifically, the client responds to the picture obtaining operation of the user on the design interface, and obtains the target design picture from the cloud server according to the storage address of the target design picture carried in the picture obtaining operation.
As can be seen from the above, in the embodiment of the present application, the design data of the design area in the design interface is acquired in response to the picture generation operation on the design interface; generating a picture generation request based on the design data; and sending the picture generation request to the server so that the server generates a design picture corresponding to the design data according to the picture generation request. Therefore, the process of generating the design picture is transferred to the server side to be executed, so that the occupation of client side resources in the process of generating the design picture is effectively reduced, and meanwhile, a user does not need to wait for the generation of the picture in the process of generating the design picture, so that the waiting time of the user is reduced.
Referring to fig. 5, fig. 5 is a schematic structural diagram illustrating a web page image generating device 200 according to an embodiment of the present application, where the web page image generating device is applied to a server, and the web page image generating device 200 may include a receiving module 210, a page generating module 220, and an image generating module 230.
Specifically, the receiving module 210 is configured to receive a picture generation request sent by a client; the picture generation request comprises design data of a design area in a design interface.
The page generation module 220 is used for generating a design drawing page according to the design data.
A picture generation module 230 for generating a design picture based on the design drawing page.
In some embodiments, the page generation module 220 may include: the first starting unit is used for starting the third-party library according to the picture generation request; the second starting unit is used for starting the browser kernel through the third-party library; and the page generating unit is used for generating a design drawing page according to the design data based on the browser kernel.
In some embodiments, the page generating unit may include: the font loading subunit is used for loading a preset font through the browser kernel; and the page generation subunit is used for generating a design drawing page according to the preset font and the design data based on the browser kernel, wherein the text content in the design drawing page is displayed in the preset font.
In some embodiments, the picture generation module 230 may include: and the conversion unit is used for converting the design picture page into the design picture according to the preset picture conversion mode.
In some embodiments, the web page picture generating apparatus 200 may further include: and the storage module is used for storing the design picture to the cloud server.
Referring to fig. 6, fig. 6 is a schematic structural diagram illustrating a web page image generating device 300 according to another embodiment of the present application, where the web page image generating device is applied to a client, and the web page image generating device 300 may include an obtaining module 310, a generating module 320, and a sending module 330.
Specifically, the obtaining module 310 is configured to obtain design data of a design area in a design interface in response to a picture generation operation on the design interface.
The generation module 320 is configured to generate a picture generation request based on the design data.
The sending module 330 is configured to send the picture generation request to the server, so that the server generates a design picture corresponding to the design data according to the picture generation request.
In some embodiments, the web page picture generating apparatus 300 may further include: the address acquisition unit is used for responding to the picture acquisition operation of the design interface and acquiring a storage address of a target design picture corresponding to the picture acquisition operation from the server; and the picture acquisition unit is used for acquiring the target design picture from the cloud server according to the storage address.
It can be clearly understood by those skilled in the art that, for convenience and brevity of description, the specific working processes of the above-described apparatuses and modules may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again.
In several embodiments provided in the present application, the coupling of the modules to each other may be electrical, mechanical or other forms of coupling.
In addition, functional modules in the embodiments of the present application may be integrated into one processing module, or each of the modules may exist alone physically, or two or more modules are integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode.
Referring to fig. 7, fig. 7 is a schematic structural diagram of an electronic device 400 according to an embodiment of the present disclosure, where the electronic device 400 may be an electronic device capable of running an application, such as a smart phone, a tablet computer, an electronic book, a touch screen, and the like. The electronic device 400 in the present application may include one or more of the following components: a processor 410, a memory 420, and one or more applications, wherein the one or more applications may be stored in the memory 420 and configured to be executed by the one or more processors 410, the one or more programs configured to perform the web page picture generation method as described in the foregoing method embodiments.
The Memory 420 may include a Random Access Memory (RAM) or a Read-Only Memory (Read-Only Memory). The memory 420 may be used to store instructions, programs, code, sets of codes, or sets of instructions. The memory 420 may include a program storage area and a data storage area, wherein the program storage area may store instructions for implementing an operating system, instructions for implementing at least one function (e.g., a loading function, a translation function, a receiving function, etc.), instructions for implementing various method embodiments described below, and the like. The stored data area may also store data (e.g., design data, font data, etc.) created during use by the electronic device 400.
Referring to fig. 8, fig. 8 is a schematic structural diagram of a computer-readable storage medium according to an embodiment of the present disclosure. The computer readable medium 500 stores program codes, which can be called by a processor to execute the web page image generating method described in the above method embodiments.
The computer-readable storage medium 500 may be an electronic memory such as a flash memory, an EEPROM (electrically erasable and programmable read only memory), an EPROM, a hard disk, or a ROM. Alternatively, the computer-readable storage medium 500 includes a non-volatile computer-readable medium. The computer readable storage medium 500 has storage space for program code 510 for performing any of the method steps of the method described above. The program code can be read from or written to one or more computer program devices. The program code 510 may be compressed, for example, in a suitable form.
Embodiments of the present application also provide a computer program device or a computer program, which includes computer instructions stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the webpage picture generating method described in the above-mentioned various optional embodiments.
According to the webpage picture generation method, the webpage picture generation system, the electronic equipment and the storage medium, a picture generation request sent by a client is received; the picture generation request comprises design data of a design area in a design interface; and then generating a design drawing page according to the design data, and finally generating a design picture based on the design drawing page. Therefore, the design picture is generated by the server, the resource occupation of the client caused by the generation of the design picture can be effectively reduced, and meanwhile, the user does not need to wait for the generation of the picture in the process of generating the design picture, so that the waiting time of the user is reduced.
Finally, it should be noted that: the above embodiments are only used to illustrate the technical solutions of the present application, and not to limit the same; although the present application has been described in detail with reference to the foregoing embodiments, it will be understood by those of ordinary skill in the art that: the technical solutions described in the foregoing embodiments may still be modified, or some technical features may be equivalently replaced; such modifications and substitutions do not depart from the spirit and scope of the corresponding technical solutions in the embodiments of the present application.
Claims (10)
1. A webpage picture generation method is applied to a server side, and the method comprises the following steps:
receiving a picture generation request sent by a client; the picture generation request comprises design data of a design area in a design interface;
generating a design drawing page according to the design data;
generating a design picture based on the design drawing page.
2. The method of claim 1, wherein generating a plan page from the design data comprises:
starting a third party library according to the picture generation request;
starting a browser kernel through the third-party library;
and generating a design drawing page according to the design data based on the browser kernel.
3. The method of claim 2, wherein generating a blueprint page from the design data based on the browser kernel comprises:
loading a preset font through the browser kernel;
generating a design drawing page according to the preset font and the design data based on the browser kernel; and displaying the text content in the design drawing page in the preset font.
4. The method of claim 1, wherein generating a design picture based on the design drawing page comprises:
and converting the design drawing page into a design picture according to a preset picture conversion mode.
5. The method according to any one of claims 1 to 4, further comprising:
and storing the design picture to a cloud server.
6. A webpage picture generation method is applied to a client side, and comprises the following steps:
responding to picture generation operation on a design interface, and acquiring design data of a design area in the design interface;
generating a picture generation request based on the design data;
and sending the picture generation request to a server so that the server generates a design picture corresponding to the design data according to the picture generation request.
7. The method of claim 6, further comprising:
responding to the picture acquisition operation of the design interface, and acquiring a storage address of a target design picture corresponding to the picture acquisition operation from the server;
and acquiring the target design picture from a cloud server according to the storage address.
8. A webpage picture generating system is characterized by comprising a client and a server:
the client is used for responding to picture generation operation on a design interface and acquiring design data of a design area in the design interface;
the client is also used for generating a picture generation request based on the design data;
the client is further used for sending the picture generation request to a server so that the server can generate a design picture corresponding to the design data according to the picture generation request;
the server is used for receiving a picture generation request sent by the client; the picture generation request comprises design data of a design area in a design interface;
the server is also used for generating a design drawing page according to the design data;
the server is further used for generating a design picture based on the design picture page.
9. An electronic device, comprising:
one or more processors;
a memory;
one or more application programs, wherein the one or more application programs are stored in the memory and configured to be executed by the one or more processors, the one or more application programs configured to perform the web page picture generation method of any one of claims 1-7.
10. A computer-readable storage medium having stored thereon program code that can be invoked by a processor to perform the method for generating a web page picture according to any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210476158.0A CN114780888A (en) | 2022-04-29 | 2022-04-29 | Webpage picture generation method and system, electronic equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210476158.0A CN114780888A (en) | 2022-04-29 | 2022-04-29 | Webpage picture generation method and system, electronic equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114780888A true CN114780888A (en) | 2022-07-22 |
Family
ID=82435873
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210476158.0A Pending CN114780888A (en) | 2022-04-29 | 2022-04-29 | Webpage picture generation method and system, electronic equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114780888A (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117056630A (en) * | 2023-08-28 | 2023-11-14 | 广东保伦电子股份有限公司 | Webpage layout picture display method, system, terminal equipment and medium |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105205077A (en) * | 2014-06-25 | 2015-12-30 | 广州市动景计算机科技有限公司 | Page layout method, device and system |
| CN109522616A (en) * | 2018-10-26 | 2019-03-26 | 平安科技（深圳）有限公司 | Simulate control method, device, computer equipment and the storage medium of finishing |
| CN109711928A (en) * | 2018-12-11 | 2019-05-03 | 平安科技（深圳）有限公司 | Simulate decoration method, device, storage medium and mobile terminal in house |
| CN110211237A (en) * | 2019-05-17 | 2019-09-06 | 广州慧阳信息科技有限公司 | Three-dimensional Home Fashion & Design Shanghai shows system and method |
| CN111475751A (en) * | 2020-03-18 | 2020-07-31 | 平安国际智慧城市科技股份有限公司 | Page picture processing method and device, server and storage medium |
| CN112380478A (en) * | 2020-11-17 | 2021-02-19 | 平安养老保险股份有限公司 | Webpage screenshot method and device, computer equipment and computer-readable storage medium |
-
2022
- 2022-04-29 CN CN202210476158.0A patent/CN114780888A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105205077A (en) * | 2014-06-25 | 2015-12-30 | 广州市动景计算机科技有限公司 | Page layout method, device and system |
| CN109522616A (en) * | 2018-10-26 | 2019-03-26 | 平安科技（深圳）有限公司 | Simulate control method, device, computer equipment and the storage medium of finishing |
| CN109711928A (en) * | 2018-12-11 | 2019-05-03 | 平安科技（深圳）有限公司 | Simulate decoration method, device, storage medium and mobile terminal in house |
| CN110211237A (en) * | 2019-05-17 | 2019-09-06 | 广州慧阳信息科技有限公司 | Three-dimensional Home Fashion & Design Shanghai shows system and method |
| CN111475751A (en) * | 2020-03-18 | 2020-07-31 | 平安国际智慧城市科技股份有限公司 | Page picture processing method and device, server and storage medium |
| CN112380478A (en) * | 2020-11-17 | 2021-02-19 | 平安养老保险股份有限公司 | Webpage screenshot method and device, computer equipment and computer-readable storage medium |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN117056630A (en) * | 2023-08-28 | 2023-11-14 | 广东保伦电子股份有限公司 | Webpage layout picture display method, system, terminal equipment and medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106991154B (en) | Webpage rendering method and device, terminal and server | |
| CN107766359B (en) | Method and device for converting page content into picture and computing equipment | |
| JP6740373B2 (en) | Page component dynamic layout | |
| US8549395B2 (en) | Method and system for transforming an integrated webpage | |
| CN107066430B (en) | Picture processing method and device, server and client | |
| WO2017088509A1 (en) | Page customization method and device | |
| EP3499383B1 (en) | Automated generation of web forms using fillable electronic documents | |
| CN111143725A (en) | Page generation method and device and electronic equipment | |
| CN108416021B (en) | Browser webpage content processing method and device, electronic equipment and readable medium | |
| WO2020048189A1 (en) | Image generation | |
| US20220032192A1 (en) | User interface processing method and device | |
| CN111294395A (en) | Terminal page transmission method, device, medium and electronic equipment | |
| WO2022048141A9 (en) | Image processing method and apparatus, and computer readable storage medium | |
| CN111737614B (en) | Page display method, page display device, electronic equipment and storage medium | |
| CN107122398A (en) | A kind of data display chart generation method and system | |
| CN109670132A (en) | A kind of page method for drafting, device, terminal device and storage medium | |
| CN108345683B (en) | Webpage display method, device, terminal and storage medium | |
| CN114780888A (en) | Webpage picture generation method and system, electronic equipment and storage medium | |
| CN112486482A (en) | Page display method and device | |
| CN113760283A (en) | Text rendering method and device | |
| CN109918598B (en) | Web page rendering method based on Android television browser | |
| CN111783010B (en) | Webpage blank page monitoring method, device, terminal and storage medium | |
| CN116578795A (en) | Webpage generation method and device, storage medium and electronic equipment | |
| CN111324835A (en) | Method and device for rendering user interface component, electronic equipment and storage medium | |
| CN114861103B (en) | Page backtracking method and device, medium and electronic equipment |
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 |