Image-based web page generation method

Abstract

This invention provides a webpage generation method based on image recognition. It performs image content recognition on images uploaded by user terminals to determine whether they are valid images, avoiding the reuse of identical images during webpage generation. It also identifies and preprocesses valid images to ensure their image quality and accurate location. Based on the webpage layout information, it determines parameters for shape processing of valid images, thereby transforming them into webpage images that match the webpage layout, improving image-webpage layout compatibility and fully utilizing webpage space. After loading the webpage image into the corresponding page position in the webpage template, it performs visual rendering, ensuring good visual compatibility between the webpage image and the webpage, and improving the display reliability of the webpage.

Description

Technical Field

[0001] This invention relates to the technical field of web page design, and in particular to a web page generation method based on image recognition. Background Technology

[0002] In web design, images often need to be inserted into the webpage. To reduce the workload, images are often directly inserted into the webpage and then adjusted within the webpage. Once the inserted image is roughly positioned within the corresponding area of ​​the webpage, image processing is complete. This method, by directly manipulating images within the webpage, eliminates the need for preprocessing, reducing the complexity of image processing. However, it cannot perform planned and precise preprocessing based on the layout requirements of the webpage. This can lead to incompatibility between the image shape and visual appearance and the webpage layout, ultimately reducing the quality of the webpage. Summary of the Invention

[0003] To address the shortcomings of existing technologies, this invention provides a webpage generation method based on image recognition. This method performs content recognition on images uploaded by user terminals to determine their validity, avoiding the reuse of identical images during webpage generation. It also identifies and preprocesses valid images to ensure their image quality and accurate identification. Based on the webpage layout information, it determines parameters for shape processing of valid images, transforming them into webpage images that match the webpage layout, improving image-webpage layout compatibility and fully utilizing webpage space. After loading the webpage images into their corresponding page positions on the webpage template, it performs visual rendering, ensuring good visual compatibility between the images and the webpage. Once the webpage template has loaded all images, it generates the required webpage, tests it, and then uploads it to the server, ensuring fast and stable loading of the webpage and improving the reliability of the webpage display.

[0004] This invention provides a webpage generation method based on image recognition, comprising the following steps:

[0005] Step S1: Perform a first recognition process on the image uploaded by the user terminal to determine whether the image is a valid image; and after marking and preprocessing the valid images, save them in the image pool;

[0006] Step S2: Based on the webpage layout information, perform a second recognition process on the valid images from the image pool to obtain processing parameters for the valid images; based on the processing parameters, convert the valid images into webpage images that match the webpage layout.

[0007] Step S3: After loading the webpage image into the page position corresponding to the webpage template, perform a second recognition process on the webpage image to obtain the visual state information of the webpage image; and perform visual rendering on the webpage image based on the visual state information.

[0008] Step S4: After testing the final generated webpage, upload the webpage to the server.

[0009] Further, in step S1, the image uploaded by the user terminal undergoes a first recognition process to determine whether the image is a valid image, including:

[0010] The image uploaded by the user terminal is subjected to a first recognition process to obtain the image's image object feature information; wherein, the image object feature information includes the pixel outline feature information and pixel color feature information of all objects present on the image;

[0011] The image is compared with the image library to determine whether the image is similar to the images in the preset image library; wherein, the preset image library includes images used in the historical webpage generation process;

[0012] If the image is not similar to any image in the preset image library, then the image is determined to be a valid image; otherwise, the image is determined to be a invalid image.

[0013] Furthermore, in step S1, after identifying and preprocessing the valid images, they are stored in the image pool, including:

[0014] The valid images are identified based on the user terminal's terminal identity information;

[0015] Based on the pixel contour feature information of all objects present in the valid image, pixel contour repair preprocessing is performed on the valid image; wherein, the pixel contour repair preprocessing includes filling the pixel contour of each object present in the image or changing the line thickness.

[0016] The completed and pixel contour restoration preprocessed images are stored in a predetermined storage area of ​​the image pool.

[0017] Further, in step S2, based on the webpage layout information, a second recognition process is performed on the valid images from the image pool to obtain processing parameters for the valid images, including:

[0018] Based on the webpage layout information, determine the interface shape information corresponding to the images that the webpage needs to load;

[0019] The distribution location information of the predetermined object in the image frame is identified from the valid images from the image pool, and the distribution location information is compared with the interface shape information to determine the boundary trajectory for cropping the valid image, which is used as the processing parameter; wherein, after cropping the valid image along the boundary trajectory, the resulting web page image contains the predetermined object.

[0020] Further, in step S2, the effective image is converted into a webpage image that matches the webpage layout according to the processing parameters, including:

[0021] Based on the boundary trajectory, the valid image is cropped and processed to obtain a webpage image that matches the page area where the image needs to be loaded in the webpage layout.

[0022] Further, in step S3, after loading the webpage image into the page position corresponding to the webpage template, the webpage image undergoes a second recognition process to obtain the visual state information of the webpage image, including:

[0023] Obtain the page area location information corresponding to the page area where the webpage template needs to load webpage images; load the webpage images into the page area according to the page area location information; and lock the page area so that the page area cannot load other images.

[0024] The webpage image is subjected to a second recognition process to obtain the brightness distribution state information and contrast distribution state information of the webpage image, which are used as the visual state information of the image.

[0025] Furthermore, in step S3, the webpage image is visually rendered based on the visual state information, including:

[0026] Based on the brightness distribution information, the webpage image is rendered to reflect its brightness.

[0027] Based on the image contrast distribution information, the webpage image is rendered with respect to the contrast between the objects and the background.

[0028] Furthermore, in step S4, after testing the finally generated webpage, the webpage is uploaded to the server, including:

[0029] The final generated webpage is subjected to a server loading test to obtain the loading speed of the webpage on the virtual server;

[0030] Based on the loading speed, the webpage is compressed; then the webpage is uploaded to the server.

[0031] Further, in step S4, the webpage is compressed according to the loading speed; then the webpage is uploaded to the server, including:

[0032] Step S401: Using the formula (1) below, obtain the compression level value of the webpage based on the loading speed.

[0033]

[0034] In the above formula (1), E represents the compression level of the webpage; E0 represents the preset minimum compression level of the webpage. Indicates rounding up; e represents the natural constant; V0 represents the preset normal loading speed; V represents the current loading speed; This means finding e. 1.5 and The maximum value in;

[0035] Step S402: Using the following formula (2), compress the webpage according to the compression level value of the webpage compression process.

[0036]

[0037] In the above formula (2), h(i,j) represents the pixel value of the i-th row and j-th column pixel in the webpage matrix after compression; H(i,j) represents the pixel value of the i-th row and j-th column pixel in the webpage matrix before compression.

[0038] Step S403: After the webpage is uploaded to the server, the compressed webpage is decompressed using the following formula (3).

[0039]

[0040] In the above formula (3), H′(i,j) represents the pixel value of the pixel in the i-th row and j-th column of the web page matrix after the compressed web page is decompressed.

[0041] Compared to existing technologies, this image recognition-based webpage generation method performs content recognition on images uploaded by user terminals to determine whether they are valid images, avoiding the reuse of the same images during webpage generation. It also identifies and preprocesses valid images to ensure their image quality and accurate identification. Based on the webpage layout information, it determines the parameters for shape processing of valid images, transforming them into webpage images that match the webpage layout, improving image-webpage layout compatibility and fully utilizing webpage space. After loading the webpage images into their corresponding page positions in the webpage template, it performs visual rendering, ensuring good visual compatibility between the images and the webpage. Once the webpage template has completed loading all webpage images, it generates the required webpage, tests it, and then uploads it to the server, ensuring fast and stable loading of the webpage and improving the reliability of the webpage display.

[0042] Other features and advantages of the invention will be set forth in the description which follows, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention may be realized and obtained by means of the structures particularly pointed out in the written description, claims, and drawings.

[0043] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Attached Figure Description

[0044] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0045] Figure 1 This is a flowchart illustrating the webpage generation method based on image recognition provided by the present invention. Detailed Implementation

[0046] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0047] See Figure 1This is a schematic flowchart of a webpage generation method based on image recognition provided in an embodiment of the present invention. The webpage generation method based on image recognition includes the following steps:

[0048] Step S1: Perform first recognition processing on the image uploaded by the user terminal to determine whether the image is a valid image; and after marking and preprocessing the valid images, save them in the image pool;

[0049] Step S2: Based on the webpage layout information, perform a second recognition process on the valid images from the image pool to obtain processing parameters for the valid images; based on the processing parameters, convert the valid images into webpage images that match the webpage layout.

[0050] Step S3: After loading the webpage image into the page position corresponding to the webpage template, perform a second recognition process on the webpage image to obtain the visual state information of the webpage image; and perform visual rendering on the webpage image based on the visual state information.

[0051] Step S4: After testing the final generated webpage, upload the webpage to the server.

[0052] The beneficial effects of the above technical solution are as follows: This image recognition-based webpage generation method performs image content recognition on images uploaded by user terminals to determine whether they are valid images, avoiding the reuse of the same images during webpage generation; it also identifies and preprocesses valid images to ensure the image quality of valid images and accurate retrieval of valid images; based on the webpage layout information, it determines the parameters for shape processing of valid images, thereby processing valid images into webpage images that match the webpage layout, improving the compatibility between images and webpage layout, and making full use of webpage space; after loading the webpage images into the corresponding page positions of the webpage template, it performs visual rendering of the webpage images, thus ensuring good visual compatibility between the webpage images and the webpage; after the webpage template has completed loading all webpage images, it generates the required webpage, tests it, and then uploads it to the server, ensuring that the server loads the webpage quickly and stably, improving the display reliability of the webpage.

[0053] Preferably, in step S1, the image uploaded by the user terminal undergoes a first recognition process to determine whether the image is a valid image, including:

[0054] The image uploaded by the user terminal is subjected to a first recognition process to obtain the image's image object feature information; wherein, the image object feature information includes the pixel outline feature information and pixel color feature information of all objects existing on the image;

[0055] The image is compared with the image library to determine whether it is similar to the images in the library. The image library includes images used in the historical webpage generation process.

[0056] If the image is not similar to any image in the preset image library, it is considered a valid image; otherwise, it is considered a invalid image.

[0057] The beneficial effects of the above technical solution are as follows: The webpage design process requires inserting corresponding images into the webpage interface. The insertion location of the image and its visual appearance directly affect the quality of the webpage. To avoid different webpages using the same or similar images during the design process, the images uploaded by the user terminal are first subjected to image object characteristic information recognition to identify the presence of people, objects, etc., in the image. Then, the image is compared with a preset image library to determine the similarity of image object characteristic information between the images in the preset image library and the images uploaded by the user terminal. If the similarity is greater than or equal to a preset similarity threshold, it is determined that the image uploaded by the user terminal is not a valid image, as it has already been used in other webpage design processes.

[0058] Preferably, in step S1, after identifying and preprocessing the valid images, they are stored in the image pool, including:

[0059] The valid image is identified based on the user terminal's identity information;

[0060] Based on the pixel contour feature information of all objects present in the valid image, pixel contour repair preprocessing is performed on the valid image; wherein, the pixel contour repair preprocessing includes filling the pixel contour of each object present in the image or changing the line thickness.

[0061] The completed and pixel contour restoration preprocessed images are stored in a predetermined storage area of ​​the image pool.

[0062] The beneficial effects of the above technical solution are as follows: Based on the terminal identity information of the user terminal uploading the valid image, the valid image is identified, facilitating the accurate retrieval of suitable valid images for webpage design. Furthermore, based on the pixel outline feature information of all objects present in the valid image, pixel outline restoration preprocessing is performed on the valid image to avoid low image quality due to blurred or discontinuous pixel outline lines. Finally, the identified and pixel outline restoration preprocessed valid images are stored in a predetermined storage area of ​​the image pool, thereby ensuring the storage security of the valid images.

[0063] Preferably, in step S2, based on the webpage layout information, a second recognition process is performed on the valid images from the image pool to obtain processing parameters for the valid images, including:

[0064] Based on the webpage layout information, determine the interface shape information corresponding to the images that the webpage needs to load;

[0065] The distribution location information of the predetermined object in the image frame is identified from the valid images from the image pool, and the distribution location information is compared with the interface shape information to determine the boundary trajectory for cropping the valid image, which is used as the processing parameter; wherein, after cropping the valid image along the boundary trajectory, the resulting web page image contains the predetermined object.

[0066] The beneficial effects of the above technical solution are as follows: In the web page design process, it is necessary to load and insert valid images into the corresponding page area of ​​the web page. This page area has a certain shape and size, and the shape and size of the valid image may not necessarily match the shape and size of the page area. Therefore, it is necessary to crop the valid image. In actual operation, based on the web page layout information, the interface shape information corresponding to the image to be loaded on the web page is determined, that is, the shape and size information corresponding to the page area where the valid image is inserted needs to be loaded. The distribution position information of the predetermined object in the image frame is identified from the valid images from the image pool. The predetermined object can be, but is not limited to, a person and / or object of a specified type in the valid image frame. The distribution position information is compared with the interface shape information to determine the boundary trajectory for cropping the valid image, so that when the valid image is cropped along the boundary trajectory, the resulting web page frame contains the predetermined object, thereby avoiding the loss of the predetermined object after subsequent cropping of the valid image.

[0067] Preferably, in step S2, the effective image is converted into a webpage image that matches the webpage layout according to the processing parameters, including:

[0068] Based on the boundary trajectory, the valid image is cropped and processed to obtain a web page image that matches the page area where the image needs to be loaded in the web page layout.

[0069] The beneficial effects of the above technical solution are as follows: In practical work, the boundary trajectory is projected onto the effective image, and then the effective image is cropped and processed along the projected boundary trajectory to obtain a web page image that matches the page area that needs to load the image in the web page layout, ensuring that the cropped effective image matches the page area that needs to load the image in terms of shape and size.

[0070] Preferably, in step S3, after loading the webpage image into the page position corresponding to the webpage template, the webpage image undergoes a second recognition process to obtain the visual state information of the webpage image, including:

[0071] Obtain the page area location information corresponding to the page area where the webpage template needs to load webpage images. Based on the page area location information, load the webpage image into the page area and lock the page area to prevent other images from being loaded.

[0072] The webpage image undergoes a second recognition process to obtain the image's brightness distribution status information and contrast distribution status information, which are then used as the image's visual status information.

[0073] The beneficial effects of the above technical solution are as follows: After the effective image is cropped, the cropped image is loaded into the corresponding page area according to the page area location information that the webpage template requires to load the webpage image. Simultaneously, the page area is locked, preventing duplicate image loading even if the page area switches to a state where other images cannot be inserted. Furthermore, visual state recognition processing is performed on the webpage image to obtain its brightness and contrast distribution information, facilitating subsequent targeted visual adjustments.

[0074] Preferably, in step S3, the webpage image is visually rendered based on the visual state information of the image, including:

[0075] Based on the brightness distribution information of the image, render the brightness of the webpage image.

[0076] Based on the contrast distribution information of the image, the contrast rendering of the webpage image is performed on the objects and background parts present in the webpage image.

[0077] The beneficial effects of the above technical solution are as follows: In practical work, based on the brightness distribution information of the image, the brightness of the webpage image is rendered to ensure the uniformity of brightness distribution throughout the entire image area, avoiding insufficient brightness or overexposure. Furthermore, based on the contrast distribution information of the image, contrast rendering is performed on the webpage image regarding the contrast between objects and the background, ensuring that the contrast of the rendered webpage image remains within a suitable range.

[0078] Preferably, in step S4, after testing the final generated webpage, the webpage is uploaded to the server, including:

[0079] Perform a server loading test on the final generated webpage to obtain the loading speed of the webpage on the virtual server;

[0080] Based on the loading speed, the webpage is compressed; then the webpage is uploaded to the server.

[0081] The beneficial effects of the above technical solution are as follows: After the webpage template completes loading all webpage images and finally generates the required webpage, a server loading test is performed on the final generated webpage using a virtual server corresponding to the real server. This test determines the loading speed of the webpage on the virtual server. If the loading speed is greater than or equal to a preset loading speed threshold, the webpage is directly uploaded to the real server. If the loading speed is less than the preset loading speed threshold, the webpage is compressed before being uploaded to the real server, effectively reducing the data size of the webpage and improving the loading efficiency of the webpage on the real server.

[0082] Preferably, in step S4, the webpage is compressed according to the loading speed; then the webpage is uploaded to the server, including:

[0083] Step S401: Using the formula (1) below, obtain the compression level value for the webpage based on the loading speed.

[0084]

[0085] In the above formula (1), E represents the compression level of the webpage; E0 represents the preset minimum compression level of the webpage. Indicates rounding up; e represents the natural constant; V0 represents the preset normal loading speed; V represents the current loading speed; This means finding e. 1.5 and The maximum value in;

[0086] Step S402: Using the formula (2) below, compress the webpage according to the compression level value of the webpage compression process.

[0087]

[0088] In the above formula (2), h(i,j) represents the pixel value of the i-th row and j-th column pixel in the webpage matrix after compression; H(i,j) represents the pixel value of the i-th row and j-th column pixel in the webpage matrix before compression.

[0089] Step S403: After the webpage is uploaded to the server, the compressed webpage is decompressed using the following formula (3).

[0090]

[0091] In the above formula (3), H′(i,j) represents the pixel value of the pixel in the i-th row and j-th column of the web page matrix after the compressed web page is decompressed.

[0092] The beneficial effects of the above technical solution are as follows: using the above formula (1), the compression degree value of the web page is obtained according to the loading speed, so as to know the compression degree of the web page and facilitate subsequent compression processing; then using the above formula (2), the web page is compressed according to the compression degree value of the web page, so as to complete intelligent automatic compression and reflect the intelligence of the system; finally using the above formula (3), the compressed web page is decompressed, so as to ensure the accuracy and reliability of data compression and decompression.

[0093] As can be seen from the above embodiments, this image recognition-based webpage generation method performs image content recognition on images uploaded by user terminals to determine whether they are valid images, thus avoiding the reuse of the same images during webpage generation. It also identifies and preprocesses valid images to ensure their image quality and accurate retrieval. Based on the webpage layout information, it determines the parameters for shape processing of valid images, thereby processing them into webpage images that match the webpage layout, improving the compatibility between images and webpage layout, and fully utilizing the webpage space. After loading the webpage images into the corresponding page positions of the webpage template, it performs visual rendering on the webpage images, thus ensuring good visual compatibility between the webpage images and the webpage. Once the webpage template has completed loading all webpage images, it generates the required webpage, tests it, and then uploads it to the server, ensuring fast and stable loading of the webpage by the server and improving the display reliability of the webpage.

[0094] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of the claims of this invention and their equivalents, this invention also intends to include these modifications and variations.

Claims

1. A webpage generation method based on image recognition, characterized in that, Includes the following steps: Step S1: Perform a first recognition process on the image uploaded by the user terminal to determine whether the image is a valid image; and after marking and preprocessing the valid images, save them in the image pool; Step S2: Based on the webpage layout information, perform a second recognition process on the valid images from the image pool to obtain processing parameters for the valid images; based on the processing parameters, convert the valid images into webpage images that match the webpage layout. Step S3: After loading the webpage image into the page position corresponding to the webpage template, perform a second recognition process on the webpage image to obtain the visual state information of the webpage image; and perform visual rendering on the webpage image based on the visual state information. Step S4, after testing the final generated webpage, upload the webpage to the server, including: The final generated webpage is subjected to a server loading test to obtain the loading speed of the webpage on the virtual server; Based on the loading speed, the webpage is compressed; then the webpage is uploaded to the server, including: Step S401: Using the formula (1) below, obtain the compression level value of the webpage based on the loading speed. （1） In the above formula (1), This indicates the degree of compression applied to the webpage. This represents the minimum preset compression level for compressing the webpage. Indicates rounding up; Represents the natural constant; This indicates the default normal loading speed; Indicates the current loading speed; Indicates the request and The maximum value in; Step S402: Using the following formula (2), compress the webpage according to the compression level value of the webpage compression process. （2） In the above formula (2), This indicates the first page in the compressed webpage matrix. Line 1 Pixel values ​​of column pixels; This indicates the first page in the webpage matrix before compression. Line 1 Pixel values ​​of column pixels; Step S403: After the webpage is uploaded to the server, the compressed webpage is decompressed using the following formula (3). （3） In the above formula (3), This represents the first element in the webpage matrix after decompressing the compressed webpage. Line 1 The pixel value of each column pixel.

2. The webpage generation method based on image recognition as described in claim 1, characterized in that: In step S1, the image uploaded by the user terminal undergoes a first recognition process to determine whether the image is a valid image, including: The image uploaded by the user terminal is subjected to a first recognition process to obtain the image's image object feature information; wherein, the image object feature information includes the pixel outline feature information and pixel color feature information of all objects present on the image; The image is compared with the image library to determine whether the image is similar to the images in the preset image library; wherein, the preset image library includes images used in the historical webpage generation process; If the image is not similar to any image in the preset image library, then the image is determined to be a valid image; otherwise, the image is determined to be a invalid image.

3. The webpage generation method based on image recognition as described in claim 2, characterized in that: In step S1, after valid images are identified and preprocessed, they are stored in the image pool, including: The valid images are identified based on the user terminal's terminal identity information; Based on the pixel contour feature information of all objects present in the valid image, pixel contour repair preprocessing is performed on the valid image; wherein, the pixel contour repair preprocessing includes filling the pixel contour of each object present in the image or changing the line thickness. The completed and pixel contour restoration preprocessed images are stored in a predetermined storage area of ​​the image pool.

4. The webpage generation method based on image recognition as described in claim 1, characterized in that: In step S2, based on the webpage layout information, a second recognition process is performed on the valid images from the image pool to obtain processing parameters for the valid images, including: Based on the webpage layout information, determine the interface shape information corresponding to the images that the webpage needs to load; The distribution location information of the predetermined object in the image frame is identified from the valid images from the image pool, and the distribution location information is compared with the interface shape information to determine the boundary trajectory for cropping the valid image, which is used as the processing parameter; wherein, after cropping the valid image along the boundary trajectory, the resulting web page image contains the predetermined object.

5. The webpage generation method based on image recognition as described in claim 4, characterized in that: In step S2, the effective image is converted into a webpage image that matches the webpage layout according to the processing parameters, including: Based on the boundary trajectory, the valid image is cropped and processed to obtain a webpage image that matches the page area where the image needs to be loaded in the webpage layout.

6. The webpage generation method based on image recognition as described in claim 1, characterized in that: In step S3, after loading the webpage image into the page position corresponding to the webpage template, the webpage image undergoes a second recognition process to obtain the visual state information of the webpage image, including: Obtain the page area location information corresponding to the page area where the webpage template needs to load webpage images; load the webpage images into the page area according to the page area location information; and lock the page area so that the page area cannot load other images. The webpage image is subjected to a second recognition process to obtain the brightness distribution state information and contrast distribution state information of the webpage image, which are used as the visual state information of the image.

7. The webpage generation method based on image recognition as described in claim 6, characterized in that: In step S3, the webpage image is visually rendered based on the visual state information, including: Based on the brightness distribution information, the webpage image is rendered to reflect its brightness. Based on the image contrast distribution information, the webpage image is rendered with respect to the contrast between the objects and the background.

Images