A page image display method, device and medium

Abstract

Embodiments of the present application disclose a page image display method, device and medium. The method comprises: receiving an original display image uploaded by a user end, and determining a main color in the original display image; determining a color similarity between at least two colors in the main color, and determining a color richness of the original display image according to the color similarity; performing image format transcoding on the original display image to obtain a transcoded initial display image, and determining an image compression result of the initial display image according to the color richness and a preset color richness threshold; selecting a target display image based on the image compression result and an original size of the original display image, and displaying the target display image in a front-end page. Through the above technical solution, the front-end loading speed is improved, different compression ratios are adopted for different color richness, the conversion time is reduced and the size is reduced under the condition of ensuring the definition, the picture quality and the picture display efficiency are improved, and the compatibility is high.

Description

Technical Field

[0001] This invention relates to the field of image processing technology, and in particular to a method, device and medium for displaying page images. Background Technology

[0002] With the continuous development of the internet, web pages are no longer just a way to display information, but also an important means to showcase a company's image, enhance user goodwill, and attract and retain users. Images, as the most direct form of display, are also the easiest way for users to grasp key information, so designers often choose to use a large number of image assets to enrich the page effect. However, a large number of high-definition image assets often means slower web page loading speeds, seriously affecting the first screen rendering time. In cases where users have poor internet speeds, the page may even remain blank for a long time, severely impacting the user experience and contradicting the original intention of using a large number of image assets.

[0003] To address this issue, there are currently two main approaches in the industry. One is for designers to manually compress the image before loading it onto the page. The other is for the server to compress and save the image when the user uploads it, and then select the compressed image for display the next time it needs to be loaded. Both of these approaches result in slow image loading and display speeds and cannot guarantee image clarity. Summary of the Invention

[0004] In view of this, the present invention provides a page image display method, device and medium that can realize image conversion using WebP lossy compression, the compression time is much shorter than lossless compression, the compressed file size is small, the time required to load the image on the front end is reduced, the front end loading efficiency is improved, and different compression ratios are used for images with different color richness, reducing conversion time and size while ensuring clarity, improving image quality and image display efficiency, and having high compatibility.

[0005] According to one aspect of the present invention, an embodiment of the present invention provides a method for displaying page images, applied to a server node, the method comprising:

[0006] Receive the original display image uploaded by the user and determine the main color in the original display image; wherein the main color includes at least two colors;

[0007] Determine the color similarity between at least two colors in the primary color, and determine the color richness of the original display image based on the color similarity;

[0008] The original display image is transcoded to obtain the transcoded initial display image, and the image compression result of the initial display image is determined according to the color richness and the preset color richness threshold.

[0009] Based on the image compression result and the original size of the original display image, a target display image is selected and displayed on the front-end page.

[0010] According to another aspect of the present invention, embodiments of the present invention also provide a page image display device, applied to a server node, the device comprising:

[0011] The primary color determination module is used to receive the original display image uploaded by the user and determine the primary color in the original display image; wherein, the primary color includes at least two colors;

[0012] A color richness determination module is used to determine the color similarity between at least two colors in the main color, and to determine the color richness of the original display image based on the color similarity.

[0013] The compression module is used to transcode the original display image to obtain the transcoded initial display image, and to determine the image compression result of the initial display image based on the color richness and the preset color richness threshold.

[0014] The display module is used to select a target display image based on the image compression result and the original size of the original display image, and display the target display image on the front-end page.

[0015] According to another aspect of the present invention, embodiments of the present invention also provide an electronic device, the electronic device comprising:

[0016] At least one processor; and

[0017] A memory communicatively connected to the at least one processor; wherein,

[0018] The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the page image display method according to any embodiment of the present invention.

[0019] According to another aspect of the present invention, embodiments of the present invention also provide a computer-readable storage medium storing computer instructions for causing a processor to execute and implement the page image display method described in any embodiment of the present invention.

[0020] The technical solution of this invention determines the primary color in the original display image and the color similarity between at least two colors within the primary color. Based on the color similarity, it determines the color richness of the original display image and performs image format transcoding on the original display image to obtain a transcoded initial display image. This enables image conversion using WebP lossy compression, which requires significantly less compression time than lossless compression, resulting in a smaller compressed file size and reduced loading time on the front end, thus improving front-end loading efficiency. The image compression result of the initial display image is determined by color richness and a preset color richness threshold. Based on the image compression result and the original size of the original display image, a target display image is selected and displayed on the front-end page. This allows for the use of different compression ratios for images with different color richness, reducing conversion time and file size while maintaining clarity, improving image quality and display efficiency, and offering high compatibility.

[0021] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of the present invention, nor is it intended to limit the scope of the invention. Other features of the invention will become readily apparent from the following description. Attached Figure Description

[0022] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying 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.

[0023] Figure 1 A flowchart illustrating a page image display method according to an embodiment of the present invention;

[0024] Figure 2 A flowchart illustrating the processing of page images in a page image display according to an embodiment of the present invention;

[0025] Figure 3 A flowchart illustrating another page image display method provided in an embodiment of the present invention;

[0026] Figure 4 A flowchart illustrating the processing of page images in a page image display according to an embodiment of the present invention;

[0027] Figure 5 This is an architecture diagram of a page image display provided in one embodiment of the present invention;

[0028] Figure 6 This is a structural block diagram of a page image display device provided in an embodiment of the present invention;

[0029] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of the present invention. Detailed Implementation

[0030] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. 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 should fall within the scope of protection of the present invention.

[0031] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.

[0032] In one embodiment, Figure 1 This is a flowchart of a page image display method according to an embodiment of the present invention. This embodiment is applicable to the situation of displaying images loaded on a front-end page. The method can be executed by a page image display device, which can be implemented in hardware and / or software and can be configured in an electronic device.

[0033] like Figure 1 As shown, the page image display method in this embodiment is applied to a server node, and the specific steps of the method include:

[0034] S110. Receive the original display image uploaded by the user terminal and determine the main color in the original display image; wherein the main color includes at least two colors.

[0035] Here, the original display image refers to the image that needs to be loaded and quickly displayed on the front-end page. Currently, the original display image can be one or more display images of the front-end page. The main color can be understood as the main color in the original display image. The main color has at least two colors. Generally, four colors are taken from the original display image. In this embodiment, the main colors include the first color and the second color. The first color and the second color can be any two of the main colors.

[0036] In this embodiment, the user can upload images to be loaded and displayed on the front-end page. Upon receiving the original display image uploaded by the user, a preset open-source primary color extraction tool can be used to extract the primary color corresponding to one or more original display images. Of course, the preset open-source tool may include, but is not limited to, the color-thief tool. In this embodiment, the co-occurrence matrix of the grayscale image can also be obtained by calculating the co-occurrence matrix, and then some feature values ​​of the matrix can be obtained by calculating the co-occurrence matrix to represent certain texture features of the image. Alternatively, the texture in the features can be extracted using the local binary mode in the prior art. This embodiment does not impose any limitations on this.

[0037] S120. Determine the color similarity between at least two colors in the main color, and determine the color richness of the original display image based on the color similarity.

[0038] Color similarity can be understood as the color similarity between any two colors in the extracted primary color. For example, the primary color includes four colors: color a, color b, color c, and color d. Color a corresponds to the color similarity between color b, color c, and color d, color b corresponds to the color similarity between color c and color d, and color c corresponds to the color similarity between color d.

[0039] In this embodiment, color similarity can characterize the color richness of the original display image; the color richness in this embodiment can also be called color richness, and different color richness corresponds to different levels. In this embodiment, the weighted Euclidean distance can be calculated in the RGB space using a formula, and the color similarity can be determined based on the weighted Euclidean distance. Specifically, the first average value between the R channel of the first color and the R channel of the second color in the primary color can be determined first, and the distances between the three RGB channels of the first color and the three RGB channels of the second color can be calculated respectively. The color similarity between the first color and the second color can be determined based on the first average value and the distance. Since multiple colors can be included, the color similarity can be calculated separately for each pair of colors, and the final color similarity can be obtained by averaging the color similarity between each pair of colors. In some embodiments, the RGB color space can be converted to the normalized HSV color space, the three-dimensional coordinate points of the HSV color space can be converted, and the distance between the three-dimensional coordinate points of the two colors can be calculated. When the two colors are closer, the distance between the coordinates of the two colors is closer to 0; conversely, when the two colors are farther apart, the distance between the coordinates is closer to 1.

[0040] In this embodiment, the color richness of the original display image can be determined based on color similarity. This can be understood as judging whether an image is color-rich by calculating the similarity of its primary colors. For example, the higher the similarity, the richer the colors; the lower the similarity, the less rich the colors. In this embodiment, the color richness of the original display image can be determined using a threshold between the color similarity and a preset color similarity. In other embodiments, other methods can also be used to determine color richness; this embodiment does not impose any limitations on this.

[0041] S130. Transcode the original display image to obtain the transcoded initial display image, and determine the image compression result of the initial display image based on the color richness and the preset color richness threshold.

[0042] The preset color richness threshold is a custom threshold set by the user based on experience or needs. Image compression result can be understood as the compression result obtained according to a certain image compression ratio; of course, different compression ratios correspond to different image compression results.

[0043] In this embodiment, image format transcoding can be understood as transcoding the original display image according to a certain image file format. In this embodiment, the Node service is enabled, and the cwebp-bin transcoding tool is introduced to transcode common image formats to WebP format. This embodiment can transcode the original image format corresponding to the original display image into the WebP format image format. WebP format images have very good compatibility compared to HEIC, AVIF, and JPEG XL. It should be noted that when performing image transcoding, WebP compression includes both lossy compression and lossless compression. Considering the optimization of image loading time and storage space, if the image still cannot be distinguished by the naked eye after a certain loss of precision, then lossy compression, with its smaller file size and higher compression efficiency, is more suitable for enterprises as a production environment choice than lossless compression.

[0044] In this embodiment, the image compression ratio of the initial display image can be determined based on color richness and a preset color richness threshold. Different compression ratios yield different compression results. This can be understood as follows: for the same image, lossy compression results in a significantly smaller image size and shorter compression time compared to lossless compression, thus lossy compression offers greater advantages. In lossy compression, an appropriate compression ratio can be selected for images with varying color richness. In this embodiment, the preset color richness threshold can be divided into different levels, and the initial display image can be compressed based on these different levels to obtain corresponding compression results. In some embodiments, multiple first sub-images can be compressed based on detail information, color information, and mean information to generate multiple second sub-images. The compressed target image is then obtained from these multiple second sub-images.

[0045] S140. Based on the image compression result and the original size of the original display image, select the target display image and display the target display image on the front-end page.

[0046] The original size, also known as the original volume, can be understood as the original image size of the displayed image. The target display image is the image selected for display on the front-end page.

[0047] In this embodiment, a display image can be selected as the target display image based on the image compression result of the initial display image and the original size of the original display image. The target display image is then displayed on the front-end page. In some embodiments, the image compression result is compared with the original size of the original display image, and the target display image is selected based on the comparison result. In other embodiments, the target display image can also be selected in other ways, which are not limited in this embodiment.

[0048] In some embodiments, the process of displaying the target image on the front-end page includes:

[0049] The image link of the target image is obtained through a preset custom command, and it is determined whether the target image is marked.

[0050] If there is a marker, the target display image is determined to be the original display image, and the original display image is displayed directly;

[0051] If no marker is specified, the target display image is determined to be the initial display image. The system then checks if the front-end page supports WebP format initial display images. If WebP is supported, the initial display image is displayed directly. If WebP is not supported, the system checks if Wasm is supported. If Wasm is supported, the Wasm file is loaded, and the WebP image is decoded into base64 using the Wasm file for rendering and display. If Wasm is not supported, the libwebp.js file is loaded, and the WebP image is decoded into base64 using the libwebp.js file for rendering and display.

[0052] Among them, preset custom directives refer to user-defined commands. These custom directives are Vue-provided commands targeting DOM elements. When an element is rendered, a custom hook function is executed first, and the image link of the target image is obtained through this command. Base64 refers to a common encoding method.

[0053] In this embodiment, Wasm is a virtual instruction set architecture that can compile code into browser-executable machine code, thereby enabling the browser to run related applications with near-native application performance; Libwebp is a JavaScript library that converts WebP format files into base64.

[0054] In this embodiment, the image link of the target display image is obtained through a preset custom instruction, and it is determined whether the target display image has a marker. If there is a marker, the target display image is determined to be the original display image, and the original display image is displayed directly. If there is no marker, the target display image is determined to be the initial display image, and it is further determined whether the front-end page supports the initial display image in WebP format. If WebP format is supported, the initial display image is displayed directly. If WebP format is not supported, it is further determined whether Wasm is supported. If Wasm is supported, the Wasm file is loaded, and the WebP format image is decoded into base64 using the Wasm file for rendering and display. If Wasm is not supported, the libwebp.js file is loaded, and the WebP format image is decoded into base64 using the libwebp.js file for rendering and display.

[0055] For example, to better understand the image processing process on the page, Figure 2 This is a flowchart illustrating the processing of page images in a page image display according to an embodiment of the present invention. For example... Figure 2 As shown, when images need to be displayed on the front-end page, WebP format images are preferred. On pages that do not support WebP, the WebP images are decoded into base64 for rendering. If the browser supports Wasm, the Wasm file generated after compiling libwebp.js is used for decoding; otherwise, libwebp.js is used for decoding. This embodiment uses different display schemes for browsers that support WebP, browsers that do not support WebP but support Wasm, and browsers that do not support either WebP or Wasm, basically covering all current mainstream browsers.

[0056] The technical solution of this invention determines the primary color in the original display image and the color similarity between at least two colors within the primary color. Based on the color similarity, it determines the color richness of the original display image and performs image format transcoding on the original display image to obtain a transcoded initial display image. This enables image conversion using WebP lossy compression, which requires significantly less compression time than lossless compression, resulting in a smaller compressed file size and reduced loading time on the front end, thus improving front-end loading efficiency. The image compression result of the initial display image is determined by color richness and a preset color richness threshold. Based on the image compression result and the original size of the original display image, a target display image is selected and displayed on the front-end page. This allows for the use of different compression ratios for images with different color richness, reducing conversion time and file size while maintaining clarity, improving image quality and display efficiency, and offering high compatibility.

[0057] In one embodiment, before determining the primary color in the original display image, the method further includes:

[0058] When the colors of the original display image are in extreme colors, use the canvas tag drawing tool to draw the original display image, and change the size of the original display image to obtain the original display image in a new size format;

[0059] Color compensation is applied to the original display image in the new size format; wherein the size reduction ratio is calculated according to prime number form.

[0060] The canvas tag drawing tool is used for drawing graphics and can also be used to create image effects and animations. In this embodiment, extreme colors can include: images containing a large number of single colors or only a small amount of other significantly different colors.

[0061] In this embodiment, when the original display image's color is in an extreme state, the original display image is drawn using the canvas tag drawing tool, and its size is changed to obtain a new-sized original display image. Color compensation is then performed on the new-sized original display image; the size reduction ratio is based on prime numbers. This can be understood as follows: in extreme cases, to facilitate better extraction of the primary color, the user-uploaded image can be drawn using canvas in the browser and its size reduced. The size reduction ratio should ideally use prime numbers such as 11, 13, or 17 to trigger the browser's color compensation calculation. When the primary color is retrieved again, subtle differences in color will be diluted or even invisible by the browser. Using the primary color determination method at this point can reduce errors.

[0062] In one embodiment, Figure 3 This is a flowchart of another page image display method provided by an embodiment of the present invention. Based on the above embodiments, this embodiment further refines the following steps: determining the main color in the original display image; determining the color similarity between at least two colors in the main color; transcoding the original display image to obtain a transcoded initial display image; determining the image compression result of the initial display image based on the color richness and a preset color richness threshold; and selecting a target display image based on the image compression result and the original size of the original display image.

[0063] like Figure 3 As shown, the page image display method in this embodiment may specifically include the following steps:

[0064] S310: Receive the original display image uploaded by the user terminal, and use the preset color-thief open-source tool to extract at least two main colors from the display image.

[0065] The primary color is returned as an array of three integers: red, green, and blue.

[0066] In this embodiment, the default open-source tool color-thief is an image color picking tool that can receive the original display image uploaded by the user and extract the four main colors of the image using the open-source tool color-thief.

[0067] S320: Convert the primary color into a color code in a preset base to obtain the primary color in the original display image.

[0068] In this embodiment, the primary color is converted into a color code in a preset base form to obtain the primary color in the original display image.

[0069] S330. Determine the first average value between the R channel of the first color and the R channel of the second color in the main color according to the preset first formula.

[0070] In this embodiment, a first average value between the R channels of the first color and the second color in the primary color can be determined according to a preset first formula. The first average value refers to the average value between the R channels of the first color and the second color. The preset first formula is expressed as follows: Among them, C 1,R Represented as the R channel of the first color, C 2,R This represents the R channel of the second color.

[0071] S340. Calculate the distance between the RGB three channels of the first color and the RGB three channels of the second color respectively.

[0072] In this embodiment, the primary color includes at least two colors, namely a first color and a second color; the first color and the second color are any two colors in the primary color; the distance includes: a first distance between R channels, a second distance between G channels, and a third distance between B channels. The distance in this embodiment can characterize the difference between the RGB channels of the first color and the RGB channels of the second color, and this difference includes: a first difference between R channels, a second difference between G channels, and a third difference between B channels.

[0073] In this embodiment, the distances between the RGB channels of the first color and the RGB channels of the second color are calculated respectively. For example, the primary colors include color 1, color 2, color 3, and color 4. The distances between the RGB channels of each pair of colors 1, 2, 3, and 4 are calculated. For example, the formula for calculating the RGB channel distance between color 1 and color 2 can be expressed as: First distance between R channels: ΔR = C 1,R -C 2,R The second distance between channels G: ΔG = C 1,G -C 2,G The third distance between channels B: ΔG = C 1,B -C 2,B Among them, C 1,R Represented as the R channel of color 1, C 2,R Represents the R channel of color 2; C 1,G The G channel, C, is represented as color 1. 2,G The G channel represents color 2; C 1,B Represented as the B channel of color 1, C 2,B This represents the B channel of color 2.

[0074] S350. Determine the first color similarity between the first color and the second color based on the first average value, the first distance, the second distance, and the third distance.

[0075] The first color similarity refers to the similarity between any two colors.

[0076] In this embodiment, the color similarity between the first color and the second color can be determined based on a first average value, a first distance, a second distance, and a third distance. Specifically, the color similarity between the first color and the second color can be expressed by the formula: Wherein, ΔR represents the first distance between R channels; ΔG represents the second distance between G channels; and ΔB represents the third distance between B channels. C 1,R Represented as the R channel of the first color, C 2,R This represents the R channel of the second color.

[0077] S360. Obtain the color similarity based on the second average value between each first color similarity, and determine the color richness of the original display image based on the color similarity.

[0078] Color similarity refers to the average of the first color similarities.

[0079] In this embodiment, the target color similarity is obtained based on the second average value among the first color similarities, and the color richness of the original display image is determined based on the target color similarity. This can be understood as follows: if the main color includes four colors, after calculating the color similarity of each of the four colors pairwise, the average value of each pair of color similarities is taken to obtain the target color similarity. The resulting value can be considered the final color richness of the image.

[0080] S370. Enable the Node.js service and use the preset cwebp-bin conversion tool to convert the original display image to a webp format initial display image.

[0081] In this embodiment, the Node.js service is enabled, and the preset cwebp-bin conversion tool is used to transcode the original display image to obtain the initial display image in webp format.

[0082] S380. When the color richness is less than or equal to the first preset color richness threshold, the image compression ratio of the initially displayed image is compressed using the first compression ratio to obtain the first compression result.

[0083] The first preset color richness threshold is a color richness threshold based on experience or user-defined.

[0084] In this embodiment, when the color richness of the original display image is less than or equal to the first preset color richness threshold, the image compression ratio of the initial display image is compressed using the first compression ratio to obtain the first compression result.

[0085] S390. When the color richness is greater than the first preset color richness threshold and less than the second preset color richness threshold, the image compression ratio of the initially displayed image is compressed using the second compression ratio to obtain the second compression result.

[0086] In this embodiment, when the color richness is greater than the first preset color richness threshold and less than the second preset color richness threshold, the image compression ratio of the initial display image is compressed using the second compression ratio to obtain the second compression result.

[0087] S3100: When the color richness is greater than or equal to the second preset color richness threshold, the image compression ratio of the initially displayed image is compressed using the third compression ratio to obtain the third compression result.

[0088] Wherein, the first preset color richness threshold is less than the second preset color richness threshold; the first compression ratio is less than the second compression ratio; and the second compression ratio is less than the third compression ratio. For example, the first preset color richness threshold is 45; the second preset color richness threshold is 90; the first compression ratio is 40%; the second compression ratio is 65%; and the third compression ratio is 85%.

[0089] In this embodiment, when the color richness of the original display image is greater than or equal to the second preset color richness threshold, the image compression ratio of the initial display image is compressed using a third compression ratio to obtain a third compression result. In this embodiment, different compression ratios are used for images with different color richness. For example, 50 is the first preset color richness threshold; 100 is the second preset color richness threshold; the first compression ratio is 50%; the second compression ratio is 75%; and the third compression ratio is 90%. Images with a color richness less than 50 use a 50% compression ratio, images with a color richness between 50 and 100 use a 75% compression ratio, and images with a color richness greater than 100 use a 90% compression ratio.

[0090] S3110. Compare the image compression result with the original size of the original displayed image.

[0091] In this embodiment, the image compression result is compared with the original size of the original displayed image to obtain the comparison result.

[0092] S3120. If the image compression result is less than or equal to the original size of the original display image, then the initial display image corresponding to the image compression result shall be used as the target display image, and the target display image and the original display image shall be uploaded to the file server for storage at the same time.

[0093] In this embodiment, if the image compression result is less than or equal to the original size of the original display image, the initial display image corresponding to the image compression result is used as the target display image, and both the target display image and the original display image are uploaded to the file server for storage.

[0094] S3130. If the image compression result is larger than the original size of the original display image, then the original display image is marked, and the marked original display image is uploaded to the file server as the target display image.

[0095] In this embodiment, if the compressed image size is larger than the original size of the displayed image, the original displayed image is marked, and the marked original displayed image is uploaded to the file server as the target displayed image. This can be understood as follows: for certain specific images, the compressed file size may be larger than the original image. Therefore, after converting the image to WebP, its size is compared with the original image, and the smaller image is used for storage. This embodiment does not limit the marking method; it can be that the original displayed image is marked as 1 when the compressed image size is larger than the original size of the displayed image; or it can be any other distinguishable method. This embodiment does not impose any restrictions on this method.

[0096] S3140: Receive the parameter information of the target display image reported by the file server, upload the target display image and its corresponding parameter information to the preset database for storage, and display the target display image on the front-end page.

[0097] The parameter information includes at least: the location of the target image on the file server, the image size, format, and resolution.

[0098] In this embodiment, the parameter information of the target display image reported by the file server is received, and the target display image and its corresponding parameter information are uploaded to a preset database for storage, and the target display image is displayed on the front-end page.

[0099] For example, to facilitate a better understanding of the page image processing process, Figure 4 This is a flowchart illustrating the processing of page images in a page image display according to an embodiment of the present invention. In this embodiment, Figure 4 The original image in the image is the original display image in the embodiment of the present invention, and the new image is the initial display image in the embodiment of the present invention; for example... Figure 4As shown, for user-uploaded images, the image type is first validated. If the validation fails, a validation failure result and reason are returned. If the validation passes, the color similarity between at least two colors in the main color is determined, and the color richness of the original display image is determined based on the color similarity. The original display image is then transcoded to obtain an initial display image in WebP format. The image compression result of the initial display image is determined based on the color richness and a preset color richness threshold. The compressed image result is compared with the original size of the original display image. If the original size of the original display image is larger than the compressed image result, the initial display image corresponding to the compressed image result is used as the target display image, and both the target display image and the original display image are uploaded to the file server for storage. If the original size of the original display image is less than or equal to the compressed image result, the original display image is marked, and the marked original display image is uploaded to the file server as the target display image. Finally, the image parameter information is returned to the front-end page.

[0100] The above technical solution of this invention determines the first average value between the R channels of the first color and the second color in the main color according to a preset first formula, calculates the distances between the RGB three channels of the first color and the RGB three channels of the second color respectively, determines the color similarity between the first color and the second color based on the first average value, the first distance, the second distance, and the third distance, obtains the target color similarity based on the second average value between each color similarity, enables the Node.js service, and uses the preset cwebp-bin conversion tool to convert the original display image to the webp format to obtain the initial display image. This further enables the use of webp lossy compression for image conversion, which requires significantly less compression time than lossless compression, results in a smaller compressed file size, and reduces the time required for front-end image loading, thus improving front-end loading efficiency. Furthermore, by setting the color richness to less than or equal to a first preset color richness threshold... In the initial display image, a first compression ratio is used to compress the image, resulting in a first compression result. If the color richness is greater than a first preset color richness threshold but less than a second preset color richness threshold, a second compression ratio is used to compress the image, resulting in a second compression result. If the color richness is greater than or equal to the second preset color richness threshold, a third compression ratio is used to compress the image, resulting in a third compression result. This allows for the application of different compression ratios for images with varying color richness, reducing conversion time and file size while maintaining clarity, improving image quality, and enhancing image display efficiency with high compatibility. By comparing the image compression result with the original size of the original display image, a target display image is selected based on the comparison result for display and saving, further ensuring loading speed while maximizing image clarity.

[0101] In one embodiment, to facilitate a better understanding of the architecture of the page image display, Figure 5 This is a diagram illustrating an architecture for displaying page images according to an embodiment of the present invention. Figure 5As shown in the diagram, the architecture includes a front-end page, server nodes, a pre-defined database (DB), and a file server. In this embodiment, image loading efficiency is ensured while also considering image compatibility and quality. For image storage, an image processing server or node is added between the client and server. Based on the image's color contrast, an appropriate compression ratio is selected for compression. The compressed image is compared to the original image in size, and a suitable file is selected for storage. For image display, image links are processed before display. For browsers that do not support WebP format, libwebp, which uses Wasm encoding, converts the WebP image to base64 encoding before display. For browsers that do not even support Wasm, the original image is displayed directly.

[0102] In one embodiment, Figure 6 This is a structural block diagram of a page image display device according to an embodiment of the present invention. This device is suitable for displaying images loaded on a front-end page and can be implemented in hardware or software. It can be configured in an electronic device to implement a page image display method according to an embodiment of the present invention.

[0103] like Figure 6 As shown, the device includes: a primary color determination module 610, a richness determination module 620, a compression module 630, and a display module 640.

[0104] The primary color determination module 610 is used to receive the original display image uploaded by the user terminal and determine the primary color in the original display image; wherein the primary color includes at least two colors;

[0105] The color richness determination module 620 is used to determine the color similarity between at least two colors in the main color, and to determine the color richness of the original display image based on the color similarity.

[0106] Compression module 630 is used to transcode the original display image to obtain a transcoded initial display image, and to determine the image compression result of the initial display image based on the color richness and a preset color richness threshold.

[0107] The display module 640 is used to select a target display image based on the image compression result and the original size of the original display image, and display the target display image on the front-end page.

[0108] In this embodiment of the invention, the color richness determination module determines the primary color in the original display image and the color similarity between at least two colors within that primary color. Based on the color similarity, it determines the color richness of the original display image and then transcodes the original display image to obtain a transcoded initial display image. This enables image conversion using WebP lossy compression, which requires significantly less compression time than lossless compression, resulting in a smaller compressed file size and reduced loading time on the front end, thus improving front-end loading efficiency. The compression module determines the image compression result of the initial display image based on the color richness and a preset color richness threshold. The display module selects a target display image based on the image compression result and the original size of the original display image and displays the target display image on the front-end page. This allows for the use of different compression ratios for images with varying color richness, reducing conversion time and file size while maintaining clarity, thereby improving image quality and display efficiency, and offering high compatibility.

[0109] In one embodiment, the primary color determination module 610 includes:

[0110] An extraction unit is used to extract at least two primary colors from the original display image using a preset open-source color-thief tool; wherein the primary colors are returned as an array of three integers with red, green, and blue values;

[0111] The conversion unit is used to convert the main color into a color code in a preset base form to obtain the main color in the original display image.

[0112] In one embodiment, the device further includes:

[0113] The modification module is used to draw the original display image using the canvas tag drawing tool when the color of the original display image is in an extreme color situation, before determining the main color in the original display image, and to change the size of the original display image to obtain the original display image in a new size form;

[0114] The compensation module is used to perform color compensation on the original display image in the new size format; wherein the size reduction ratio is based on prime number form.

[0115] In one embodiment, at least two colors in the primary color include a first color and a second color; the first color and the second color are any two colors in the primary color; correspondingly, the richness determination module 620 includes:

[0116] The first determining unit is configured to determine a first average value between the R channel of the first color and the R channel of the second color in the primary color according to a preset first formula; wherein, the preset first formula is expressed as follows: Among them, C 1,R Represented as the R channel of the first color, C 2,R This represents the R channel of the second color;

[0117] The distance calculation unit is used to calculate the distance between the RGB three channels of the first color and the RGB three channels of the second color respectively; the distance includes: a first distance between the R channels, a second distance between the G channels and a third distance between the B channels;

[0118] The second determining unit is configured to determine a first color similarity between the first color and the second color based on the first average value, the first distance, the second distance, and the third distance;

[0119] The third determining unit is used to obtain the color similarity based on the second average value among the first color similarities.

[0120] In one embodiment, the compression module 630 includes:

[0121] The format transcoding unit is used to enable the Node.js service and use the preset cwebp-bin conversion tool to transcode the original display image to obtain an initial display image in webp format.

[0122] In one embodiment, the compression module 630 further includes:

[0123] The first result unit is used to compress the image of the initial display image using a first compression ratio when the color richness is less than or equal to a first preset color richness threshold, so as to obtain a first compression result.

[0124] The second result unit is used to compress the image of the initial display image using a second compression ratio when the color richness is greater than the first preset color richness threshold and less than the second preset color richness threshold, so as to obtain a second compression result.

[0125] The third result unit is used to compress the image of the initial display image using a third compression ratio when the color richness is greater than or equal to the second preset color richness threshold, so as to obtain a third compression result.

[0126] Wherein, the first preset color richness threshold is less than the second preset color richness threshold; the first compression ratio is less than the second compression ratio; and the second compression ratio is less than the third compression ratio.

[0127] In one embodiment, the display module 640 includes:

[0128] A comparison unit is used to compare the image compression result with the original size of the original displayed image;

[0129] The first result determination unit is used to, if the image compression result is less than or equal to the original size of the original display image, take the initial display image corresponding to the image compression result as the target display image, and simultaneously upload the target display image and the original display image to the file server for storage.

[0130] The second result determination unit is used to mark the original display image if the image compression result is larger than the original size of the original display image, and upload the marked original display image as the target display image to the file server.

[0131] The storage unit is used to receive parameter information of the target display image reported by the file server, and upload the target display image and its corresponding parameter information to a preset database for storage; wherein, the parameter information includes at least: the location information of the target display image in the file server, image size, format and resolution.

[0132] In one embodiment, the process of displaying the target display image on the front-end page includes:

[0133] The image link of the target display image is obtained through a preset custom instruction, and it is determined whether the target display image is marked.

[0134] If there is a marker, the target display image is determined to be the original display image, and the original display image is displayed directly;

[0135] If no marker is found, the target display image is determined to be the initial display image. The system then checks whether the front-end page supports the WebP format for the initial display image. If WebP is supported, the initial display image is displayed directly. If WebP is not supported, the system checks whether Wasm is supported. If Wasm is supported, the Wasm file is loaded, and the WebP image is decoded into base64 using the Wasm file for rendering and display. If Wasm is not supported, the libwebp.js file is loaded, and the WebP image is decoded into base64 using the libwebp.js file for rendering and display.

[0136] The page image display device provided in the embodiments of the present invention can execute the page image display processing method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the method execution.

[0137] In one embodiment, Figure 7This is a schematic diagram of an electronic device provided for an embodiment of the present invention. The electronic device 10 is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, servers, blade servers, mainframe computers, and other suitable computers. The electronic device may also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices (such as helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the invention described and / or claimed herein.

[0138] like Figure 7 As shown, the electronic device 10 includes at least one processor 11 and a memory, such as a read-only memory (ROM) 12 or a random access memory (RAM) 13, communicatively connected to the at least one processor 11. The memory stores computer programs executable by the at least one processor. The processor 11 can perform various appropriate actions and processes based on the computer program stored in the ROM 12 or loaded from storage unit 18 into the RAM 13. The RAM 13 may also store various programs and data required for the operation of the electronic device 10. The processor 11, ROM 12, and RAM 13 are interconnected via a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.

[0139] Multiple components in electronic device 10 are connected to I / O interface 15, including: input unit 16, such as keyboard, mouse, etc.; output unit 17, such as various types of displays, speakers, etc.; storage unit 18, such as disk, optical disk, etc.; and communication unit 19, such as network card, modem, wireless transceiver, etc. Communication unit 19 allows electronic device 10 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.

[0140] Processor 11 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. Processor 11 performs the various methods and processes described above, such as page image display methods.

[0141] In some embodiments, the page image display processing method may be implemented as a computer program tangibly contained in a computer-readable storage medium, such as storage unit 18. In some embodiments, part or all of the computer program may be loaded and / or installed on electronic device 10 via ROM 12 and / or communication unit 19. When the computer program is loaded into RAM 13 and executed by processor 11, one or more steps of the page image display method described above may be performed. Alternatively, in other embodiments, processor 11 may be configured to perform the page image display method by any other suitable means (e.g., by means of firmware).

[0142] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.

[0143] Computer programs used to implement the methods of the present invention can be written in any combination of one or more programming languages. These computer programs can be provided to the processor of a general-purpose computer, a special-purpose computer, or other programmable page-viewing device, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be implemented. The computer programs can be executed entirely on the machine, partially on the machine, as a standalone software package partially on the machine and partially on a remote machine, or entirely on a remote machine or server.

[0144] In the context of this invention, a computer-readable storage medium can be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination thereof. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.

[0145] To provide interaction with a user, the systems and techniques described herein can be implemented on an electronic device having: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the electronic device. Other types of devices can also be used to provide interaction with the user; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or tactile feedback); and input from the user can be received in any form (including sound input, voice input, or tactile input).

[0146] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or computing systems that include middleware components (e.g., application servers), or computing systems that include frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.

[0147] A computing system can include clients and servers. Clients and servers are generally located far apart and typically interact through communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a hosting product within the cloud computing service system to address the shortcomings of traditional physical hosts and VPS services, such as high management difficulty and weak business scalability.

[0148] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps described in this invention can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this invention can be achieved, and this is not limited herein.

[0149] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A method for displaying page images, characterized in that, Applied to a server node, the method includes: Receive the original display image uploaded by the user and determine the main color in the original display image; wherein the main color includes at least two colors; Determine the color similarity between at least two colors in the primary color, and determine the color richness of the original display image based on the color similarity; The original display image is transcoded to obtain the transcoded initial display image, and the image compression result of the initial display image is determined according to the color richness and the preset color richness threshold. Based on the image compression result and the original size of the original display image, a target display image is selected and displayed on the front-end page; Wherein, at least two colors in the primary color include a first color and a second color; the first color and the second color are any two colors in the primary color; correspondingly, determining the color similarity between at least two colors in the primary color includes: A first average value between the R channel of the first color and the R channel of the second color in the primary color is determined according to a preset first formula; wherein, the preset first formula is expressed as follows: ,in, This is represented by the R channel of the first color. This represents the R channel of the second color; Calculate the distances between the RGB channels of the first color and the RGB channels of the second color respectively; the distances include: the first distance between the R channels, the second distance between the G channels, and the third distance between the B channels; The first color similarity between the first color and the second color is determined based on the first average value, the first distance, the second distance, and the third distance; The color similarity is obtained based on the second average value among the first color similarities.

2. The method according to claim 1, characterized in that, Before determining the primary color in the original display image, the method further includes: When the colors of the original display image are in extreme color conditions, the original display image is drawn using the canvas tag drawing tool, and the size of the original display image is changed to obtain a new size form of the original display image; Color compensation is applied to the original display image in the new size format; wherein the size reduction ratio is calculated in prime number form.

3. The method according to claim 1, characterized in that, Determining the primary color in the original display image includes: Using the pre-defined open-source color-thief tool, extract at least two primary colors from the original display image; wherein the primary colors are returned as an array of three integers with red, green, and blue values; The primary color is converted into a color code in a preset base form to obtain the primary color in the original display image.

4. The method according to claim 1, characterized in that, The step of transcoding the original display image to obtain the transcoded initial display image includes: Enable the Node.js service and use the preset cwebp-bin conversion tool to convert the original display image to obtain the initial display image in webp format.

5. The method according to claim 1, characterized in that, Determining the image compression result of the initial display image based on the color richness and a preset color richness threshold includes: When the color richness is less than or equal to a first preset color richness threshold, the image compression ratio of the initial display image is used to compress it using a first compression ratio to obtain a first compression result; When the color richness is greater than the first preset color richness threshold and less than the second preset color richness threshold, the image compression ratio of the initial display image is compressed using the second compression ratio to obtain the second compression result; When the color richness is greater than or equal to the second preset color richness threshold, the image compression ratio of the initial display image is compressed using a third compression ratio to obtain a third compression result; Wherein, the first preset color richness threshold is less than the second preset color richness threshold; the first compression ratio is less than the second compression ratio; and the second compression ratio is less than the third compression ratio.

6. The method according to claim 1, characterized in that, The step of selecting the target display image based on the image compression result and the original size of the original display image includes: The image compression result is compared with the original size of the original displayed image; If the image compression result is less than or equal to the original size of the original display image, then the initial display image corresponding to the image compression result is used as the target display image, and the target display image and the original display image are simultaneously uploaded to the file server for storage. If the image compression result is larger than the original size of the original display image, then the original display image is marked, and the marked original display image is uploaded to the file server as the target display image; The system receives parameter information of the target display image reported by the file server and uploads the target display image and its corresponding parameter information to a preset database for storage. The parameter information includes at least the location information, image size, format, and resolution of the target display image in the file server.

7. The method according to claim 1, characterized in that, The process of displaying the target image on the front-end page includes: The image link of the target display image is obtained through a preset custom instruction, and it is determined whether the target display image is marked. If there is a marker, the target display image is determined to be the original display image, and the original display image is displayed directly; If no marker is found, the target display image is determined to be the initial display image. The system then proceeds to determine if the front-end page supports the WebP format initial display image. If the WebP format is supported, the initial display image is displayed directly. If the WebP format is not supported, the system continues to determine if Wasm is supported. If Wasm is supported, the Wasm file is loaded, and the WebP format image is decoded into base64 using the Wasm file for rendering and display. If Wasm is not supported, the libwebp.js file is loaded, and the WebP format image is decoded into base64 using the libwebp.js file for rendering and display.

8. An electronic device, characterized in that, The electronic device includes: At least one processor; and A memory communicatively connected to the at least one processor; wherein, The memory stores a computer program that can be executed by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the page image display method according to any one of claims 1-7.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that cause a processor to execute the page image display method according to any one of claims 1-7.

Images