Color filling method and device, electronic equipment and computer readable storage medium

Abstract

The invention discloses a color filling method and device, electronic equipment and a computer readable storage medium, and the method comprises the steps: obtaining a target picture, carrying out the color space conversion of each pixel in the target picture, and obtaining the Lab value of each pixel; determining an edge area of the target picture according to a preset edge size; traversing each pixel in the target picture according to each Lab value, and determining a target pixel which hits the edge region and has a non-zero transparency component; performing clustering processing on all the target pixels according to each Lab value to obtain each clustering cluster, and determining a target clustering cluster with the most pixels in all the clustering clusters; and determining an edge theme color according to the RGB value of each target pixel in the target cluster, and realizing color filling by using the edge theme color. By applying the technical scheme, the visual fault problem in the color filling process can be effectively avoided, more complete and accurate color filling is ensured, and the visual experience of a user is further improved.

Description

Technical Field

[0001] The present application relates to the field of front-end image processing technology, and in particular to a color filling method, and also to a color filling device, an electronic device, and a computer-readable storage medium. Background Art

[0002] In the fields of image rendering and interface design, when working with images containing complex color distributions (non-pure backgrounds), traditional image container filling techniques typically use the image's theme color as the container's fill color. However, this method has significant technical flaws: because the theme color often represents the primary color of the image's content and differs significantly from the actual color of the image's edge areas, direct filling creates a strong visual disconnect between the image and the container's boundaries, disrupting overall visual coherence and harmony. This visual disconnect not only degrades the user's visual experience but also compromises the accuracy and completeness of information conveyed.

[0003] Therefore, how to effectively avoid the visual discontinuity problem during the color filling process, ensure more complete and accurate color filling, and further improve the user's visual experience is a problem that needs to be urgently solved by those skilled in the art. Summary of the Invention

[0004] The purpose of this application is to provide a color filling method, which can effectively avoid the visual discontinuity problem in the color filling process, ensure more complete and accurate color filling, and further improve the user's visual experience; another purpose of this application is to provide a color filling device, electronic device, computer-readable storage medium and computer program product, all of which have the above-mentioned beneficial effects.

[0005] In a first aspect, the present application provides a color filling method, comprising:

[0006] Obtain a target image, and perform color space conversion on each pixel in the target image to obtain a Lab value of each pixel;

[0007] Determining an edge area of ​​the target image according to a preset edge size;

[0008] Traversing each pixel in the target image according to each Lab value, and determining a target pixel that hits the edge area and has a non-zero transparency component;

[0009] Clustering all the target pixels according to the Lab values ​​to obtain clusters, and determining the target cluster with the largest number of pixels among all the clusters;

[0010] An edge theme color is determined according to the RGB value of each target pixel in the target cluster, and color filling is achieved using the edge theme color.

[0011] Optionally, obtain the target image, including:

[0012] Obtaining image parameters corresponding to the target image;

[0013] The image parameters are processed using an asynchronous loading function to load and obtain the target image.

[0014] Optionally, clustering is performed on all the target pixels according to the Lab values ​​to obtain clusters, including:

[0015] Performing Euclidean distance calculation based on each Lab value to cluster all the target pixels to obtain each cluster;

[0016] In each of the clusters, the Euclidean distances between the target pixel serving as the cluster starting point and each of the other target pixels are all lower than a preset threshold.

[0017] Optionally, determining an edge theme color according to the RGB value of each target pixel in the target cluster, and implementing color filling using the edge theme color, includes:

[0018] Calculate the RGB mean according to the RGB value of each target pixel in the target cluster;

[0019] Convert the RGB mean value into a hexadecimal color value as the edge theme color;

[0020] Color filling is achieved using the edge theme color.

[0021] Optionally, after obtaining the target image, the following steps are also included:

[0022] Determine a main area of ​​the target image, and extract a theme color within the main area;

[0023] Accordingly, before determining the target cluster with the largest number of pixels among all the clusters, the method further includes:

[0024] If the number of clusters is zero, the theme color is used as the edge theme color to achieve color filling;

[0025] If the number of the clusters is not zero, the step of determining a target cluster with the largest number of pixels among all the clusters is performed.

[0026] Optionally, before determining the edge area of ​​the target image according to the preset edge size, the method further includes:

[0027] Determining color filling configuration information corresponding to the target image, and determining a pixel selection area according to the color filling configuration information;

[0028] When the pixel selection area includes the main area and the edge area, performing a step of determining the edge area of ​​the target image according to a preset edge size;

[0029] When the pixel selection area includes the main area but does not include the edge area, color filling is achieved using the theme color.

[0030] Optionally, before performing color space conversion on each pixel in the target image to obtain the Lab value of each pixel, the method further includes:

[0031] Obtain the image size of the target image;

[0032] When the image size exceeds a preset size, downsampling the target image to obtain a downsampled image;

[0033] Accordingly, color space conversion is performed on each pixel in the target image to obtain the Lab value of each pixel, including:

[0034] Perform color space conversion on each pixel in the downsampled image to obtain the Lab value of each pixel.

[0035] In a second aspect, the present application further discloses a color filling device, comprising:

[0036] A conversion module is used to obtain a target image and perform color space conversion on each pixel in the target image to obtain a Lab value of each pixel;

[0037] A determination module, configured to determine an edge area of ​​the target image according to a preset edge size;

[0038] a traversal module, configured to traverse each pixel in the target image according to each Lab value, and determine target pixels that hit the edge area and have a non-zero transparency component;

[0039] A clustering module is used to perform clustering processing on all the target pixels according to the Lab values ​​to obtain clusters, and determine the target cluster with the largest number of pixels among all the clusters;

[0040] The filling module is used to determine an edge theme color according to the RGB value of each target pixel in the target cluster, and use the edge theme color to achieve color filling.

[0041] In a third aspect, the present application further discloses an electronic device, comprising:

[0042] memory for storing computer programs;

[0043] A processor is configured to implement the steps of any one of the color filling methods described above when executing the computer program.

[0044] In a fourth aspect, the present application further discloses a computer-readable storage medium, on which a computer program is stored. When the computer program is executed by a processor, the steps of any one of the color filling methods described above are implemented.

[0045] In a fifth aspect, the present invention further discloses a computer program product, comprising a computer program / instruction, which implements the steps of any one of the color filling methods described above when executed by a processor.

[0046] The present application provides a color filling method, comprising: obtaining a target image, and performing color space conversion on each pixel in the target image to obtain a Lab value of each pixel; determining an edge area of ​​the target image according to a preset edge size; traversing each pixel in the target image according to each Lab value to determine target pixels that hit the edge area and have a non-zero transparency component; clustering all the target pixels according to each Lab value to obtain clusters, and determining a target cluster with the largest number of pixels among all the clusters; determining an edge theme color according to the RGB value of each target pixel in the target cluster, and using the edge theme color to implement color filling.

[0047] Applying the technical solution provided by this application, for the target image that needs to be color-filled by the front end, first convert it from the RGB color space to the Lab color space through color space conversion, so as to screen the valid pixels in the edge area of ​​the target image according to the pixel Lab value, that is, the above-mentioned target pixels; then cluster all the target pixels to extract the edge theme color of the edge area of ​​the target image; finally, the edge theme color can be used to assist in color filling of the target image. It can be seen that this technical solution realizes the extraction of the edge theme color by calculating the edge color distribution characteristics of the image and uses it as the container filling color to assist in color filling, which effectively solves the problem of visual fusion between the image and the container background, and thus avoids the problem of visual fault in the color filling process, thereby ensuring a more complete and accurate color filling, and further improving the user's visual experience.

[0048] In one embodiment of the present application, a user can customize whether to use the edge theme color auxiliary color filling function by inputting color filling configuration information. When the color filling configuration information only includes the main area but not the edge area, the main area theme color of the target image can be directly extracted to achieve color filling without processing the edge area of ​​the target image; when the color filling configuration information includes both the main area and the edge area, the main area theme color and the edge area theme color of the target image can be extracted separately to achieve color filling. It can be seen that this technical solution provides a customized selection function, which allows users to customize whether to use the edge color auxiliary color filling technology, further improving the user experience.

[0049] The color filling device, electronic device, computer-readable storage medium, and computer program product provided in this application also have the above-mentioned technical effects, and this application will not elaborate on them here. BRIEF DESCRIPTION OF THE DRAWINGS

[0050] In order to more clearly illustrate the technical solutions in the prior art and the embodiments of the present application, the following is a brief introduction to the drawings required for describing the prior art and the embodiments of the present application. Of course, the drawings described below in connection with the embodiments of the present application are only part of the embodiments of the present application. For those skilled in the art, other drawings can be obtained based on the provided drawings without inventive effort, and the obtained other drawings also fall within the scope of protection of the present application.

[0051] Figure 1 A flowchart of a color filling method provided in this application;

[0052] Figure 2 This is a schematic diagram of the implementation principle of an adaptive background color decision method provided in this application;

[0053] Figure 3 A schematic structural diagram of a color filling device provided in this application;

[0054] Figure 4 This is a schematic diagram of the structure of an electronic device provided in this application. DETAILED DESCRIPTION

[0055] The core of this application is to provide a color filling method, which can effectively avoid the visual discontinuity problem in the color filling process, ensure more complete and accurate color filling, and further improve the user's visual experience; another core of this application is to provide a color filling device, electronic device, computer-readable storage medium and computer program product, all of which have the above-mentioned beneficial effects.

[0056] In order to describe the technical solutions in the embodiments of the present application more clearly and completely, the technical solutions in the embodiments of the present application will be introduced below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0057] An embodiment of the present application provides a color filling method.

[0058] Please refer to Figure 1 , Figure 1 This is a flow chart of a color filling method provided in the present application. The color filling method may include the following S101 to S105.

[0059] S101: Acquire a target image, and perform color space conversion on each pixel in the target image to obtain a Lab value of each pixel.

[0060] This step is intended to achieve the acquisition of the target image and the conversion of its color space. Specifically, the target image is the image that needs to be filled with color on the Web side. The way it is acquired does not affect the implementation of this technical solution. It can be directly input by the user through the front end, or it can be acquired through image acquisition equipment, or it can be actively loaded / downloaded. This application does not limit this. Further, the color space conversion is performed on each pixel in the target image to convert the target image from RGB color space to Lab color space, and the Lab value of each pixel in the target image is obtained.

[0061] In one embodiment of the present application, the above-mentioned obtaining of the target image may include: obtaining image parameters corresponding to the target image; and processing the image parameters using an asynchronous loading function to load and obtain the target image.

[0062] The embodiment of the present application provides a method for obtaining a target image, that is, the target image can be loaded and obtained through an asynchronous loading function. Specifically, an asynchronous loading function, such as a loadImage function, can be created in advance, and the image parameters corresponding to the target image are received and processed, so that the target image can be loaded and obtained. Among them, when the image parameter is an image URL string, a new image instance HTMLImageElement corresponding to the target image is created, and the crossOrigin attribute (used to specify the mode of cross-source request) is set to Anonymous (execute cross-source request without sending user credentials) to handle cross-domain issues, and the loading is triggered by assigning the image URL string to the src attribute (used to specify the URL of the target image); when the image parameter is an existing image instance HTMLImageElement, the object can be directly used to obtain the target image.

[0063] Furthermore, using an asynchronous loading function to process image parameters to load a target image can include: obtaining the loading status of the target image during the process of processing the image parameters using the asynchronous loading function; if the loading status is successful, outputting the target image; if the loading status is failed, outputting an error message. In the specific implementation process, obtaining the loading status of the target image can be achieved by detecting the image complete attribute (used to indicate whether the image has been fully loaded). If the image complete attribute is true, the onload event is triggered, and the target image is returned through the resolve method of Promise (a method in JavaScript used to convert a given value into a Promise object); if the image complete attribute is false, the onerror event is triggered, and an error message is thrown through reject.

[0064] Therefore, the HTMLImageElement object related to canvas is used to implement the asynchronous loading of images, and the Promise mechanism is used to manage the results of asynchronous operations, providing a basis for subsequent processing based on the loaded images.

[0065] In one embodiment of the present application, performing color space conversion on each pixel in the target image to obtain the Lab value of each pixel may include:

[0066] Determine the RGB value of each pixel in the target image and perform linear conversion on each RGB value to obtain each linear RGB value;

[0067] Convert the target image from RGB color space to XYZ color space to obtain the XYZ value corresponding to each linear RGB value;

[0068] Convert the target image from XYZ color space to Lab color space and get the Lab value corresponding to each XYZ value.

[0069] The present embodiment provides a method for color space conversion of a target image, which first converts it from RGB color space to XYZ color space, and then converts it from XYZ color space to Lab color space to obtain the Lab value of each pixel in the target image. Specifically, the implementation process is as follows:

[0070] First, for each pixel in the target image, its RGB value is determined to obtain each RGB color component. RGB color components that exceed the threshold are gamma-corrected and then linearly converted. RGB color components that do not exceed the threshold are directly linearly converted. Taking the R color component as an example, when its value exceeds the threshold of 0.04045, the correction formula "((R +0.055) / 1.055) ^ 2.4" is used to perform gamma correction on the R color component, and then the linear conversion formula "R / 12.92" is used to perform linear conversion on the R color component. When the R color component value does not exceed the threshold of 0.04045, the linear conversion formula "R / 12.92" is directly used to perform linear conversion on the R color component. In this way, the linear RGB values ​​are obtained.

[0071] Furthermore, for each linear RGB value, the target image is converted from RGB color space to XYZ color space using the first color space conversion formula. The first color space conversion formula is: X = R × 0.4124 + G × 0.3576 + B × 0.1805; Y = R × 0.2126 + G × 0.7152 + B × 0.0722; Z = R × 0.0193 + G × 0.1192 + B × 0.9505. This yields the XYZ value corresponding to each linear RGB value.

[0072] Finally, each XYZ value is normalized and then converted from XYZ to Lab using the second color space conversion formula. The normalization formula is: X' = X / 0.95047; Y' = Y / 1.0; Z' = Z / 1.08883. The second color space conversion formula is: L = 116 × fy - 16; a = 500 × (fx - fy); b = 200 × (fy - fz); where f is the conversion function. This yields the Lab value corresponding to each XYZ value.

[0073] S102: Determine an edge area of ​​the target image according to a preset edge size.

[0074] This step aims to determine the edge regions of the target image. These edge regions are determined by a preset edge size. Specifically, the user can set the edge size based on actual needs. It is understood that this preset edge size is necessarily much smaller than the target image size. The target image generally has four edge regions, corresponding to the four corner edge positions of the target image. Correspondingly, each edge region will be extracted and assigned a corresponding edge theme color.

[0075] S103: Traverse each pixel in the target image according to each Lab value to determine the target pixel that hits the edge area and has a non-zero transparency component.

[0076] This step aims to select valid pixels in the edge area of ​​the target image. The valid pixels, i.e., the target pixels, are pixels in the edge area of ​​the target image and whose transparency component value is not 0. It can be understood that in the Lab color space, "L" represents transparency, "a" represents green to red, and "b" represents blue to yellow. Based on this, the transparency component is not 0, that is, the L value is not 0. Thus, the target pixels can be screened according to the Lab value of each pixel and the edge area.

[0077] S104: performing clustering processing on all target pixels according to the Lab values ​​to obtain clusters, and determining the target cluster with the largest number of pixels among all clusters.

[0078] This step aims to cluster the target pixels, obtaining clusters representing different color features, and determining the target cluster representing the edge theme color based on the number of target pixels contained in the cluster. It is understood that within the same cluster, the color features of the target pixels contained therein are highly similar, so each cluster represents a single color feature, while the similarity of the color features represented by different clusters is relatively low. Furthermore, when a cluster contains the largest number of target pixels, it indicates that the cluster represents the most color features within the edge region of the target image, i.e., it corresponds to the edge theme color.

[0079] In one embodiment of the present application, clustering all target pixels according to each Lab value to obtain each cluster cluster may include: performing Euclidean distance calculation according to each Lab value to cluster all target pixels to obtain each cluster cluster; wherein, within each cluster cluster, the Euclidean distance between the target pixel serving as the cluster starting point and each other target pixel is lower than a preset threshold.

[0080] The embodiment of the present application provides a method for implementing clustering processing on target pixels, which can be implemented by Euclidean distance calculation. Specifically, first, any target pixel is selected from all target pixels as the cluster starting point, and then the Euclidean distance between the cluster starting point and each other target pixel is calculated based on the pixel Lab value, and each target pixel with a Euclidean distance lower than a preset threshold is combined with the cluster starting point into a cluster cluster; further, for the remaining target pixels other than the current cluster cluster, a target pixel is also arbitrarily selected as the cluster starting point of the next cluster cluster, and a new cluster cluster is obtained by the Euclidean distance calculation, and so on, until all target pixels are traversed. In this way, each cluster cluster representing different color features can be obtained.

[0081] In addition, a Lab distance threshold may be further set. When performing Euclidean distance calculation, the Euclidean distance calculation may be performed only on other target pixels whose distance from the cluster starting point does not exceed the Lab distance threshold.

[0082] S105: Determine an edge theme color according to the RGB value of each target pixel in the target cluster, and use the edge theme color to achieve color filling.

[0083] This step aims to determine the edge theme color and then achieve color filling. As mentioned above, when a cluster contains the largest number of target pixels, it means that the cluster represents the most color features in the edge area of ​​the target image, that is, it corresponds to the edge theme color. Based on this, the edge theme color can be calculated according to the RGB values ​​of each target pixel in the target cluster, and then the edge theme color can be used as the container fill color to achieve color filling.

[0084] In one embodiment of the present application, determining an edge theme color based on the RGB values ​​of each target pixel in a target cluster, and using the edge theme color to implement color filling may include: calculating an RGB mean based on the RGB values ​​of each target pixel in the target cluster; converting the RGB mean into a hexadecimal color value as the edge theme color; and implementing color filling using the edge theme color.

[0085] The embodiment of the present application provides a method for determining the edge theme color based on the RGB value of each target pixel in the target cluster, that is, the edge theme color can be determined by mean calculation, that is, the RGB value of each target pixel in the target cluster is averaged, and the calculated RGB mean is converted into a hexadecimal color value as the edge theme color to achieve color filling. Of course, in addition to the above-mentioned mean calculation, it can also be implemented through weighted average calculation, and the specific weight configuration can be implemented according to the number of each RGB value in the target cluster.

[0086] It should be pointed out that the edge theme color represents the edge color feature of the target image. In actual application scenarios, it should be matched with the main area theme color of the target image to realize a complete color filling function. The method of extracting the main area theme color in the target image is similar to the above-mentioned method of extracting the edge theme color (replacing the edge area with the main area), and this application will not go into details. In more detail, the main area theme color can be further divided into multi-level theme colors such as primary theme color and secondary theme color. It can be understood that the primary theme color is the theme color corresponding to the target cluster with the largest number of target pixels, and the secondary theme color is the theme color corresponding to the target cluster with the second largest number of target pixels. And so on to obtain the multi-level theme color of the main area. Obviously, the combination of the multi-level theme color of the main area and the edge theme color helps to achieve better visual fusion in the color filling process and avoid visual fault problems.

[0087] It can be seen that the color filling method provided in the embodiment of the present application, for the target image that needs to be color filled by the front end, first converts it from the RGB color space to the Lab color space through color space conversion, so as to filter out the valid pixels in the edge area of ​​the target image according to the pixel Lab value, that is, the above-mentioned target pixels; then clustering is performed on all the target pixels to extract the edge theme color of the edge area of ​​the target image; finally, the edge theme color can be used to assist in color filling of the target image. It can be seen that the present technical solution realizes the extraction of the edge theme color by calculating the edge color distribution characteristics of the image and uses it as the container filling color to assist in color filling, which effectively solves the problem of visual fusion between the image and the container background, and thus avoids the problem of visual fault in the color filling process, thereby ensuring a more complete and accurate color filling, and further improving the user's visual experience.

[0088] Based on the above embodiment:

[0089] In one embodiment of the present application, after obtaining the target image, the following steps may also be performed:

[0090] Determine the main area of ​​the target image and extract the theme color within the main area;

[0091] Accordingly, before determining the target cluster with the largest number of pixels among all clusters, the following steps are also included:

[0092] If the number of clusters is zero, the theme color is used as the edge theme color to achieve color filling;

[0093] If the number of clusters is not zero, the step of determining a target cluster with the largest number of pixels among all clusters is performed.

[0094] Understandably, in certain feature scenarios, the number of clusters may be zero. In this case, it will be impossible to select a target cluster to determine the edge theme color. To solve this problem, combined with the above-mentioned "edge theme color should match the main area theme color of the target image to achieve complete color filling function", the main area theme color of the target image can be directly used as the edge theme color of the current edge area to achieve color filling.

[0095] In one embodiment of the present application, before determining the edge area of ​​the target image according to the preset edge size, the following steps may also be included:

[0096] Determine the color fill configuration information corresponding to the target image, and determine the pixel selection area based on the color fill configuration information;

[0097] When the pixel selection area includes a main area and an edge area, performing a step of determining the edge area of ​​the target image according to a preset edge size;

[0098] When the pixel selection area includes the main area and excludes the edge area, color filling is achieved using the theme color.

[0099] Specifically, the user can customize whether to use the edge theme color auxiliary color filling function by inputting color filling configuration information. When the color filling configuration information only includes the main area but not the edge area, the main area theme color of the target image can be directly extracted to achieve color filling without processing the edge area of ​​the target image; when the color filling configuration information includes both the main area and the edge area, the main area theme color and the edge area theme color of the target image can be extracted separately to achieve color filling. It can be seen that this embodiment provides a customized selection function, allowing users to customize whether to use the edge color auxiliary color filling technology, further improving the user experience.

[0100] In one embodiment of the present application, before performing the color space conversion on each pixel in the target image to obtain the Lab value of each pixel, the following steps may also be included: obtaining the image size of the target image; when the image size exceeds a preset size, downsampling the target image to obtain a downsampled image;

[0101] Accordingly, performing color space conversion on each pixel in the target image to obtain a Lab value of each pixel may include: performing color space conversion on each pixel in the downsampled image to obtain a Lab value of each pixel.

[0102] It is understandable that for certain target images with high resolution, the subsequent computational overhead is relatively large, requiring a high level of computing resources and reducing processing efficiency. To address this issue, embodiments of the present application provide a method for downsampling a target image. That is, for a target image whose size exceeds a preset size, it can first be downsampled to obtain a downsampled image, which can then be used to continue executing S101 to S105 to achieve color filling.

[0103] Based on the above embodiments, the embodiment of the present application provides another color filling method.

[0104] The implementation process of the color filling method provided in the embodiment of the present application is as follows:

[0105] 1. Use canvas to load the target image asynchronously:

[0106] (1) Construct an asynchronous loading function loadImage function, receive image parameters for processing, and return a Promise object for asynchronous processing of image loading results.

[0107] (2) Image object initialization: When the image parameter is an image URL string, create a new HTMLImageElement instance and set the crossOrigin attribute to Anonymous (to handle cross-domain issues). The target image is loaded by assigning a value to the src attribute. When the image parameter is an existing HTMLImageElement instance, the target image can be directly obtained by using the object.

[0108] (3) Loading status determination and processing: Detect the complete attribute of the target image. If it is true, the onload event can be triggered and the target image can be returned through the resolve method of Promise; if it is false, the onerror event can be triggered and an error message can be thrown through reject.

[0109] 2. Downsampling of target images:

[0110] (1) Construct a downsampling function getImageDataFromImage function, which receives the target image of HTMLImageElement type and the optional maxSize parameter (the default value is 100), and returns an ImageData object for image downsampling processing.

[0111] (2) Initialize the canvas and size parameters: Create a canvas element and obtain the naturalWidth (original width) and naturalHeight (original height) of the target image. If the width or height of the target image is greater than maxSize, calculate the scaling factor (scale) by Math.min(maxSize / width, maxSize / height) and recalculate the target width and height accordingly, so that the processed image size does not exceed maxSize.

[0112] (3) Set the canvas size and obtain the drawing context: assign the target width width and target height height to canvas.width and canvas.height respectively, call canvas.getContext('2d') to obtain the two-dimensional drawing context ctx, and throw an Error exception if the acquisition fails.

[0113] (4) Execute image drawing and data extraction: Use the ctx.drawImage method to draw the target image onto a canvas of the target size, and then use the ctx.getImageData method to extract the image data of the specified area (main area, edge area, etc.) from the canvas, and finally return the image data object (downsampled image) to complete the image downsampling process.

[0114] 3. Color space conversion of the target image after downsampling:

[0115] Construct a dedicated sRGB color space to Lab color space conversion function rgbToLab, which takes the R, G, and B component values ​​of the pixel as input parameters (the value range is limited to 0-255) and the L, a, and b component values ​​of the pixel as output parameters.

[0116] (1) For each pixel in the target image, determine its RGB value and obtain each RGB color component. Perform gamma correction on the RGB color components that exceed the threshold, and then perform linear conversion. Perform linear conversion directly on the RGB color components that do not exceed the threshold. Taking the R color component as an example, when its value exceeds the threshold of 0.04045, the correction formula "((R +0.055) / 1.055) ^ 2.4" is used to implement gamma correction of the R color component, and then the linear conversion formula "R / 12.92" is used to implement linear conversion of the R color component; when the R color component value does not exceed the threshold of 0.04045, the linear conversion formula "R / 12.92" is directly used to implement linear conversion of the R color component. In this way, each linear RGB value is obtained.

[0117] (2) For each linear RGB value, use the first color space conversion formula to convert the target image from RGB color space to XYZ color space. The first color space conversion formula is: X = R × 0.4124 + G × 0.3576 + B × 0.1805; Y = R × 0.2126 + G × 0.7152 + B × 0.0722; Z = R × 0.0193 + G × 0.1192 + B × 0.9505. Thus, the XYZ value corresponding to each linear RGB value is obtained.

[0118] (3) For each XYZ value, normalize it first, and then use the second color space conversion formula to convert the target image from the XYZ color space to the Lab color space. The normalization formula is: X' = X / 0.95047; Y' = Y / 1.0; Z' = Z / 1.08883. The second color space conversion formula is: L = 116 × fy - 16; a = 500 × (fx - fy); b = 200 × (fy - fz), where f is the conversion function. Thus, the Lab value corresponding to each XYZ value is obtained.

[0119] 4. Pixel clustering processing:

[0120] Construct the clusterPixelsByCondition function to implement pixel clustering. This function accepts the downsampled target image from step 2 and a Lab distance threshold (recommended range: 8–12, default value: 10) as input. During execution, the function iterates over each pixel in the target image. For pixels (target pixels) that meet the region conditions (main region, edge region) and have a non-zero transparency component, the R, G, and B component values ​​are extracted and converted to Lab color space values ​​using the rgbToLab function from step 3.

[0121] Among them, when calculating the distance between a pixel and a cluster, the labDistance function can be used to calculate the Euclidean distance in the Lab color space. The labDistance function receives two Lab color space triplets lab1: [number, number, number] and lab2: [number, number, number] as input parameters, representing the L, a, and b component values ​​of the two colors respectively; the function first calculates the difference between the two colors in the L, a, and b components, that is, const dL = lab1[0] - lab2[0], const da = lab1[1] - lab2[1], const db = lab1[2] - lab2[2]; then, according to the Euclidean distance calculation formula, the Euclidean distance between the two colors in the Lab space is calculated and returned through return Math.sqrt(dL × dL + da × da + db × db). Based on the distance calculation result, if the Euclidean distance is less than the preset threshold, the pixel is classified into the corresponding cluster, the number of pixels in the cluster count is updated synchronously, and the RGB value and Lab value of the pixel are accumulated to the sum variables sumRgb and sumLab of the cluster, and then the average RGB value and average Lab value of the cluster are recalculated and updated; if the Euclidean distance is greater than the preset threshold, a new cluster is created and its related parameters are initialized (the number of pixels count is 1, sumRgb and sumLab are the RGB value and Lab value of the pixel, and the average RGB value and average Lab value are also the RGB value and Lab value of the pixel), and so on, and finally a complete set of clusters is output.

[0122] 5. Theme color extraction:

[0123] (1) After obtaining the cluster set generated by clustering the pixels of the entire image, sort them in descending order according to the pixel count of each cluster. The cluster that ranks first after sorting (i.e., with the largest number of pixels) is determined as the theme color cluster, and the average RGB value of the cluster is extracted and converted into a hexadecimal color value through the rgbToHex function as the theme color of the target image. If there are multiple clusters in the cluster set, the cluster that ranks second after sorting is processed in the same way, and its average RGB value is extracted and converted into a hexadecimal color value as the sub-theme color of the target image. If there is only one cluster, the cluster can be used as both the theme color and the sub-theme color.

[0124] (2) For the four edge regions of the target image, the smaller Lab distance thresholds can be set respectively (e.g., if the threshold is 1, it is recorded as threshold.top, threshold.right, threshold.bottom, threshold.left). By calling the clusterPixelsByCondition function, combined with the judgment conditions of each edge region, the pixels of each edge region are clustered in step 4. The clustering results of each edge region are sorted in descending order according to the number of pixels count, and the average RGB value of the first cluster after sorting is extracted and converted into a hexadecimal color value by the rgbToHex function as the color of the corresponding edge (edge ​​theme color). If the clustering result of an edge region is empty, the extracted theme color can be used as the color replacement value of the edge region.

[0125] In addition, this technical solution also proposes an adaptive background color decision mechanism, please refer to Figure 2 , Figure 2 This is a schematic diagram of the implementation of an adaptive background color decision method provided in this application. Different background color processing strategies (color fill configuration information) can be implemented according to different design requirements. If overall page harmony is sought, the theme color is directly used to generate a gradient transition effect or add a semi-transparent mask (the color fill configuration information only includes the main area). If seamless fusion of the image and background is sought, the edge color calculation module is triggered to generate an adaptive background fill color to enhance the visual effect (the color fill configuration information includes both the main area and the edge area).

[0126] It can be seen that the color filling method provided in the embodiment of the present application has the following technical advantages:

[0127] 1. It can effectively avoid the visual fragmentation caused by using the image's theme color as the container's fill color. Through edge color transition, the image and container boundaries are naturally connected, greatly improving the overall visual coherence and harmony.

[0128] 2. Breaking through the limitations of traditional theme color extraction, it not only avoids misjudgment of secondary high-frequency colors, but also accurately separates secondary theme colors, providing a richer sense of hierarchy for subsequent color schemes;

[0129] 3. It fills the technical gap in the existing technology for the visual fusion of non-pure color images and container backgrounds, effectively solves the pain points in practical applications, enhances the user's visual experience, ensures the accuracy and completeness of information transmission, and provides an innovative solution for the field of Web image processing and interface design.

[0130] An embodiment of the present application provides a color filling device.

[0131] Please refer to Figure 3 , Figure 3 This is a structural diagram of a color filling device provided in this application. The color filling device may include:

[0132] Conversion module 1 is used to obtain the target image and perform color space conversion on each pixel in the target image to obtain the Lab value of each pixel;

[0133] Determination module 2, used to determine the edge area of ​​the target image according to a preset edge size;

[0134] Traversal module 3, used to traverse each pixel in the target image according to each Lab value, and determine the target pixel that hits the edge area and has a non-zero transparency component;

[0135] Clustering module 4 is used to cluster all target pixels according to the Lab values ​​to obtain clusters, and determine the target cluster with the largest number of pixels among all clusters;

[0136] The filling module 5 is used to determine the edge theme color according to the RGB value of each target pixel in the target cluster, and use the edge theme color to achieve color filling.

[0137] It can be seen that the color filling device provided in the embodiment of the present application, for the target image that needs to be color filled by the front end, first converts it from the RGB color space to the Lab color space through color space conversion, so as to filter out the valid pixels in the edge area of ​​the target image according to the pixel Lab value, that is, the above-mentioned target pixels; then clustering is performed on all the target pixels to extract the edge theme color of the edge area of ​​the target image; finally, the edge theme color can be used to assist in color filling of the target image. It can be seen that the present technical solution realizes the extraction of the edge theme color by calculating the edge color distribution characteristics of the image and uses it as the container filling color to assist in color filling, which effectively solves the problem of visual fusion between the image and the container background, and thus avoids the problem of visual fault in the color filling process, thereby ensuring a more complete and accurate color filling, and further improving the user's visual experience.

[0138] In one embodiment of the present application, the above-mentioned conversion module 1 can be specifically used to obtain image parameters corresponding to the target image; and use the asynchronous loading function to process the image parameters to load and obtain the target image.

[0139] In one embodiment of the present application, the clustering module 4 can be specifically used to perform Euclidean distance calculation based on each Lab value to cluster all target pixels to obtain each cluster; wherein, within each cluster, the Euclidean distance between the target pixel serving as the clustering starting point and each other target pixel is lower than a preset threshold.

[0140] In one embodiment of the present application, the above-mentioned filling module 5 can be specifically used to calculate the RGB mean based on the RGB value of each target pixel in the target cluster; convert the RGB mean into a hexadecimal color value as the edge theme color; and use the edge theme color to achieve color filling.

[0141] In one embodiment of the present application, the color filling device may further include:

[0142] An extraction module is used to determine the main area of ​​the target image after obtaining the target image, and extract the theme color in the main area;

[0143] The judgment module is used to, before determining the target cluster with the largest number of pixels among all clusters, if the number of clusters is zero, use the theme color as the edge theme color to achieve color filling; if the number of clusters is not zero, execute the step of determining the target cluster with the largest number of pixels among all clusters.

[0144] In one embodiment of the present application, the color filling device may further include a selection module for determining the color filling configuration information corresponding to the target image before determining the edge area of ​​the target image according to the preset edge size, and determining the pixel selection area according to the color filling configuration information; when the pixel selection area includes the main area and the edge area, executing the step of determining the edge area of ​​the target image according to the preset edge size; when the pixel selection area includes the main area but does not include the edge area, using the theme color to achieve color filling.

[0145] In one embodiment of the present application, the color filling device may further include a downsampling module, configured to obtain the image size of the target image before performing the color space conversion on each pixel in the target image to obtain the Lab value of each pixel; when the image size exceeds a preset size, downsampling the target image to obtain a downsampled image;

[0146] Accordingly, the conversion module 1 can be specifically used to perform color space conversion on each pixel in the downsampled image to obtain the Lab value of each pixel.

[0147] For an introduction to the apparatus provided in the embodiments of this application, please refer to the above method embodiments, which will not be elaborated in this application.

[0148] An embodiment of the present application provides an electronic device.

[0149] Please refer to Figure 4 , Figure 4 This is a schematic diagram of the structure of an electronic device provided in this application, which may include:

[0150] Memory 11, for storing computer programs;

[0151] The processor 10 can implement the steps of any one of the above-mentioned color filling methods when executing a computer program.

[0152] like Figure 4 FIG2 is a schematic diagram of the structure of an electronic device, which may include a processor 10, a memory 11, a communication interface 12, and a communication bus 13. The processor 10, the memory 11, and the communication interface 12 communicate with each other via the communication bus 13.

[0153] In the embodiment of the present application, the processor 10 may be a central processing unit (CPU), an application-specific integrated circuit, a digital signal processor, a field programmable gate array, or other programmable logic device. The processor 10 may call a program stored in the memory 11. Specifically, the processor 10 may perform the operations in the embodiment of the color filling method.

[0154] The memory 11 is used to store one or more programs. The program may include program code, and the program code includes computer operating instructions. In the embodiment of the present application, the memory 11 stores at least a program for implementing the following functions:

[0155] Get the target image and perform color space conversion on each pixel in the target image to obtain the Lab value of each pixel;

[0156] Determine the edge area of ​​the target image according to a preset edge size;

[0157] Traverse each pixel in the target image according to each Lab value to determine the target pixel that hits the edge area and has a non-zero transparency component;

[0158] All target pixels are clustered according to the Lab values ​​to obtain clusters, and the target cluster with the largest number of pixels is determined among all clusters;

[0159] The edge theme color is determined according to the RGB value of each target pixel in the target cluster, and the edge theme color is used to achieve color filling.

[0160] In one possible implementation, the memory 11 may include a program storage area and a data storage area. The program storage area may store an operating system and at least one application required for a function, and the data storage area may store data created during use. Furthermore, the memory 11 may include high-speed random access memory and non-volatile memory, such as at least one disk storage device or other volatile solid-state storage device.

[0161] The communication interface 12 may be an interface of a communication module, and is used to connect to other devices or systems.

[0162] Of course, it needs to be explained that Figure 4 The structure shown does not constitute a limitation on the electronic device in the embodiment of the present application. In actual applications, the electronic device may include Figure 4 More or fewer components than shown, or combinations of certain components.

[0163] An embodiment of the present application provides a computer-readable storage medium.

[0164] The computer-readable storage medium provided in the embodiment of the present application stores a computer program, and when the computer program is executed by a processor, the steps of any one of the above-mentioned color filling methods can be implemented.

[0165] Among them, computer-readable storage media can be any available medium that can be stored by a computer or a data storage device such as a server or data center that integrates one or more available media. For example, it can be magnetic media (such as floppy disks, hard disks, tapes, etc.), optical media (such as DVDs) or semiconductor media (such as solid-state drives) and other media that can store computer program codes.

[0166] For an introduction to the computer-readable storage medium provided in the embodiments of the present application, please refer to the above method embodiments, and this application will not elaborate on them here.

[0167] An embodiment of the present application provides a computer program product.

[0168] The computer program product provided in the embodiments of the present application includes a computer program / instruction, which, when executed by a processor, can implement the steps of any of the above-mentioned color filling methods.

[0169] Specifically, in each of the above embodiments, all or part of the embodiments may be implemented through software, hardware, firmware, or any combination thereof. When implemented through software, all or part of the embodiments may be implemented in the form of a computer program product.

[0170] Among them, the computer program product may include one or more computer programs / instructions, which, when loaded and executed on a computer, may generate, in whole or in part, the processes or functions described in the embodiments of the present application. The computer may be a general-purpose computer, a special-purpose computer, a computer network, or other programmable device. Computer instructions may be stored in a computer-readable storage medium or transmitted from one computer-readable storage medium to another computer-readable storage medium. For example, computer instructions may be transmitted from one website, computer, server, or data center to another website, computer, server, or data center via a wired (e.g., coaxial cable, optical fiber, digital subscriber line, etc.) or wireless (e.g., infrared, wireless, microwave, etc.) method.

[0171] For an introduction to the computer program product provided in the embodiments of the present application, please refer to the above method embodiments, which will not be elaborated in this application.

[0172] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on the differences from other embodiments. Reference can be made to the common and similar parts between the various embodiments. For the devices disclosed in the embodiments, since they correspond to the methods disclosed in the embodiments, the description is relatively simple, and the relevant parts can be referred to the method description.

[0173] Professionals may further appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the above description has generally described the components and steps of each example according to their functions. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professionals and technicians may use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.

[0174] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein may be implemented directly using hardware, a software module executed by a processor, or a combination of the two. The software module may be placed in random access memory (RAM), internal memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, a hard disk, a removable disk, a CD-ROM, or any other form of storage medium known in the art.

[0175] The technical solution provided by the present application is described in detail above. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only intended to help understand the method and core ideas of the present application. It should be noted that, for those skilled in the art, without departing from the principles of the present application, several improvements and modifications may be made to the present application, and these improvements and modifications also fall within the scope of protection of the present application.

Claims

1. A color filling method, characterized in that: include: Obtain a target image, and perform color space conversion on each pixel in the target image to obtain a Lab value of each pixel; Determining an edge area of ​​the target image according to a preset edge size; Traversing each pixel in the target image according to each Lab value, and determining a target pixel that hits the edge area and has a non-zero transparency component; Clustering all the target pixels according to the Lab values ​​to obtain clusters, and determining the target cluster with the largest number of pixels among all the clusters; An edge theme color is determined according to the RGB value of each target pixel in the target cluster, and color filling is achieved using the edge theme color.

2. The color filling method according to claim 1, characterized in that: Get the target image, including: Obtaining image parameters corresponding to the target image; The image parameters are processed using an asynchronous loading function to load and obtain the target image.

3. The color filling method according to claim 1, characterized in that: Clustering is performed on all the target pixels according to the Lab values ​​to obtain clusters, including: Performing Euclidean distance calculation based on each Lab value to cluster all the target pixels to obtain each cluster; In each of the clusters, the Euclidean distances between the target pixel serving as the cluster starting point and each of the other target pixels are all lower than a preset threshold.

4. The color filling method according to claim 1, characterized in that: Determining an edge theme color according to the RGB value of each target pixel in the target cluster, and using the edge theme color to implement color filling, including: Calculate the RGB mean according to the RGB value of each target pixel in the target cluster; Convert the RGB mean value into a hexadecimal color value as the edge theme color; Color filling is achieved using the edge theme color.

5. The color filling method according to any one of claims 1 to 4, characterized in that: After obtaining the target image, it also includes: Determine a main area of ​​the target image, and extract a theme color within the main area; Accordingly, before determining the target cluster with the largest number of pixels among all the clusters, the method further includes: If the number of clusters is zero, the theme color is used as the edge theme color to achieve color filling; If the number of the clusters is not zero, the step of determining a target cluster with the largest number of pixels among all the clusters is performed.

6. The color filling method according to claim 5, characterized in that: Before determining the edge area of ​​the target image according to the preset edge size, the method further includes: Determining color filling configuration information corresponding to the target image, and determining a pixel selection area according to the color filling configuration information; When the pixel selection area includes the main area and the edge area, performing a step of determining the edge area of ​​the target image according to a preset edge size; When the pixel selection area includes the main area but does not include the edge area, color filling is achieved using the theme color.

7. The color filling method according to claim 1, characterized in that: Before performing color space conversion on each pixel in the target image to obtain the Lab value of each pixel, the method further includes: Obtain the image size of the target image; When the image size exceeds a preset size, downsampling the target image to obtain a downsampled image; Accordingly, color space conversion is performed on each pixel in the target image to obtain the Lab value of each pixel, including: Perform color space conversion on each pixel in the downsampled image to obtain the Lab value of each pixel.

8. A color filling device, characterized in that: include: A conversion module is used to obtain a target image and perform color space conversion on each pixel in the target image to obtain a Lab value of each pixel; A determination module, configured to determine an edge area of ​​the target image according to a preset edge size; a traversal module, configured to traverse each pixel in the target image according to each Lab value, and determine target pixels that hit the edge area and have a non-zero transparency component; A clustering module is used to perform clustering processing on all the target pixels according to the Lab values ​​to obtain clusters, and determine the target cluster with the largest number of pixels among all the clusters; The filling module is used to determine an edge theme color according to the RGB value of each target pixel in the target cluster, and implement color filling using the edge theme color.

9. An electronic device, characterized in that: include: memory for storing computer programs; A processor, configured to implement the steps of the color filling method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, which, when executed by a processor, implements the steps of the color filling method according to any one of claims 1 to 7.

Images