Text component rendering method and device

By detecting the color of text components and using masked base plate or gradient rendering technology, the problem of text components not adapting to background images is solved, improving user experience and recognition, and reducing R&D time and cost.

CN120147474APending Publication Date: 2025-06-13BEIJING WODONG TIANJUN INFORMATION TECH CO LTD +1
View PDF 0 Cites 0 Cited by

Patent Information

Application Number
CN202311694397.4
Authority / Receiving Office
CN · China
Patent Type
Applications(China)
Current Assignee / Owner
Filing Date
2023-12-11
Publication Date
2025-06-13

AI Technical Summary

Technical Problem

In the prior art, the text components of the front-end page are not adapted to the background image, which makes it impossible for users to accurately identify text, reduces user experience, and requires a lot of research and development time to perform page adaptation operations.

Method used

By detecting the text color and background color of the text component, judging its similarity and solid color, use masked base plate or gradient rendering technology to adjust the rendering effect of the text component to improve recognition and visual experience.

Benefits of technology

It realizes the rendering effect of text components quickly and accurately, improves user experience, ensures that the text content matches the background image color, and reduces R&D time and cost.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN120147474A_ABST
    Figure CN120147474A_ABST
Patent Text Reader

Abstract

The invention discloses a text component rendering method and device, and relates to the technical field of computers. A specific embodiment of the text component rendering method comprises the following steps: in response to a detected text component, determining a text color and a background color corresponding to the text component; judging whether the text color and the background color meet a preset similar condition or not, and judging whether the background color belongs to a pure color or not; and under the condition that the text color and the background color meet similar conditions and the background color belongs to a pure color, determining a target gray value according to the gray value of the text color and the gray value of the background color, and adding a corresponding mask layer bottom plate into the text component according to the target gray value, so that the text content included in the text component is located on the mask layer bottom plate. According to the embodiment, after the text color and the background color are judged, the mask layer bottom plate is generated according to the text color and the background color, the rendering effect of the text component can be adjusted in time, the recognition degree of the text component is improved, and the user experience is improved.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular, to a method and apparatus for rendering text components. Background Art

[0002] The front-end page is used to display text and numbers of various styles and colors, as well as background images of various styles and tones. The text, numbers, and background images are integrated to give users a good visual experience. To provide users with a good visual experience, usually before publishing the page, the designer provides the background image, and the developer performs a large number of page adaptation operations to ensure that the user experience is consistent with the design intention. For example, the text component and the background image are distinguished by adjusting the text color, and the style of the text component is made consistent with the style of the background image by adjusting the text style, etc. After the background image is changed or the text is adjusted, it is necessary to re-perform the page adaptation operation and publish a new page.

[0003] In the process of implementing the present invention, the inventor found that the prior art has at least the following problems:

[0004] From the discovery that the text and the picture are not well-matched to the publication of a new page, it takes a period of R & D time, and users cannot accurately recognize the text on the front-end page, reducing the user experience. Summary of the Invention

[0005] In view of this, embodiments of the present invention provide a method and apparatus for rendering text components, which can timely adjust the rendering effect of text components, improve the recognition degree of text components, and improve the user experience.

[0006] To achieve the above object, according to the first aspect of the embodiments of the present invention, a method for rendering a text component is provided, including:

[0007] In response to detecting a text component, determining the text color and the background color corresponding to the text component;

[0008] Judging whether the text color and the background color meet a preset similarity condition, and judging whether the background color belongs to a solid color;

[0009] When the text color and the background color meet the similarity condition and the background color belongs to a solid color, determining a target gray value according to the gray value of the text color and the gray value of the background color, and adding a corresponding mask bottom plate to the text component according to the target gray value, so that the text content included in the text component is located above the mask bottom plate.

[0010] Optionally, when the text color and the background color meet the similarity condition and the background color does not belong to a solid color, the method further includes:

[0011] Determine the gradient values of the background color in the horizontal and vertical directions according to the Sobel operator;

[0012] Determine the corresponding gradient transformation speed according to the gradient values of the background color in the horizontal and vertical directions, and judge whether the background color belongs to a gradient color according to the gradient transformation speed;

[0013] In the case where the background color belongs to a gradient color, determine the gradient direction of the background color, determine the adjacent color of the background color, and render the text content included in the text component as gradient text content according to the gradient direction and the adjacent color.

[0014] Optionally, determining the gradient direction of the background color includes:

[0015] Obtain a color image of the background color and determine the gradient intensity of each pixel included in the color image;

[0016] Determine the average intensity corresponding to each angle within a preset angle range;

[0017] Determine the maximum average intensity from the average intensities corresponding to all angles, take the angle corresponding to the maximum average intensity as the target angle, and take the target angle as the gradient direction of the background color.

[0018] Optionally, before determining the gradient intensity of each pixel included in the color image, the method further includes:

[0019] Determine the corresponding gradient change rate according to the gradient value;

[0020] Determine that the gradient change rate meets a preset gradient condition.

[0021] Optionally, determining the adjacent color of the background color includes:

[0022] Determine the similar color corresponding to the background color in a preset 24 - hue color wheel;

[0023] In the 24 - hue color wheel, query the color whose included angle with the similar color is equal to a preset associated angle according to a preset query order, and take the queried color as the adjacent color of the background color.

[0024] Optionally, judging whether the background color belongs to a pure color includes:

[0025] Obtain a grayscale image of the background color, and determine the corresponding pixel average value according to the pixel values included in the grayscale image;

[0026] Determine the variance corresponding to the grayscale image according to the pixel average value;

[0027] Determine the standard deviation corresponding to the grayscale image according to the variance corresponding to the grayscale image;

[0028] When the variance and the standard deviation meet the preset statistical conditions, determine that the background color belongs to a solid color.

[0029] Optionally, determining the background color corresponding to the text component includes:

[0030] Obtain a color image of the background color, and obtain a plurality of pixel values of the color image, each pixel value including a plurality of color channels;

[0031] Perform statistics on the plurality of pixel values to determine the target color with the largest cumulative quantity in each color channel;

[0032] Determine the background color corresponding to the text component according to the target color corresponding to each color channel.

[0033] According to a second aspect of the embodiments of the present invention, there is provided a rendering device for a text component, including:

[0034] A determination module, configured to determine the text color and the background color corresponding to the text component in response to detecting the text component;

[0035] A determination module, configured to determine whether the text color and the background color meet the preset similarity conditions, and determine whether the background color belongs to a solid color;

[0036] A rendering module, configured to, when the text color and the background color meet the similarity conditions and the background color belongs to a solid color, determine a target gray value according to the gray value of the text color and the gray value of the background color, and add a corresponding mask bottom plate to the text component according to the target gray value, so that the text content included in the text component is located above the mask bottom plate.

[0037] Optionally, the device further includes:

[0038] A second determination module, configured to determine the gradient values of the background color in the horizontal direction and the vertical direction according to the Sobel operator;

[0039] A second determination module, configured to determine a corresponding gradient change speed according to the gradient values of the background color in the horizontal direction and the vertical direction, and determine whether the background color belongs to a gradient color according to the gradient change speed;

[0040] A second rendering module, configured to, when the background color belongs to a gradient color, determine the gradient direction of the background color, determine the adjacent color of the background color, and render the text content included in the text component as a gradient color text content according to the gradient direction and the adjacent color.

[0041] Optionally, determining the gradient direction of the background color includes:

[0042] Obtain a color image of the background color, and determine the gradient intensity of each pixel included in the color image;

[0043] Within a preset angle range, determine the average intensity corresponding to each angle;

[0044] Determine the maximum average intensity from the average intensities corresponding to all angles, use the angle corresponding to the maximum average intensity as the target angle, and use the target angle as the gradient direction of the background color.

[0045] Optionally, the apparatus further includes:

[0046] A third determination module, configured to determine a corresponding gradient change rate according to the gradient value;

[0047] A third determination module, configured to determine whether the gradient change rate meets a preset gradient condition.

[0048] Optionally, determining the adjacent color of the background color includes:

[0049] Determine a similar color corresponding to the background color in a preset 24-color wheel;

[0050] In the 24-color wheel, according to a preset query order, query for a color whose included angle with the similar color is equal to a preset associated angle, and use the queried color as the adjacent color of the background color.

[0051] Optionally, determining whether the background color belongs to a pure color includes:

[0052] Obtain a grayscale image of the background color, and determine a corresponding pixel average value according to the pixel values included in the grayscale image;

[0053] Determine the variance corresponding to the grayscale image according to the pixel average value;

[0054] Determine the standard deviation corresponding to the grayscale image according to the variance corresponding to the grayscale image;

[0055] When the variance and the standard deviation meet preset statistical conditions, determine that the background color belongs to a pure color.

[0056] Optionally, determining the background color corresponding to the text component includes:

[0057] Obtaining a color image of the background color, obtaining a plurality of pixel values of the color image, and each pixel value includes a plurality of color channels;

[0058] Performing statistics on the plurality of pixel values to determine a target color with the largest cumulative quantity in each color channel;

[0059] Determining the background color corresponding to the text component according to the target color corresponding to each color channel.

[0060] According to a third aspect of an embodiment of the present invention, there is provided an electronic device, including:

[0061] One or more processors;

[0062] A storage device for storing one or more programs,

[0063] When the one or more programs are executed by the one or more processors, the one or more processors implement the method described in any of the above embodiments.

[0064] According to a fourth aspect of an embodiment of the present invention, there is provided a computer-readable medium having a computer program stored thereon, and when the program is executed by a processor, the method described in any of the above embodiments is implemented.

[0065] An embodiment of the above invention has the following advantages or beneficial effects: After determining the text color and the background color, a mask bottom plate is generated according to the text color and the background color, which can timely adjust the rendering effect of the text component, improve the recognition degree of the text component, and improve the user experience; by using the Sobel operator to determine that the background color belongs to a gradient color, determining the gradient direction and adjacent color of the background color, and rendering the text content as a gradient color text content according to the gradient direction and adjacent color, the text content can be made to match the background image in terms of color, improving the user's visual experience; determining the intensity average value according to the gradient intensity and determining the gradient direction according to a plurality of intensity average values can quickly and accurately determine the gradient direction; determining the similar color corresponding to the background color in the 24-color phase ring and determining the adjacent color according to the correlation angle can flexibly and efficiently determine the adjacent color to meet different color requirements; judging that the background color belongs to a pure color according to the variance and standard deviation corresponding to the grayscale image can improve the accuracy and efficiency of the determination; performing statistics on a plurality of pixel values to determine the target color with the largest cumulative quantity in each color channel can quickly and accurately determine the background color.

[0066] The further effects of the above non-conventional optional methods will be described below in conjunction with specific embodiments. Description of the Drawings

[0067] The accompanying drawings are used to better understand the present invention and do not constitute an improper limitation to the present invention. Among them:

[0068] Figure 1 is a schematic diagram of the main process of the rendering method of the text component according to an embodiment of the present invention;

[0069] Figure 2 is a schematic diagram of the hierarchical relationship between system components according to a referenceable embodiment of the present invention;

[0070] Figure 3 is a schematic diagram of the main process of the similarity condition determination according to a referenceable embodiment of the present invention;

[0071] Figure 4 is a schematic diagram of the main process of the solid color determination according to a referenceable embodiment of the present invention;

[0072] Figure 5 is a schematic diagram of the rendering effect of the text component according to a referenceable embodiment of the present invention;

[0073] Figure 6 is a schematic diagram of the main process of the gradient color determination according to another referenceable embodiment of the present invention;

[0074] Figure 7 is a schematic diagram of the main modules of the rendering device of the text component according to an embodiment of the present invention;

[0075] Figure 8 is an exemplary system architecture diagram to which the embodiments of the present invention can be applied;

[0076] Figure 9 is a schematic diagram of the structure of a computer system of a terminal device or a server suitable for implementing the embodiments of the present invention. Detailed implementation manners

[0077] The following makes an explanation of the exemplary embodiments of the present invention in conjunction with the accompanying drawings. Among them, various details of the embodiments of the present invention are included to facilitate understanding, and they should be considered merely exemplary. Therefore, those of ordinary skill in the art should recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the present invention. Similarly, for the sake of clarity and conciseness, the description of well-known functions and structures is omitted below.

[0078] It should be noted that in the technical solution of the present invention, the collection, use, storage, sharing, transfer and other processing of the user's personal information involved all comply with the provisions of relevant laws and regulations, and the user needs to be informed and obtain the consent or authorization of the user. When applicable, technical processing such as de-identification and / or anonymization and / or encryption is performed on the user's personal information.

[0079] The front-end page is used to display texts, numbers in various styles and colors, and background images in various styles and hues. The texts, numbers, and background images are integrated to give users a good visual experience. To provide users with a good visual experience, usually before publishing the page, the designer provides the background image, and the developer performs a large number of page adaptation operations to ensure that the user experience is consistent with the design intention. For example, the text components and the background image are distinguished by adjusting the text color, and the style of the text components is made consistent with the style of the background image by adjusting the text style, etc. After the background image is changed or the text is adjusted, it is necessary to re-perform the page adaptation operation and publish a new page.

[0080] From the discovery of the mismatch between the text and the picture to the publication of the new page, it takes a period of R & D time. Users cannot accurately identify the text on the front-end page, which reduces the user experience. It consumes a large amount of R & D costs and has low R & D efficiency.

[0081] In view of this, according to the first aspect of the embodiments of the present invention, a rendering method for text components is provided.

[0082] Figure 1 It is a schematic diagram of the main process of the rendering method for text components according to the embodiments of the present invention. As Figure 1 shown, the rendering method for text components according to the embodiments of the present invention mainly includes the following steps S101 to step S103.

[0083] Step S101, in response to detecting a text component, determine the text color and background color corresponding to the text component.

[0084] The front-end page includes multiple components such as text components, picture components, layout components, etc. Among them, the text component is used to display text content such as texts, numbers, symbols, etc., and the picture component is used to display the background image. The background image includes: a background image containing text information and a background image for decorating the page. To give users a better visual experience, the text component is placed above the picture component, so that the text component and the picture component are in an overlapping state, and the text content included in the text component is above the background image included in the picture component.

[0085] Figure 2 It is a schematic diagram of the hierarchical relationship between system components according to a reference embodiment of the present invention. Exemplarily, as Figure 2As shown, the front-end interface 201 is a mobile phone screen interface. On the front-end interface 201, there is a drawing area, which includes multiple picture components and multiple text components. Among them, text component 1 is above picture component 1, text component 2 is above picture component 2. Text component 1 and picture component 1 are in an overlapping state, and text component 2 and picture component 2 are in an overlapping state. The picture color of picture component 1 is the background color of text component 1, and the picture color of picture component 2 is the background color of text component 2.

[0086] The execution entity of the embodiment of the present invention detects the front-end page. After detecting the text component, it determines the text color corresponding to the text component, that is, the color of the text content included in the text component, and the background color corresponding to the text component, that is, the color of the background image included in the picture component located below the text component. Specifically, the execution entity of the embodiment of the present invention queries the page element information to obtain the color of the text content. When determining the background color, first obtain the color image that is the background color of the text component. Exemplarily, the color image includes multiple pixel points. The execution entity of the embodiment of the present invention obtains a pixel point at a certain interval on the color image, determines the color value of the pixel point, calculates the average value of the color values of all the obtained pixel points, and takes the color corresponding to the average value of the color values as the background color.

[0087] Exemplarily, the execution entity of the embodiment of the present invention locates the text component according to the page element, then determines the CSS (Cascading Style Sheets) information for rendering the text component, obtains the hexadecimal color value corresponding to the "color" field from the CSS information, gets "#636363", converts the hexadecimal color value to an RGB (Red Green Blue, a color system including red, green, and blue) color value, gets [99, 99, 99], and determines that the text color corresponding to the text component is dark gray. The execution entity of the embodiment of the present invention obtains the color image of the background color of the text component. In the case where the color image is not obtained, it hides the text content included in the text component, intercepts the area where the text component is located, and generates the color image of the background color. The color image includes a 9×9 pixel matrix. For each row of pixels, every 2 pixel points, a pixel point's color value is determined, that is, 3 pixel points' color values are determined for each row, so a total of (3×9) = 27 pixel points' color values are obtained. The average value of these 27 pixel points' color values is obtained, and the obtained average value is [240, 234, 232], and the above average value is taken as the background color corresponding to the text component.

[0088] According to the page element information and pixel point information of the text component, the corresponding text color and background color can be accurately and quickly determined, providing a data basis for re-rendering the text component.

[0089] According to a reference embodiment of the present invention, when determining the background color corresponding to the text component, first obtain a color image of the background color. In the case where the color image corresponding to the background color is not obtained, hide the text content included in the text component. In the case where the text component and the picture component are in an overlapping state, intercept the area corresponding to the text component, so as to obtain a color image that only includes the background color of the text component and does not include the text content of the text component. After obtaining the color image, determine a plurality of pixel values included in the color image. Each pixel value includes a plurality of color channels. For example, 3 color channels such as blue, red, and green, or 4 color channels such as cyan, magenta, yellow, and black. Statistically analyze the plurality of pixel values, count the number of colors in each color channel, and determine the target color with the largest cumulative number in each color channel; combine the target colors corresponding to each color channel in the order of the color channels, and use the combined color as the background color corresponding to the text component.

[0090] Exemplarily, the execution entity of the embodiment of the present invention uses OpenCV to load the color image of the background color, converts the color image into a plurality of one-dimensional arrays, and each array represents the color value of a pixel point. The color value is composed of three color channels of BGR (Blue Green Red). Among the plurality of one-dimensional arrays, count the color value that appears the most times in each color channel. For example, the color values that appear in the blue channel include: 2 "230", 3 "231", and 95 "232". Since the cumulative number of the color value "232" is the largest, the color value of the blue channel is set to "232", and the same applies to the red channel and the green channel. Finally, the determined color values of the three color channels are "[232, 234, 252]", and the color corresponding to the color value "[232, 234, 252]" is used as the background color.

[0091] Determining the color value of each color channel according to the color value with the largest cumulative number can quickly and accurately determine the background color corresponding to the text component, make the determined background color more in line with the viewing effect of visual senses, and provide a data basis for re-rendering the text component.

[0092] Step S102, determine whether the text color and the background color meet the preset similarity conditions, and determine whether the background color belongs to a pure color.

[0093] After determining the text color and background color corresponding to the text component, the execution subject of the embodiment of the present invention converts the text color and background color into Lab color space values that conform to human visual perception, then calculates the Euclidean distance between the two color values in the Lab color space, performs normalization processing on the Euclidean distance, and uses the normalized Euclidean distance as the similarity between the text color and the background color. When the similarity is less than or equal to a pre-set similarity threshold, it is determined that the similarity condition is met; when the similarity is greater than the pre-set similarity threshold, it is determined that the similarity condition is not met. The closer the similarity is to zero, the higher the similarity between the text color and the background color, that is, the more difficult it is to distinguish between the text color and the background color. On the contrary, the greater the difference between the similarity and zero, the lower the similarity between the text color and the background color, that is, the easier it is to distinguish between the text color and the background color.

[0094] Exemplarily, the RGB color value of the text color is "[255, 255, 255]", and the RGB color value of the background color is "[240, 234, 232]". The text color is converted into the Lab color space, and the Lab color value of the text color is obtained as "[255, 128, 128]". The background color is converted into the Lab color space, and the Lab color value of the background color is obtained as "[240, 134, 131]". Using the pre-set formula: Calculate the Euclidean distance between the above two Lab color values, where d represents the Euclidean distance between the text color and the background color, l 1 and l 2 respectively represent the brightness of the text color and the brightness of the background color, a 1 and a 2 respectively represent the component from green to red in the text color and the component from green to red in the background color, b 1 and b 2 respectively represent the component from blue to yellow in the text color and the component from blue to yellow in the background color. Use the pre-set normalization formula to perform normalization processing on the Euclidean distance: v = d / factor, where v represents the normalized Euclidean distance (i.e., the similarity between the text color and the background color), and factor represents the normalization factor value. For example, the normalization factor value can be 255. According to the above formula, the similarity between the text color and the background color is determined to be approximately 0.06. Since the similarity 0.06 is less than the pre-set similarity threshold 0.1, it is determined that the text color and the background color meet the similarity condition, indicating that the similarity between the text color and the background color is relatively high, and it is difficult for the user to distinguish between the text color and the background color, which is likely to reduce the user experience.

[0095] Figure 3 is a schematic diagram of the main process for determining the similarity condition according to a reference embodiment of the present invention. Again exemplarily, asFigure 3 As shown, obtain the text color and the background color, convert the text color and the background color into Lab color space values respectively, determine the Euclidean distance between the two Lab color space values, perform normalization processing on the Euclidean distance, and determine whether the normalized Euclidean distance is less than or equal to a pre-set similarity threshold. If so, it is determined that the text color and the background color meet the similarity condition; otherwise, it is determined that the text color and the background color do not meet the similarity condition.

[0096] When determining whether the background color is a solid color, the execution subject of the embodiment of the present invention makes a judgment based on the color image or grayscale image of the background color. Exemplarily, each pixel value of the color image is determined according to the arrangement order of pixel points, and it is determined whether all the pixel values included in the color image are equal. In the case where there are pixel points with unequal pixel values, it is determined that the background color is not a solid color; in the case where the pixel values of all pixel points included in the color image are equal, it is determined that the background color is a solid color.

[0097] It should be noted that the order of the two judgment processes of determining whether the text color and the background color meet the similarity condition and determining whether the background color is a solid color can be reversed, that is, it can be determined first whether the text color and the background color meet the similarity condition, or it can be determined first whether the background color is a solid color. The embodiment of the present invention does not limit the above judgment order.

[0098] By judging the similarity between the text color and the background color, it is possible to quickly and accurately determine whether the text color and the background color are easy to distinguish, so that in the case of being not easy to distinguish, the text component can be re-rendered; judging whether the background color is a solid color can facilitate determining the rendering method of the text component and can provide a good visual experience for users.

[0099] According to a reference embodiment of the present invention, when determining whether the background color belongs to a pure color, first obtain the grayscale image of the background color. In the case where the grayscale image cannot be obtained, obtain the color image of the background color, and use OpenCV to convert the color image into a grayscale image. Determine the pixel values included in the grayscale image, take the average of all the pixel values included in the grayscale image, and obtain the pixel average value corresponding to the grayscale image. According to the pixel average value, determine the variance corresponding to the grayscale image. Specifically, subtract each pixel value included in the grayscale image from the pixel average value, and sum the squares of the subtraction results to obtain the variance corresponding to the grayscale image. According to the variance corresponding to the grayscale image, determine the standard deviation corresponding to the grayscale image. Specifically, take the square root of the variance of the grayscale image to obtain the standard deviation of the grayscale image. The preset statistical conditions include: a variance threshold and a standard deviation threshold. Compare the variance corresponding to the grayscale image with the variance threshold, and compare the standard deviation corresponding to the grayscale image with the standard deviation threshold. In the case where the variance is less than or equal to the variance threshold and the standard deviation is less than or equal to the standard deviation threshold, and it is determined that the variance and the standard deviation meet the preset statistical conditions, then it is determined that the background color belongs to a pure color.

[0100] Figure 4 It is a schematic diagram of the main process of pure color determination according to a reference embodiment of the present invention. Exemplarily, as Figure 4 shown, it is determined that the text color and the background color meet the similarity conditions, obtain the grayscale image of the background color, determine all the grayscale values included in the grayscale image, determine the pixel average value corresponding to the grayscale image according to all the grayscale values, determine the variance corresponding to the grayscale image according to the pixel average value, determine the standard deviation corresponding to the grayscale image according to the variance corresponding to the grayscale image, judge whether the variance is less than or equal to the preset variance threshold. If not, it is determined that the background color is not a pure color. If so, continue to judge whether the standard deviation is less than or equal to the preset standard deviation threshold. If so, it is determined that the background color is a pure color. Otherwise, it is judged that the background color is not a pure color.

[0101] Judging whether the background color belongs to a pure color according to the variance and the standard deviation corresponding to the grayscale image can improve the accuracy and efficiency of the determination; setting statistical conditions can improve the flexibility of the determination.

[0102] Step S103, in the case where the text color and the background color meet the similarity conditions and the background color belongs to a pure color, determine the target grayscale value according to the grayscale value of the text color and the grayscale value of the background color, and add the corresponding mask bottom plate to the text component according to the target grayscale value, so that the text content included in the text component is located above the mask bottom plate.

[0103] When the text color and the background color meet the similar conditions, it indicates that the text color and the background color are difficult to distinguish, and the text component will reduce the user's visual experience, so the text component needs to be re-rendered. When the background color is a solid color, it means that the pixel values of each pixel point of the background color are the same, and thus the rendering method for re-rendering the text component is determined as follows: add a mask baseplate to the text component. Specifically, determine the text gray value of each pixel point in the text component, average multiple text gray values to obtain the gray value of the text color, determine the background gray value of each pixel point of the background color in the corresponding area of the text component, average multiple background gray values to obtain the gray value of the background color; average the gray value of the text color and the gray value of the background color to obtain the target gray value. When a gray value ratio is preset, multiply the target gray value by the gray value ratio, and use the multiplication result as the target gray value. The preset gray value ratio can be 80%. Then create a mask baseplate according to the target gray value, and draw the mask baseplate effect in the text component so that the text content included in the text component is located above the mask baseplate.

[0104] Exemplarily, according to the gray value of each pixel point corresponding to the text component, the text gray value is determined to be 255, the gray value of each pixel point corresponding to the background color is determined, and the background gray value is determined to be 222; average the text gray value and the background gray value, and then multiply by the preset gray value ratio, and the obtained target gray value is ((255 + 222) / 2) * 80% = 190. Use the "onDrawBaseplate" method to create a mask baseplate in the text component according to the target gray value 190, so that the text content included in the text component is located above the mask baseplate.

[0105] Figure 5 It is a schematic diagram of the rendering effect of the text component according to a reference embodiment of the present invention. Again exemplarily, as Figure 5 shown, the front-end page 501 is a page for displaying a product list, which is used to display a product list. Among them, the product list includes information such as product name, price, specifications, and store. A text component is set at the top of the front-end page 501, and the text content is "Product List Page". However, since the background color of the text component is the same as the text color of the text component, the text content is difficult to be recognized by the human eye; after generating a mask baseplate in the text component, the front-end page 502 is obtained. In the front-end page 502, a mask baseplate is set below the text content included in the text component, so that the text color and the background color are distinguished, which is convenient for users to determine the text content included in the text component and improves the user's visual experience.

[0106] After determining the text color and the background color, a mask bottom plate is generated according to the text color and the background color, which can timely adjust the rendering effect of the text component, improve the recognition degree of the text component, and improve the user experience.

[0107] According to a reference embodiment of the present invention, when the text color and the background color meet the similar conditions and the background color does not belong to a pure color, the method further includes: determining the gradient values of the background color in the horizontal direction and the vertical direction according to the Sobel operator. According to the gradient values of the background color in the horizontal direction and the vertical direction, the corresponding gradient change speed is determined. Specifically, the derivatives of the gradient values in the horizontal direction and the vertical direction are obtained to get the gradient change speed. The smaller the gradient change speed is, the slower the gradient value changes. The larger the gradient change speed is, the faster the gradient value changes.

[0108] Judge whether the background color belongs to a gradient color according to the gradient change speed. Specifically, compare the gradient change speed with a preset speed range. If the gradient change speed is within the preset speed range, it is determined that the background color belongs to a gradient color; if the gradient change speed is less than the preset speed range, it means that the background color does not belong to a gradient color but a pure color, then the target gray value is determined according to the gray value of the text color and the gray value of the background color, and a corresponding mask bottom plate is added to the text component according to the target gray value, so that the text content included in the text component is located above the mask bottom plate; if the gradient change speed is greater than the preset speed range, it means that the background color does not belong to a gradient color, and the text component is re-rendered using the annotation drawing method.

[0109] When it is determined that the background color belongs to a gradient color, determine the gradient direction of the background color, determine the adjacent color of the background color, and render the text content included in the text component as a gradient text content according to the gradient direction and the adjacent color.

[0110] Exemplarily, convert the background color into a pixel value matrix, compare the pixel values in the pixel matrix to determine the change direction of the pixel values. For example, in a 2×2 pixel matrix, the pixel value in the upper left corner of the pixel matrix is 1, the pixel values in the lower left corner and the upper right corner of the pixel matrix are 2, and the pixel value in the lower right corner of the pixel matrix is 3, then it is determined that the change direction of the pixel values is 45 degrees diagonally from left to right downward. Since different colors correspond to different pixel values, the change direction of the pixel values is the gradient direction of the background color. Take the average of the pixel values in the pixel matrix, use the average value as the similar color corresponding to the gradient background color, add the average value to a preset adjustment value, use the added result as the adjusted pixel value, determine the adjacent color of the background color according to the adjusted pixel value, and then render the text content included in the text component as a gradient text content according to the gradient direction and the adjacent color.

[0111] The Sobel operator is used to determine whether the background color is a gradient color, determine the gradient direction and adjacent colors of the background color, and render the text content as gradient color text content according to the gradient direction and adjacent colors. This can make the text content and the background image match each other in color, thereby improving the user's visual experience.

[0112] According to another reference embodiment of the present invention, when determining the gradient direction of the background color, a color image of the background color is first obtained, and the gradient intensity of each pixel included in the color image is determined. Within a preset angle range, the intensity average corresponding to each angle is determined. The maximum intensity average is determined from the intensity averages corresponding to all angles, and the angle corresponding to the maximum intensity average is used as the target angle, and the target angle is used as the gradient direction of the background color.

[0113] Exemplarily, OpenCV is used to determine the gradient strength and gradient radian of a color image in the horizontal and vertical directions, the preset angle range is 0 to 180 degrees, the intensity values ​​of each angle between 0 and 180 degrees are traversed, and then the intensity values ​​between 0 and 1 degree are averaged, and the average value is used as the intensity average value of an angle of 1 degree, the intensity values ​​between 1 degree and 2 degrees are averaged, and the average value is used as the intensity average value of an angle of 2 degrees, and so on, to obtain the intensity average value corresponding to each angle; the max method is used to determine the maximum intensity average value from all intensity average values, and the angle corresponding to the maximum intensity average value is used as the target angle. For example, the intensity average value corresponding to an angle of 60 degrees is the largest, then the target angle is 60 degrees, and the gradient direction of the background color is determined to be 60 degrees horizontally upward.

[0114] The intensity average is determined according to the gradient intensity, and the gradient direction is determined according to multiple intensity averages, so that the gradient direction can be determined quickly and accurately.

[0115] According to another referenceable embodiment of the present invention, before determining the gradient intensity of each pixel included in the color image, the method further includes: determining a corresponding gradient change rate according to the gradient value. Specifically, the first derivative of the gradient value is determined, and the first derivative of the gradient value is used as the gradient change rate of the color image. The preset gradient condition is a change rate range. The gradient change rate is compared with the change rate range. When the gradient change rate belongs to the change rate range, it is determined that the gradient change rate meets the preset gradient condition, indicating that the gradient effect of the color image is close to the gradient effect observed by the human eye vision, that is, it is further confirmed that the background color is a gradient color; when the gradient change rate is less than or greater than the change rate range, it is determined that the gradient change rate does not meet the preset gradient condition, indicating that the gradient effect of the color image is not close to the gradient effect observed by the human eye vision, that is, the human eye cannot observe that the color image has a gradient effect, that is, the background color is not a gradient color. When the gradient change rate belongs to the change rate range, that is, when it is further determined that the background color is a gradient color, the gradient direction and adjacent colors are determined, and the text content included in the text component is rendered as a gradient text content.

[0116] Exemplarily, the preset change rate range is from 0 to 2.1. When the gradient change rate is greater than or equal to 0 and less than or equal to 2.1, it is determined that the gradient change rate meets the preset gradient condition, indicating the gradient color of the background color; when the gradient change rate is greater than 2.1. It is determined that the gradient change rate does not meet the preset gradient condition, indicating that the background color is not a gradient color.

[0117] Through the preset gradient condition, it is possible to further determine whether the background color belongs to a gradient color. By determining the gradient change rate, the gradient effect of the background color that can be distinguished by the human eye senses can be determined, and it is possible to further accurately determine the background color with a gradient effect, improve the accuracy of text component rendering, and improve the user's visual experience.

[0118] According to another referenceable embodiment of the present invention, when determining the adjacent color of the background color, first determine the similar color corresponding to the background color in a pre-set 24-color wheel. Since the background color is a gradient color, determine the corresponding similar color according to the gradient color. For example, determine the pixel value range corresponding to the gradient color, and use the maximum value, minimum value or average value of the pixel value range as the target pixel value, and determine the color closest to the target pixel value in the 24-color wheel, and use the determined color as the similar color. Then, in the 24-color wheel, according to the pre-set query order, query the color whose included angle with the similar color is equal to the pre-set association angle, and use the queried color as the adjacent color of the background color. The 24-color wheel includes 8 basic hues: yellow, orange, red, purple, blue, blue-green, green, and yellow-green. Each basic hue is divided into 3 parts, for a total of 24 hues, forming a circular ring. The pre-set query order includes: clockwise query and counterclockwise query. The pre-set association angle can be 30 degrees, 45 degrees, 60 degrees, 75 degrees, etc. The pre-set association angle is used to distinguish the gradient color of the background color and the gradient color of the text content, and the association angle is configurable.

[0119] Figure 6 is a schematic diagram of the main process of gradient color determination according to another referenceable embodiment of the present invention. Exemplarily, as Figure 6 shown, it is determined that the background color is a gradient color, and the similar color is determined in the 24-color wheel according to the gradient background color, the query order and the association angle are determined, and according to the query order, the adjacent color at the association angle from the similar color is determined.

[0120] Determining the similar color corresponding to the background color in the 24-color wheel and determining the adjacent color according to the association angle can flexibly and efficiently determine the adjacent color to meet different color requirements.

[0121] According to the second aspect of the embodiments of the present invention, a rendering device for text components is provided.

[0122] Figure 7 is a schematic diagram of the main modules of the rendering device for text components according to the embodiments of the present invention. As Figure 7 shown, the rendering device 700 for text components mainly includes:

[0123] A determination module 701, configured to determine the text color and background color corresponding to the text component in response to detecting the text component;

[0124] A determination module 702, configured to determine whether the text color and the background color meet pre-set similarity conditions, and determine whether the background color belongs to a pure color;

[0125] A rendering module 703, configured to, when the text color and the background color meet the similarity condition and the background color belongs to a solid color, determine a target gray value according to the gray value of the text color and the gray value of the background color, and add a corresponding masking bottom plate to the text component according to the target gray value, so that the text content included in the text component is located above the masking bottom plate.

[0126] According to a reference embodiment of the present invention, the rendering device 700 of the text component further includes:

[0127] A second determination module, configured to determine the gradient values of the background color in the horizontal direction and the vertical direction according to the Sobel operator;

[0128] A second determination module, configured to determine a corresponding gradient change speed according to the gradient values of the background color in the horizontal direction and the vertical direction, and determine whether the background color belongs to a gradient color according to the gradient change speed;

[0129] A second rendering module, configured to, when the background color belongs to a gradient color, determine the gradient direction of the background color, determine the adjacent color of the background color, and render the text content included in the text component as gradient text content according to the gradient direction and the adjacent color.

[0130] According to another reference embodiment of the present invention, determining the gradient direction of the background color includes:

[0131] Obtaining a color image of the background color and determining the gradient intensity of each pixel included in the color image;

[0132] Determining the average intensity corresponding to each angle within a preset angle range;

[0133] Determining the maximum average intensity from the average intensities corresponding to all angles, taking the angle corresponding to the maximum average intensity as the target angle, and taking the target angle as the gradient direction of the background color.

[0134] According to still another reference embodiment of the present invention, the rendering device 700 of the text component further includes:

[0135] A third determination module, configured to determine a corresponding gradient change rate according to the gradient value;

[0136] A third determination module, configured to determine that the gradient change rate meets a preset gradient condition.

[0137] According to still another reference embodiment of the present invention, determining the adjacent color of the background color includes:

[0138] Determine the similar color corresponding to the background color in a pre-set 24-color hue circle;

[0139] In the 24-color hue circle, according to the pre-set query order, query the color whose included angle with the similar color is equal to the pre-set associated angle, and use the queried color as the adjacent color of the background color.

[0140] According to another referenceable embodiment of the present invention, determining whether the background color belongs to a pure color includes:

[0141] Obtain the grayscale image of the background color, and determine the corresponding pixel average value according to the pixel values included in the grayscale image;

[0142] Determine the variance corresponding to the grayscale image according to the pixel average value;

[0143] Determine the standard deviation corresponding to the grayscale image according to the variance corresponding to the grayscale image;

[0144] When the variance and the standard deviation meet the pre-set statistical conditions, determine that the background color belongs to a pure color.

[0145] According to a referenceable embodiment of the present invention, determining the background color corresponding to the text component includes:

[0146] Obtain the color image of the background color, and obtain multiple pixel values of the color image, and each pixel value includes multiple color channels;

[0147] Perform statistics on the multiple pixel values to determine the target color with the largest cumulative quantity in each color channel;

[0148] Determine the background color corresponding to the text component according to the target color corresponding to each color channel.

[0149] It should be noted that the specific implementation content of the rendering device of the text component in the embodiment of the present invention has been described in detail in the above-mentioned rendering method of the text component, so the repeated content will not be described here.

[0150] According to the technical solution of the embodiment of the present invention, after determining the text color and the background color, a mask bottom plate is generated according to the text color and the background color, which can timely adjust the rendering effect of the text component, improve the recognition degree of the text component, and improve the user experience; by determining that the background color belongs to a gradient color through the Sobel operator, the gradient direction and adjacent colors of the background color are determined, and the text content is rendered as gradient text content according to the gradient direction and adjacent colors, which can make the text content match the background image in terms of color and improve the user's visual experience; the average intensity value is determined according to the gradient intensity, and the gradient direction is determined according to multiple average intensity values, which can quickly and accurately determine the gradient direction; the similar color corresponding to the background color is determined in the 24-color phase ring, and the adjacent colors are determined according to the correlation angle, which can flexibly determine the adjacent colors, efficiently determine the adjacent colors, and meet different color requirements; by judging that the background color belongs to a pure color according to the variance and standard deviation corresponding to the grayscale image, the accuracy and efficiency of the determination can be improved; by statistically analyzing multiple pixel values, the target color with the largest cumulative quantity in each color channel is determined, which can quickly and accurately determine the background color.

[0151] According to a third aspect of the embodiments of the present invention, there is provided an electronic device, including: one or more processors; a storage device for storing one or more programs, and when the one or more programs are executed by the one or more processors, the one or more processors are caused to implement the method provided in the first aspect of the embodiments of the present invention.

[0152] According to a fourth aspect of the embodiments of the present invention, there is provided a computer-readable medium, on which a computer program is stored, and when the program is executed by a processor, the method provided in the first aspect of the embodiments of the present invention is implemented.

[0153] Figure 8 An exemplary system architecture 800 is shown to which the rendering method of the text component or the rendering device of the text component according to the embodiments of the present invention can be applied.

[0154] As Figure 8 shown, the system architecture 800 may include terminal devices 801, 802, 803, a network 804, and a server 805. The network 804 is used to provide a medium for a communication link between the terminal devices 801, 802, 803 and the server 805. The network 804 may include various connection types, such as wired, wireless communication links, or fiber optic cables, etc.

[0155] Users may use the terminal devices 801, 802, 803 to interact with the server 805 through the network 804 to receive or send messages, etc. Various communication client applications may be installed on the terminal devices 801, 802, 803, such as text rendering applications, background rendering applications, search applications, instant messaging tools, email clients, social platform software, etc. (only as examples).

[0156] The terminal devices 801, 802, and 803 can be various electronic devices with a display screen and supporting web browsing, including but not limited to smartphones, tablets, laptop computers, desktop computers, and the like.

[0157] The server 805 can be a server that provides various services. For example, it can be a background management server (only for example) that supports the rendering requests of text components sent by the upstream using the terminal devices 801, 802, and 803. The background management server can, in response to detecting a text component, determine the text color and background color corresponding to the text component; determine whether the text color and the background color meet pre-set similarity conditions, and determine whether the background color belongs to a solid color; in the case where the text color and the background color meet the similarity conditions and the background color belongs to a solid color, determine a target gray value based on the gray value of the text color and the gray value of the background color, and add a corresponding masking bottom plate to the text component according to the target gray value, so that the text content included in the text component is located above the masking bottom plate; and feedback the rendering situation of the text component (only for example) to the terminal device.

[0158] It should be noted that the rendering method of the text component provided in the embodiments of the present invention is generally executed by the server 805. Correspondingly, the rendering device of the text component is generally set in the server 805. The rendering method of the text component provided in the embodiments of the present invention can also be executed by the terminal devices 801, 802, and 803. Correspondingly, the rendering device of the text component can be set in the terminal devices 801, 802, and 803.

[0159] It should be understood that Figure 8 the numbers of the terminal devices, networks, and servers in

[0160] are merely illustrative. According to the implementation requirements, there can be any number of terminal devices, networks, and servers. Figure 9 Figure 9 The terminal device shown is merely an example and should not impose any limitations on the functions and usage scope of the embodiments of the present invention.

[0161] Figure 9 As shown in Figure 9As shown, computer system 900 includes a central processing unit (CPU) 901, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 902 or a program loaded into a random access memory (RAM) 903 from a storage section 908. In the RAM 903, various programs and data required for the operation of the system 900 are also stored. The CPU 901, ROM 902, and RAM 903 are connected to each other via a bus 904. An input / output (I / O) interface 905 is also connected to the bus 904.

[0162] The following components are connected to the I / O interface 905: an input section 906 including a keyboard, a mouse, etc.; an output section 907 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc. and a speaker, etc.; a storage section 908 including a hard disk, etc.; and a communication section 909 including a network interface card such as a LAN card, a modem, etc. The communication section 909 performs communication processing via a network such as the Internet. A drive 910 is also connected to the I / O interface 905 as needed. A removable medium 911, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 910 as needed so that a computer program read from it can be installed into the storage section 908 as needed.

[0163] Specifically, according to an embodiment disclosed by the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment disclosed by the present invention includes a computer program, which includes a computer program carried on a computer-readable medium, and the computer program contains program codes for performing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 909, and / or installed from the removable medium 911. When the computer program is executed by a central processing unit (CPU) 901, the above functions defined in the system of the embodiment of the present invention are executed.

[0164] It should be noted that the computer-readable medium shown in the embodiments of the present invention can be a computer-readable signal medium, a computer-readable storage medium, or any combination of the two. A computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the above. More specific examples of the computer-readable storage medium can include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the embodiments of the present invention, the computer-readable storage medium can be any tangible medium that contains or stores a program, and this program can be used by or in combination with an instruction execution system, apparatus, or device. In the embodiments of the present invention, a computer-readable signal medium can include a data signal propagated in a baseband or as part of a carrier wave, in which computer-readable program code is carried. Such a propagated data signal can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. A computer-readable signal medium can also be any computer-readable medium other than a computer-readable storage medium, and this computer-readable medium can send, propagate, or transmit a program for use by or in combination with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0165] The flowcharts and block diagrams in the accompanying drawings illustrate the possible architectures, functions, and operations of systems, methods, and computer programs according to various embodiments of the present invention. In this regard, each block in the flowchart or block diagram can represent a module, a program segment, or a part of code, and the above module, program segment, or part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the blocks can occur in a different order than marked in the accompanying drawings. For example, two consecutive blocks shown can actually be executed substantially in parallel, and they can sometimes be executed in the reverse order, depending on the functions involved. It should also be noted that each block in the block diagram or flowchart, and the combination of blocks in the block diagram or flowchart, can be implemented by a dedicated hardware-based system for performing the specified functions or operations, or can be implemented by a combination of dedicated hardware and computer instructions.

[0166] The modules involved in the embodiments of the present invention can be implemented in software or in hardware. The described modules can also be provided in a processor. For example, it can be described as: a processor includes a determination module, a judgment module, and a rendering module. In some cases, the names of these modules do not limit the module itself. For example, the determination module can also be described as "a module for determining text color and background color".

[0167] As another aspect, the embodiments of the present invention further provide a computer-readable medium. The computer-readable medium can be included in the device described in the above embodiments; or it can exist alone without being assembled into the device. The above computer-readable medium carries one or more programs. When the above one or more programs are executed by the device, the device implements the following method: in response to detecting a text component, determine the text color and background color corresponding to the text component; determine whether the text color and the background color meet a pre-set similarity condition, and determine whether the background color belongs to a solid color; when the text color and the background color meet the similarity condition and the background color belongs to a solid color, determine a target gray value according to the gray value of the text color and the gray value of the background color, and add a corresponding mask bottom layer to the text component according to the target gray value, so that the text content included in the text component is located above the mask bottom layer.

[0168] According to the technical solution of the embodiments of the present invention, after determining the text color and the background color, generating a mask bottom layer according to the text color and the background color can timely adjust the rendering effect of the text component, improve the recognition degree of the text component, and improve the user experience; by using the Sobel operator to determine that the background color belongs to a gradient color, determining the gradient direction and adjacent color of the background color, and rendering the text content as gradient text content according to the gradient direction and adjacent color, the text content can match the background image in terms of color, improving the user's visual experience; determining the average value of intensities according to the gradient intensity and determining the gradient direction according to multiple average values of intensities can quickly and accurately determine the gradient direction; determining the similar color corresponding to the background color in the 24-color phase ring and determining the adjacent color according to the correlation angle can flexibly and efficiently determine the adjacent color to meet different color requirements; determining that the background color belongs to a solid color according to the variance and standard deviation corresponding to the grayscale image can improve the accuracy and efficiency of determination; counting multiple pixel values and determining the target color with the largest cumulative quantity in each color channel can quickly and accurately determine the background color.

[0169] The above specific embodiments do not constitute a limitation on the protection scope of the embodiments of the present invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions and improvements made within the spirit and principle of the embodiments of the present invention shall be included within the protection scope of the embodiments of the present invention.

Claims

1. A rendering method for text components, characterized in that, it includes: In response to detecting a text component, determining the text color and background color corresponding to the text component; Judging whether the text color and the background color meet a preset similarity condition, and judging whether the background color belongs to a solid color; When the text color and the background color meet the similarity condition and the background color belongs to a solid color, determining a target gray value according to the gray value of the text color and the gray value of the background color, and adding a corresponding masking bottom plate to the text component according to the target gray value, so that the text content included in the text component is located above the masking bottom plate.

2. The method according to claim 1, characterized in that, When the text color and the background color meet the similarity condition and the background color does not belong to a solid color, the method further includes: Determining the gradient values of the background color in the horizontal and vertical directions according to the Sobel operator; Determining a corresponding gradient transformation speed according to the gradient values of the background color in the horizontal and vertical directions, and judging whether the background color belongs to a gradient color according to the gradient transformation speed; When the background color belongs to a gradient color, determining the gradient direction of the background color, determining the adjacent color of the background color, and rendering the text content included in the text component as a gradient text content according to the gradient direction and the adjacent color.

3. The method according to claim 2, characterized in that, Determining the gradient direction of the background color includes: Obtaining a color image of the background color and determining the gradient intensity of each pixel included in the color image; Determining the average intensity corresponding to each angle within a preset angle range; Determining the maximum average intensity from the average intensities corresponding to all angles, taking the angle corresponding to the maximum average intensity as the target angle, and taking the target angle as the gradient direction of the background color.

4. The method according to claim 3, characterized in that, Before determining the gradient intensity of each pixel included in the color image, the method further includes: Determining a corresponding gradient change rate according to the gradient value; Judging that the gradient change rate meets a preset gradient condition.

5. The method according to claim 2, characterized in that, Determining the adjacent color of the background color includes: Determining a similar color corresponding to the background color in a preset 24-color phase ring; In the 24-color phase ring, querying for a color whose included angle with the similar color is equal to a preset associated angle according to a preset query order, and taking the queried color as the adjacent color of the background color.

6. The method according to claim 1, characterized in that, Judging whether the background color belongs to a solid color includes: Obtaining a gray image of the background color and determining a corresponding pixel average value according to the pixel values included in the gray image; Determining the variance corresponding to the gray image according to the pixel average value; Determining the standard deviation corresponding to the gray image according to the variance corresponding to the gray image; When the variance and the standard deviation meet the pre-set statistical conditions, it is determined that the background color belongs to a solid color.

7. The method according to claim 1, wherein, determining the background color corresponding to the text component includes: obtaining a color image of the background color, obtaining a plurality of pixel values of the color image, and each pixel value includes a plurality of color channels; performing statistics on the plurality of pixel values to determine a target color with the largest cumulative quantity in each color channel; determining the background color corresponding to the text component according to the target color corresponding to each color channel.

8. A rendering device for a text component, wherein, comprising: a determination module, configured to determine the text color and the background color corresponding to the text component in response to detecting the text component; a determination module, configured to determine whether the text color and the background color meet the pre-set similarity conditions, and determine whether the background color belongs to a solid color; a rendering module, configured to, when the text color and the background color meet the similarity conditions and the background color belongs to a solid color, determine a target gray value according to the gray value of the text color and the gray value of the background color, and add a corresponding matte bottom plate to the text component according to the target gray value, so that the text content included in the text component is located above the matte bottom plate.

9. An electronic device, wherein, comprising: one or more processors; a storage device, configured to store one or more programs, when the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1-7.

10. A computer-readable medium, on which a computer program is stored, wherein, the program, when executed by a processor, implements the method according to any one of claims 1-7.