Image color replacement method and device, equipment and storage medium

Abstract

The invention discloses an image color replacement method and device, equipment and a storage medium, according to the scheme, color replacement is automatically performed according to a target theme color selected by a user, so that a picture with a uniform style and a good visual effect is generated, and the efficiency of image color replacement is improved; besides, the color of each color area is further adjusted, so that the color of each color area can be accurately replaced, and the accuracy of image color replacement is improved.

Description

Technical Field

[0001] The present application relates to the field of image processing technology, and in particular to an image color replacement method, device, equipment and storage medium. Background Art

[0002] Image processing plays an important role in modern design and development. Especially in the fields of website development, application development, advertising production, user interface design (UI design), etc., rapid adjustment and replacement of image colors is a common requirement in daily work. Many developers also need to adjust the color of images according to different scenes, themes or brand requirements when processing images.

[0003] Currently, with the popularity of front-end development, UI component libraries, and design systems, developers often need to quickly achieve the unity of images and UI themes. Whether it is adjusting the color of an image or automatically changing the tone of an image according to different themes, these tasks often require frequent collaboration between designers and developers. Without automated tools, developers have to rely on UI designers to provide modified images, which wastes time and increases the development cycle.

[0004] Therefore, existing image color replacement methods have the problem of low efficiency. Summary of the invention

[0005] The present application aims to at least solve the technical problems existing in the prior art. To this end, the first aspect of the present application proposes an image color replacement method, which includes:

[0006] Get the current image color corresponding to the image to be processed and the target theme color determined by the user;

[0007] Adjust the color of the current image based on the target theme color to obtain a new image;

[0008] When the new image does not satisfy the first preset condition, color region recognition is performed on the new image to obtain a plurality of color regions, current region colors corresponding to the color regions, and current region sizes;

[0009] For each color area, a target area color determined by a user from a preset color selector corresponding to the color area is obtained, and the current area color is replaced based on the target area color and the current area size of the color area to obtain a target image.

[0010] In a possible implementation, adjusting the color of the current image based on the target theme color to obtain a new image includes:

[0011] Performing color space conversion processing on the current image color to generate a converted image color; wherein the color space of the converted image color is consistent with the color space of the target theme color;

[0012] Calculate the current similarity between the converted image color and the target theme color;

[0013] The color of the current image is adjusted based on the current similarity and the target theme color to obtain a new image.

[0014] In a possible implementation, performing color space conversion processing on the current image color to generate the converted image color includes:

[0015] Normalize the RGB value of the current image color to obtain a normalized result;

[0016] Based on the maximum and minimum values ​​in the normalized result, the current brightness, current hue and current saturation are calculated;

[0017] Gets the converted image color based on the current brightness, current hue, and current saturation.

[0018] In a possible implementation, the current similarity includes a first similarity, and adjusting the color of the current image based on the current similarity and the target theme color to obtain a new image includes:

[0019] Obtaining a first hue corresponding to the current image color and a second hue corresponding to the target theme color, and obtaining a first similarity between the first hue and the second hue;

[0020] When the first similarity satisfies a second preset condition, replacing the first hue with a second hue;

[0021] Adjusting a first saturation and a first brightness corresponding to the current image color to obtain a second saturation and a second brightness;

[0022] The color of the current image is adjusted based on the second hue, the second saturation, the second brightness and the target theme color to obtain a new image.

[0023] In a possible implementation, adjusting the color of the current image based on the second hue, the second saturation, the second brightness, and the target theme color to obtain a new image includes:

[0024] For each target pixel in the image to be processed, the current image color corresponding to each target pixel is replaced with the target theme color to obtain a new pixel;

[0025] A new image is obtained based on the second hue, the second saturation, the second brightness and each new pixel.

[0026] In a possible implementation, adjusting the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain a new image further includes:

[0027] For each color region in the image to be processed, the current image color corresponding to each color region is replaced with the target theme color to obtain a new color region;

[0028] A new image is obtained based on the second hue, the second saturation, the second brightness and each new color area.

[0029] In a possible implementation, adjusting the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain a new image further includes:

[0030] Adjust the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain an intermediate image;

[0031] The edge region of the intermediate image is obtained, and a preset gradient algorithm is used to process the edge region to obtain a new image.

[0032] A second aspect of the present application provides an image color replacement device, the device comprising:

[0033] An acquisition module is used to acquire the current image color corresponding to the image to be processed and the target theme color determined by the user;

[0034] An adjustment module is used to adjust the color of the current image based on the target theme color to obtain a new image;

[0035] an identification module, configured to perform color region identification on the new image when the new image does not satisfy the first preset condition, and obtain a plurality of color regions, a current region color corresponding to each color region, and a current region size;

[0036] The replacement module is used to obtain, for each color area, a target area color determined by a user from a preset color selector corresponding to the color area, and replace the current area color based on the target area color and the current area size of the color area to obtain a target image.

[0037] In a possible implementation manner, the adjustment module is specifically used to:

[0038] Performing color space conversion processing on the current image color to generate a converted image color; wherein the color space of the converted image color is consistent with the color space of the target theme color;

[0039] Calculate the current similarity between the converted image color and the target theme color;

[0040] The color of the current image is adjusted based on the current similarity and the target theme color to obtain a new image.

[0041] In a possible implementation manner, the adjustment module is further used to:

[0042] Normalize the RGB value of the current image color to obtain a normalized result;

[0043] Based on the maximum and minimum values ​​in the normalized result, the current brightness, current hue and current saturation are calculated;

[0044] Gets the converted image color based on the current brightness, current hue, and current saturation.

[0045] In a possible implementation manner, the current similarity includes a first similarity. In a possible implementation manner, the adjustment module is further configured to:

[0046] Obtaining a first hue corresponding to the current image color and a second hue corresponding to the target theme color, and obtaining a first similarity between the first hue and the second hue;

[0047] When the first similarity satisfies a second preset condition, replacing the first hue with a second hue;

[0048] Adjusting a first saturation and a first brightness corresponding to the current image color to obtain a second saturation and a second brightness;

[0049] The color of the current image is adjusted based on the second hue, the second saturation, the second brightness and the target theme color to obtain a new image.

[0050] In a possible implementation manner, the adjustment module is further used to:

[0051] For each target pixel in the image to be processed, the current image color corresponding to each target pixel is replaced with the target theme color to obtain a new pixel;

[0052] A new image is obtained based on the second hue, the second saturation, the second brightness and each new pixel.

[0053] In a possible implementation manner, the adjustment module is further used to:

[0054] For each color region in the image to be processed, the current image color corresponding to each color region is replaced with the target theme color to obtain a new color region;

[0055] A new image is obtained based on the second hue, the second saturation, the second brightness and each new color area.

[0056] In a possible implementation manner, the adjustment module is further used to:

[0057] Adjust the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain an intermediate image;

[0058] The edge region of the intermediate image is obtained, and a preset gradient algorithm is used to process the edge region to obtain a new image.

[0059] The third aspect of the present application proposes an electronic device, which includes a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the image color replacement method as described in the first aspect.

[0060] In a fourth aspect, the present application proposes a computer-readable storage medium, in which at least one instruction, at least one program, a code set or an instruction set is stored. The at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by a processor to implement the image color replacement method as described in the first aspect.

[0061] The embodiments of the present application have the following beneficial effects:

[0062] The image color replacement method provided by the embodiment of the present application includes: obtaining the current image color corresponding to the image to be processed and the target theme color determined by the user, adjusting the current image color based on the target theme color to obtain a new image, and when the new image does not meet the first preset condition, performing color region identification on the new image to obtain multiple color regions, the current region color corresponding to each color region, and the current region size, for each color region, obtaining the target region color determined by the user from the preset color selector corresponding to the color region, and replacing the current region color based on the target region color and the current region size of the color region to obtain the target image. This solution improves the efficiency of image color replacement by automatically performing color replacement according to the target theme color selected by the user, thereby generating a picture with a unified style and good visual effect; in addition, by further adjusting the color of each color region, the color of each color region can be accurately replaced, thereby improving the accuracy of image color replacement. BRIEF DESCRIPTION OF THE DRAWINGS

[0063] Figure 1 A block diagram of a computer device provided in an embodiment of the present application;

[0064] Figure 2 A flowchart of a method for replacing image color provided in an embodiment of the present application;

[0065] Figure 3A flowchart of the steps of obtaining a new image provided in an embodiment of the present application;

[0066] Figure 4 A flowchart of steps for generating converted image colors provided in an embodiment of the present application;

[0067] Figure 5 A flowchart of the steps for adjusting the color of a current image provided in an embodiment of the present application;

[0068] Figure 6 Another flowchart of steps for adjusting the color of a current image provided by an embodiment of the present application;

[0069] Figure 7 A flowchart of another step of adjusting the color of a current image provided in an embodiment of the present application;

[0070] Figure 8 A flowchart of another step of adjusting the color of a current image provided in an embodiment of the present application;

[0071] Fig. 9 A structural block diagram of an image color replacement device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0072] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions 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 creative work are within the scope of protection of this application.

[0073] With the popularity of front-end development, UI component libraries, and design systems, developers often need to quickly achieve the unity of images and UI themes. Whether it is adjusting the color of an image or automatically changing the tone of an image according to different themes, these tasks often require frequent collaboration between designers and developers. Without automated tools, developers have to rely on UI designers to provide modified images, which wastes time and increases the development cycle. Therefore, it is particularly important to be able to automatically replace image colors, whether it is replacing according to specified colors or intelligently adjusting according to theme colors.

[0074] Existing image processing tools usually cannot meet these requirements, especially when it is necessary to support multiple image formats (such as JPG, PNG, SVG, etc.) and achieve seamless integration in different development environments. Therefore, most image processing tools in the existing technology require users to manually select color areas, which makes it difficult to efficiently process complex images; in addition, the existing technology has low accuracy in automatic color recognition and replacement, especially in multi-color images, it is difficult to accurately locate color areas; and for the theme color input by the user, the existing system cannot achieve intelligent adjustment of the entire image tone, and can only achieve simple color filling, with poor visual effects; in addition, some tools have poor support for common vector graphics formats, which affects cross-format application scenarios.

[0075] Based on this, the present application proposes an image color replacement method, which includes: obtaining the current image color corresponding to the image to be processed and the target theme color determined by the user, adjusting the current image color based on the target theme color to obtain a new image, and when the new image does not meet the first preset condition, performing color region identification on the new image to obtain multiple color regions, the current region color corresponding to each color region, and the current region size, for each color region, obtaining the target region color determined by the user from the preset color selector corresponding to the color region, and replacing the current region color based on the target region color and the current region size of the color region to obtain the target image. This solution improves the efficiency of image color replacement by automatically performing color replacement according to the target theme color selected by the user, thereby generating a picture with a unified style and good visual effect; in addition, by further adjusting the color of each color region, the color of each color region can be accurately replaced, thereby improving the accuracy of image color replacement.

[0076] In the following, the terms "first" and "second" are used for descriptive purposes only and are not to be understood as indicating or implying relative importance or implicitly indicating the number of technical features indicated. Thus, features defined as "first" and "second" may explicitly or implicitly include one or more of the features. In the description of the embodiments of the present disclosure, unless otherwise specified, "multiple" means two or more. In addition, the use of "based on" or "according to" means openness and inclusiveness, because the process, steps, calculations or other actions "based on" or "according to" one or more of the conditions or values ​​may be based on additional conditions or values ​​beyond the described values ​​in practice.

[0077] The image color replacement method provided in the present application can be applied to a computer device (electronic device), which can be a server or a terminal, wherein the server can be a single server or a server cluster composed of multiple servers. The embodiments of the present application do not specifically limit this. The terminal can be, but is not limited to, various personal computers, laptops, smart phones, tablet computers, and portable wearable devices.

[0078] Take the computer device as a server as an example. Figure 1 A block diagram of a server is shown, such as Figure 1 As shown, the server may include a processor and a memory connected via a system bus. The processor of the server is used to provide computing and control capabilities. The memory of the server includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system, a computer program, and a database. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. When the computer program is executed by the processor, an image color replacement method is implemented.

[0079] Those skilled in the art will understand that Figure 1 The structure shown in the figure is only a block diagram of a partial structure related to the solution of the present application, and does not constitute a limitation on the server to which the solution of the present application is applied. Optionally, the server may include more or fewer components than shown in the figure, or combine certain components, or have a different arrangement of components.

[0080] It should be noted that the execution subject of the embodiments of the present application may be a computer device or an image color replacement device. The following method embodiments are described with the computer device as the execution subject.

[0081] Figure 2 This is a flowchart of a method for replacing image color provided by an embodiment of the present application. Figure 2 As shown, the method comprises the following steps:

[0082] Step 202: Obtain the current image color corresponding to the image to be processed and the target theme color determined by the user.

[0083] Among them, the format of the image to be processed can be multiple, and the embodiment of the present application does not specifically limit this. This method improves the versatility and flexibility of image color replacement. For example, it can be multiple image formats such as JPG, PNG, JPEG, SVG, etc.

[0084] Users can upload the image to be processed in advance. After the image to be processed is uploaded, the file format can be read through the FileRender and beforeUpload events of the uploaded file in JavaScript to identify whether it meets the image format restrictions. In addition, for Raster images, that is, for images in JPG, PNG, JPEG and other formats, FileRender.readAsDataURL can be used to read the file as a Data URL, and images in SVG format can be parsed using DOMParser.

[0085] The above FileRender is mainly used to write file data to the output stream, thereby returning the file content to the client. The beforeUpload event is used to perform some operations before the file is uploaded. The operations required by the user can be performed in the callback function of this event, such as verifying the file type and size. Raster images are grid-like images composed of many pixels, and each pixel represents a point in the image. readAsDataURL is a method of the FileReader object, which is used to read the specified file as a string in the DataURL format.

[0086] SVG file is an XML-based vector graphics file format that uses mathematical formulas to describe the shape, color, and position of graphics, so that it can be parsed using DOMParser, an API for parsing HTML or XML documents. It allows developers to convert HTML or XML documents in string form into an operable Document Object Model (DOM for short).

[0087] The current image color corresponding to the image to be processed is also the current color of each pixel, and the color of each pixel in the image is stored in the form of RGB.

[0088] The target theme color determined by the user can be directly input by the user or selected by the user in a color picker. The target theme color can be expressed by the Hue-Saturation-Lightness (HSL) color model, because the HSL model can express the color tone more intuitively and can easily adjust the saturation and brightness of the color.

[0089] Step 204: Adjust the color of the current image based on the target theme color to obtain a new image.

[0090] After obtaining the current image color and the target theme color determined by the user, the current image color can be adjusted based on the target theme color to obtain a new image. In some optional embodiments, the target theme color can be directly used to replace the current image color to obtain a new image.

[0091] In some other optional embodiments, Figure 3 As shown, Figure 3 A flowchart of the steps of obtaining a new image provided in an embodiment of the present application includes:

[0092] Step 302: Perform color space conversion processing on the current image color to generate a converted image color.

[0093] Step 304: Calculate the current similarity between the converted image color and the target theme color.

[0094] Step 306: Adjust the color of the current image based on the current similarity and the target theme color to obtain a new image.

[0095] Among them, since the current image color is stored in RGB format and the target theme color is stored in HSL format, in order to compare and replace colors, the current image color needs to be converted into a color space, thereby converting the current image color from RGB to HSL, that is, the color space of the converted image color is consistent with the color space of the target theme color.

[0096] Optionally, when performing color space conversion processing, such as Figure 4 As shown, Figure 4 A flowchart of steps for generating converted image colors provided in an embodiment of the present application includes:

[0097] Step 402: normalize the RGB value of the current image color to obtain a normalized result.

[0098] Step 404: Calculate the current brightness, current hue, and current saturation based on the maximum and minimum values ​​in the normalized result.

[0099] Step 406: Obtain the converted image color based on the current brightness, current hue and current saturation.

[0100] The RGB value of the current image color may be normalized first, that is, the color value of each pixel is divided by 255 to obtain a normalized result, and the normalized RGB value is in the range of [0,1].

[0101] Next, the maximum value max and the minimum value min in the normalized result can be determined, so that the current brightness l can be calculated based on the maximum value max and the minimum value min, that is,

[0102] Furthermore, the current hue h and current saturation s can be calculated based on the maximum value max. If the maximum value max is equal to the minimum value min, it means that the color has no hue. In this case, h = 0 and s = 0. If the maximum value max is not equal to the minimum value min, then The value of h can be calculated according to the position of the maximum value max. The calculation method of the current hue h depends on which color channel the maximum value comes from. The specific calculation process can refer to the existing technology and will not be repeated here.

[0103] Finally, the converted image color can be obtained based on the current brightness, current hue and current saturation.

[0104] Next, the current similarity between the converted image color and the target theme color can be calculated, and the current image color can be adjusted based on the current similarity and the target theme color to obtain a new image. In some optional embodiments, the current similarity can include a first similarity, such as Figure 5 As shown, Figure 5 A flowchart of the steps for adjusting the color of a current image provided in an embodiment of the present application includes:

[0105] Step 502: Obtain a first hue corresponding to the current image color and a second hue corresponding to the target theme color, and obtain a first similarity between the first hue and the second hue.

[0106] Step 504: When the first similarity satisfies a second preset condition, the first color tone is replaced with the second color tone.

[0107] Step 506: Adjust the first saturation and the first brightness corresponding to the current image color to obtain a second saturation and a second brightness.

[0108] Step 508: Adjust the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain a new image.

[0109] Among them, when calculating the first similarity between the first hue and the second hue, it can be calculated by the Euclidean distance algorithm, that is, the first similarity can be determined by the Euclidean distance between the first hue and the second hue. Of course, it can also be calculated by other algorithms, and the embodiment of the present application does not make specific limitations on this.

[0110] Thus, the first hue can be replaced by the second hue when the first similarity satisfies the second preset condition. The second preset condition here can be a preset similarity threshold. When the first similarity satisfies the preset similarity threshold, it means that the first hue and the second hue are similar, that is, the hue difference between the current image color and the target theme color is small, and the first hue can be directly replaced by the second hue.

[0111] Next, the first saturation and the first brightness corresponding to the current image color may be adjusted according to user needs or the visual effect of the image to obtain a second saturation and a second brightness, so as to make it more consistent with the visual effect of the target theme color.

[0112] Finally, the color of the current image can be adjusted based on the second hue, the second saturation, the second brightness and the target theme color to obtain a new image.

[0113] In some optional embodiments, Figure 6 As shown, Figure 6 Another flowchart of steps for adjusting the color of a current image provided in an embodiment of the present application includes:

[0114] Step 602: For each target pixel in the image to be processed, the current image color corresponding to each target pixel is replaced with the target theme color to obtain a new pixel.

[0115] Step 604: Obtain a new image based on the second hue, the second saturation, the second brightness and each new pixel.

[0116] Among them, each target pixel in the image to be processed is the pixel determined to need color replacement, so that the current image color corresponding to each target pixel can be replaced with the target theme color to obtain a new pixel, and finally a new image is obtained based on the second hue, the second saturation, the second brightness and each new pixel, thereby completing the color replacement process.

[0117] In some other optional embodiments, Figure 7 As shown, Figure 7 Another flowchart of steps for adjusting the color of a current image provided in an embodiment of the present application includes:

[0118] Step 702: For each color region in the image to be processed, replace the current image color corresponding to each color region with the target theme color to obtain a new color region.

[0119] Step 704: Obtain a new image based on the second hue, the second saturation, the second brightness and each new color region.

[0120] Among them, in addition to replacing the color of each pixel separately, the color areas in the image to be processed can also be adjusted. The colors in the same color area are similar or identical, so the current image colors corresponding to each color area can be replaced with the target theme color to obtain a new color area. Finally, a new image can be obtained based on the second hue, the second saturation, the second brightness and the new color areas, thereby completing the color replacement process.

[0121] In some other optional embodiments, Figure 8 As shown, Figure 8 A flowchart of another step of adjusting the color of a current image provided in an embodiment of the present application includes:

[0122] Step 802: Adjust the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain an intermediate image.

[0123] Step 804: Acquire the edge region of the intermediate image, and process the edge region using a preset gradient algorithm to obtain a new image.

[0124] After adjusting the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color, an intermediate image is obtained, which can be further adjusted and optimized, that is, the edge area of ​​the intermediate image can be obtained by edge extraction and other related algorithms, and then the edge area is processed by a preset gradient algorithm to finally obtain a new image. The specific process of processing the edge area can refer to the existing technology and will not be repeated here.

[0125] In the embodiment of the present application, a gradient algorithm may be used for some edge transition areas to allow the replaced colors to transition smoothly, thereby avoiding obvious color difference contrast.

[0126] Step 206: When the new image does not satisfy the first preset condition, color region recognition is performed on the new image to obtain multiple color regions, current region colors corresponding to each color region, and current region sizes.

[0127] Among them, the first preset condition can be a preset overall image effect, and the overall image effect can be that the overall color of the image is coordinated and unified, the local color of the image is not deviated from the real color, etc., that is, when the new image does not meet the preset overall image effect, the new image can be subjected to color area recognition to obtain multiple color areas, the current area color corresponding to each color area, and the current area size.

[0128] Optionally, you can first get the canvas context through canvas, draw the new image onto the canvas, and finally get the pixel data of the image through the getImageData() function. Then use color similarity or an algorithm based on pixel adjacency to identify the area, thereby obtaining multiple color areas, which can ensure that the same color area is identified as a whole, rather than just extracting the most frequently occurring color.

[0129] Among them, the algorithm based on pixel adjacency can be a Flood Fill algorithm, which is an image area filling algorithm suitable for identifying large areas in an image. The Flood Fill algorithm can be used to identify areas with similar colors. The goal is to find a pixel area and apply the same color judgment rule to adjacent pixels until different colors are encountered. After identification, each color area can be marked with its current area color and current area size.

[0130] Specifically, Flood File uses a stack to implement area filling, similar to depth-first search, starting from a starting point, checking whether the adjacent pixels have the same color as the current pixel, and if they are the same, adding them to the stack to continue processing. A collection is used to record the visited pixels to avoid repeated calculations, and the coordinates of all pixels belonging to the same color area are stored in an array.

[0131] Optionally, for each color region, its area, that is, the number of pixels, is calculated, so that the proportion of the color region can be displayed according to the area, and finally the current region size corresponding to each color region is obtained.

[0132] Step 208: For each color area, obtain the target area color determined by the user from a preset color selector corresponding to the color area, and replace the current area color based on the target area color and the current area size of the color area to obtain a target image.

[0133] Among them, after identifying multiple color areas, the target area color determined by the user from the preset color selector corresponding to the color area can be obtained for each color area, and the current area color can be replaced based on the target area color and the current area size of the color area to obtain the target image.

[0134] Specifically, after a color region is identified, its current region color and current region size can be displayed for the user to select. Optionally, the color region that is allowed to be replaced can also be highlighted, so that the user can clearly see which color regions in the image will be replaced and quickly select the target region color to replace.

[0135] Each color area can be followed by a preset color selector, so that the user can select a new target area color to replace. It should be noted that the current area color and the target area color selection of each area can be displayed on the page at the same time, which is convenient for users to make more intuitive selections and operations.

[0136] When the user selects the target area color on the page, the current area color needs to be replaced with the target area color specified by the user. The color replacement process can be achieved by updating the pixel data of the image in a manner similar to the Flood Fill tree algorithm.

[0137] In some optional embodiments, after completing the image color replacement, the next step is to export the processed target image into multiple formats. Each format has different characteristics. Taking the common JPEG, PNG, and SVG as examples, different processing methods are shown below for different formats.

[0138] PNG is a lossless compressed image format that supports transparent backgrounds and is suitable for images that require transparency or preserve details. To output to PNG format, the main step is to draw the processed image to <canvas>element, and then convert it to PNG data. The operation principle is to use canvas.toDataURL("img / png") to convert <canvas>The image data in the image is converted to a Base64-encoded PNG data URL. In this way, users can download the image directly. The advantage of PNG is that it retains image details without quality loss and supports transparency. Therefore, it is necessary to ensure that the transparent areas of the image are properly processed during the output process.

[0139] JPEG is a lossy compression format that is suitable for images with rich colors and no transparency is required. It reduces file size by losing some image information, so it is suitable for photos and complex images. Its operating principle is to draw the processed image into <canvas>On the canvas, use canvas.toDataURL("img / jpeg", quality) to generate a data URL in JPEG format. The quality parameter can be used to control the compression level, usually between 0 and 1. The higher the value, the better the image quality, but the larger the file size. The advantage of JPEG is that the format file is small, which is suitable for colorful images such as photos.

[0140] SVG is a vector graphics format suitable for simple graphics and icons. Unlike bitmap formats, SVG images are based on XML and can be infinitely scaled without distortion. Therefore, they are suitable for graphics, icons, and certain types of illustrations. The operating principle is that for the image to be converted to SVG, the image must first be vectorized. This is usually done through image segmentation, color extraction, and path generation algorithms. Then, the path and color data are saved in XML format to generate an SVG file. The advantage of SVG is that the format is lossless and can be infinitely scaled, making it suitable for icons, simplified graphics, etc.

[0141] In some optional embodiments, a real-time preview function can be added, which allows users to view the effect in real time during the image replacement process, so as to quickly adjust the color and check the results. The key to realizing this function lies in the real-time rendering and feedback mechanism, which ensures that each step of image processing can be presented instantly, improves user experience, and shortens debugging time.

[0142] Specifically, images uploaded by the user are loaded into the browser via the file input, <canvas>Or other graphics processing methods, the image is rendered in the page. At this time, the user can immediately see the original image, that is, the preview of the image to be processed.

[0143] When the user adjusts the color, such as selecting a theme color or specifying a replacement color, clicks the Replace button, and the system dynamically calculates the color replacement effect in the background. Each pixel of the image is adjusted according to the new color, and the processed target image is updated and rendered on the canvas at any time. This process is achieved through real-time processing of image data, ensuring that users can quickly see changes when making adjustments.

[0144] In addition, real-time feedback can be provided to require that each color adjustment of the image is immediately reflected in the preview area. To this end, the system needs to calculate each color change and immediately draw a new image. During user interaction, the color difference can be calculated, that is, each time the user selects a new color, that is, the target theme color, the system calculates the difference between the image to be processed and the target theme color, and adjusts the current image color based on this difference. For example, if the user selects a new target theme color, the color value of each pixel can be adjusted according to hue, saturation, and brightness. In addition, in order to improve the user experience, the system can use gradient animation to smoothly transition to a new color state, achieving progressive display rather than instant replacement, which can avoid visual impact.

[0145] The present application provides an image color replacement method, which includes: obtaining the current image color corresponding to the image to be processed and the target theme color determined by the user, adjusting the current image color based on the target theme color to obtain a new image, and when the new image does not meet the first preset condition, performing color region recognition on the new image to obtain multiple color regions, the current region color corresponding to each color region, and the current region size, for each color region, obtaining the target region color determined by the user from a preset color selector corresponding to the color region, and replacing the current region color based on the target region color and the current region size of the color region to obtain the target image. This solution automatically performs color replacement according to the target theme color selected by the user, thereby generating a picture with a unified style and good visual effect, thereby improving the efficiency of image color replacement; in addition, by further adjusting the color of each color region, the color of each color region can be accurately replaced, thereby improving the accuracy of image color replacement.

[0146] It should be understood that, although the various steps in the flowcharts involved in the above-mentioned embodiments are displayed in sequence according to the indication of the arrows, these steps are not necessarily executed in sequence according to the order indicated by the arrows. Unless there is a clear explanation in this article, the execution of these steps does not have a strict order restriction, and these steps can be executed in other orders. Moreover, at least a part of the steps in the flowcharts involved in the above-mentioned embodiments can include multiple steps or multiple stages, and these steps or stages are not necessarily executed at the same time, but can be executed at different times, and the execution order of these steps or stages is not necessarily to be carried out in sequence, but can be executed in turn or alternately with other steps or at least a part of the steps or stages in other steps.

[0147] Fig. 9 A structural block diagram of an image color replacement device provided in an embodiment of the present application.

[0148] like Fig. 9 As shown, the image color replacement device 900 includes:

[0149] The acquisition module 902 is used to acquire the current image color corresponding to the image to be processed and the target theme color determined by the user.

[0150] The adjustment module 904 is used to adjust the color of the current image based on the target theme color to obtain a new image.

[0151] The identification module 906 is used to perform color region identification on the new image when the new image does not meet the first preset condition, and obtain multiple color regions, current region colors corresponding to each color region, and current region sizes.

[0152] The replacement module 908 is used to obtain, for each color area, a target area color determined by a user from a preset color selector corresponding to the color area, and replace the current area color based on the target area color and the current area size of the color area to obtain a target image.

[0153] Regarding the device in the above embodiment, the specific way in which each module performs operations has been described in detail in the embodiment of the method, and will not be described in detail here. Each module in the above image color replacement device can be implemented in whole or in part by software, hardware, or a combination thereof. Each module can be embedded in or independent of a processor in a computer device in the form of hardware, or can be stored in a memory in a computer device in the form of software, so that the processor can call and execute the operations of each module above.

[0154] In one embodiment of the present application, a computer device is provided, the computer device comprising a memory and a processor, the memory storing a computer program, and the processor implementing the following steps when executing the computer program:

[0155] Get the current image color corresponding to the image to be processed and the target theme color determined by the user;

[0156] Adjust the color of the current image based on the target theme color to obtain a new image;

[0157] When the new image does not satisfy the first preset condition, color region recognition is performed on the new image to obtain a plurality of color regions, current region colors corresponding to the color regions, and current region sizes;

[0158] For each color area, a target area color determined by a user from a preset color selector corresponding to the color area is obtained, and the current area color is replaced based on the target area color and the current area size of the color area to obtain a target image.

[0159] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0160] Performing color space conversion processing on the current image color to generate a converted image color; wherein the color space of the converted image color is consistent with the color space of the target theme color;

[0161] Calculate the current similarity between the converted image color and the target theme color;

[0162] The color of the current image is adjusted based on the current similarity and the target theme color to obtain a new image.

[0163] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0164] Normalize the RGB value of the current image color to obtain a normalized result;

[0165] Based on the maximum and minimum values ​​in the normalized result, the current brightness, current hue and current saturation are calculated;

[0166] Gets the converted image color based on the current brightness, current hue, and current saturation.

[0167] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0168] Obtaining a first hue corresponding to the current image color and a second hue corresponding to the target theme color, and obtaining a first similarity between the first hue and the second hue;

[0169] When the first similarity satisfies a second preset condition, replacing the first hue with a second hue;

[0170] Adjusting a first saturation and a first brightness corresponding to the current image color to obtain a second saturation and a second brightness;

[0171] The color of the current image is adjusted based on the second hue, the second saturation, the second brightness and the target theme color to obtain a new image.

[0172] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0173] For each target pixel in the image to be processed, the current image color corresponding to each target pixel is replaced with the target theme color to obtain a new pixel;

[0174] A new image is obtained based on the second hue, the second saturation, the second brightness and each new pixel.

[0175] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0176] For each color region in the image to be processed, the current image color corresponding to each color region is replaced with the target theme color to obtain a new color region;

[0177] A new image is obtained based on the second hue, the second saturation, the second brightness and each new color area.

[0178] In one embodiment of the present application, when the processor executes the computer program, the processor further implements the following steps:

[0179] Adjust the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain an intermediate image;

[0180] The edge region of the intermediate image is obtained, and a preset gradient algorithm is used to process the edge region to obtain a new image.

[0181] The computer device provided in the embodiment of the present application has similar implementation principles and technical effects to those of the above-mentioned method embodiment, and will not be described in detail here.

[0182] In one embodiment of the present application, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, the following steps are implemented:

[0183] Get the current image color corresponding to the image to be processed and the target theme color determined by the user;

[0184] Adjust the color of the current image based on the target theme color to obtain a new image;

[0185] When the new image does not satisfy the first preset condition, color region recognition is performed on the new image to obtain a plurality of color regions, current region colors corresponding to the color regions, and current region sizes;

[0186] For each color area, a target area color determined by a user from a preset color selector corresponding to the color area is obtained, and the current area color is replaced based on the target area color and the current area size of the color area to obtain a target image.

[0187] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0188] Performing color space conversion processing on the current image color to generate a converted image color; wherein the color space of the converted image color is consistent with the color space of the target theme color;

[0189] Calculate the current similarity between the converted image color and the target theme color;

[0190] The color of the current image is adjusted based on the current similarity and the target theme color to obtain a new image.

[0191] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0192] Normalize the RGB value of the current image color to obtain a normalized result;

[0193] Based on the maximum and minimum values ​​in the normalized result, the current brightness, current hue and current saturation are calculated;

[0194] Gets the converted image color based on the current brightness, current hue, and current saturation.

[0195] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0196] Obtaining a first hue corresponding to the current image color and a second hue corresponding to the target theme color, and obtaining a first similarity between the first hue and the second hue;

[0197] When the first similarity satisfies a second preset condition, replacing the first hue with a second hue;

[0198] Adjusting a first saturation and a first brightness corresponding to the current image color to obtain a second saturation and a second brightness;

[0199] The color of the current image is adjusted based on the second hue, the second saturation, the second brightness and the target theme color to obtain a new image.

[0200] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0201] For each target pixel in the image to be processed, the current image color corresponding to each target pixel is replaced with the target theme color to obtain a new pixel;

[0202] A new image is obtained based on the second hue, the second saturation, the second brightness and each new pixel.

[0203] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0204] For each color region in the image to be processed, the current image color corresponding to each color region is replaced with the target theme color to obtain a new color region;

[0205] A new image is obtained based on the second hue, the second saturation, the second brightness and each new color area.

[0206] In one embodiment of the present application, when the computer program is executed by a processor, the following steps are further implemented:

[0207] Adjust the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain an intermediate image;

[0208] The edge region of the intermediate image is obtained, and a preset gradient algorithm is used to process the edge region to obtain a new image.

[0209] The computer-readable storage medium provided in this embodiment has similar implementation principles and technical effects to those of the above method embodiments, and will not be described in detail here.

[0210] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0211] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0212] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.< / canvas> < / canvas> < / canvas> < / canvas>

Claims

1. A method for replacing image color, characterized in that: The method comprises: Get the current image color corresponding to the image to be processed and the target theme color determined by the user; Adjust the color of the current image based on the target theme color to obtain a new image; In the case that the new image does not satisfy the first preset condition, performing color region recognition on the new image to obtain a plurality of color regions, current region colors corresponding to the color regions, and current region sizes; For each color area, a target area color determined by a user from a preset color selector corresponding to the color area is obtained, and the current area color is replaced based on the target area color and the current area size of the color area to obtain a target image.

2. The method according to claim 1, characterized in that The step of adjusting the color of the current image based on the target theme color to obtain a new image includes: Performing a color space conversion process on the current image color to generate a converted image color; wherein the color space of the converted image color is consistent with the color space of the target theme color; Calculating the current similarity between the converted image color and the target theme color; The color of the current image is adjusted based on the current similarity and the target theme color to obtain the new image.

3. The method according to claim 2, characterized in that The performing color space conversion processing on the current image color to generate the converted image color includes: Normalizing the RGB value of the current image color to obtain a normalized result; Based on the maximum value and the minimum value in the normalized result, the current brightness, the current hue and the current saturation are calculated; The converted image color is obtained based on the current brightness, the current hue and the current saturation.

4. The method according to claim 2 or 3, characterized in that: The current similarity includes a first similarity, and adjusting the color of the current image based on the current similarity and the target theme color to obtain the new image includes: Acquire a first hue corresponding to the current image color and a second hue corresponding to the target theme color, and acquire a first similarity between the first hue and the second hue; When the first similarity satisfies a second preset condition, replacing the first hue with the second hue; Adjusting a first saturation and a first brightness corresponding to the color of the current image to obtain a second saturation and a second brightness; The color of the current image is adjusted based on the second hue, the second saturation, the second brightness and the target theme color to obtain the new image.

5. The method according to claim 4, characterized in that The adjusting the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain the new image includes: For each target pixel in the image to be processed, the current image color corresponding to each target pixel is replaced with the target theme color to obtain a new pixel; The new image is obtained based on the second hue, the second saturation, the second brightness and each of the new pixels.

6. The method according to claim 4, characterized in that The adjusting the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain the new image also includes: For each color region in the image to be processed, the current image color corresponding to each color region is replaced with the target theme color to obtain a new color region; The new image is obtained based on the second hue, the second saturation, the second brightness and each of the new color regions.

7. The method according to claim 4, characterized in that The adjusting the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain the new image also includes: Adjust the color of the current image based on the second hue, the second saturation, the second brightness and the target theme color to obtain an intermediate image; The edge region of the intermediate image is acquired, and the edge region is processed by using a preset gradient algorithm to obtain the new image.

8. An image color replacement device, characterized in that: The device comprises: An acquisition module is used to acquire the current image color corresponding to the image to be processed and the target theme color determined by the user; An adjustment module, used for adjusting the color of the current image based on the target theme color to obtain a new image; an identification module, configured to perform color region identification on the new image when the new image does not satisfy the first preset condition, and obtain a plurality of color regions, a current region color corresponding to each of the color regions, and a current region size; The replacement module is used to obtain, for each color area, a target area color determined by a user from a preset color selector corresponding to the color area, and replace the current area color based on the target area color and the current area size of the color area to obtain a target image.

9. An electronic device, characterized in that: The electronic device includes a processor and a memory, wherein the memory stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the image color replacement method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The storage medium stores at least one instruction, at least one program, a code set or an instruction set, and the at least one instruction, the at least one program, the code set or the instruction set is loaded and executed by the processor to implement the image color replacement method as described in any one of claims 1-7.

Images