Image display method, device, electronic equipment and storage medium

Abstract

The present application relates to the technical field of image processing, and provides an image display method and device, electronic equipment and storage medium. By storing the compressed material image and the corresponding tolerance parameter in the client, obtaining the color data of the material image, the material image comprising a foreground and a solid color background, wherein the solid color background represents a transparent layer before compression of the material image; then obtaining the transparent data of the material image according to the color data of the material image, the solid color background and the tolerance parameter; and then restoring the transparent layer of the material image according to the transparent data, obtaining the to-be-displayed image comprising the transparent layer and the foreground and displaying the to-be-displayed image. By storing the compressed material image and the corresponding tolerance parameter in the client, the occupied space of the material image is reduced, the effect of saving storage space is achieved, and the transparent display effect is realized by restoring the transparent layer.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of image processing, in particular to an image display method and device, electronic equipment and storage medium. BACKGROUND

[0002] With the development of multimedia technology, watching video live broadcast through a client has become a way of public entertainment, and a large number of material resources are stored in the client to support the beautification of the interactive interface. For example, a user can send a virtual gift to a host and display a gift special effect when watching a live broadcast. Currently, the material of the gift special effect usually adopts a PNG picture containing a transparent layer. Since the PNG format picture supports a transparent layer and has a low compression ratio, the picture occupies a large space, thereby continuously increasing the space occupied by the client. SUMMARY

[0003] Therefore, the present application aims to provide an image display method and device, electronic equipment and storage medium.

[0004] To achieve the above-mentioned purpose, the technical solution adopted by the embodiments of the present application is as follows:

[0005] In a first aspect, the present application provides an image display method applied to a client, wherein the client stores a compressed material image and a corresponding tolerance parameter thereof, and the method comprises:

[0006] Obtaining color data of the material image, wherein the material image comprises a foreground and a solid color background; and the solid color background represents a transparent layer before compression of the material image;

[0007] Obtaining transparent data of the material image according to the color data of the material image, the solid color background and the tolerance parameter;

[0008] Recovering the transparent layer of the material image according to the transparent data, obtaining a to-be-displayed image containing the transparent layer and the foreground, and displaying the to-be-displayed image.

[0009] In an optional embodiment, the color data of the material image comprises a color value of each pixel point; and the tolerance parameter comprises a background tolerance threshold, an edge tolerance threshold and a two-color tolerance threshold.

[0010] The step of obtaining the transparent data of the material image according to the color data of the material image, the solid color background and the tolerance parameter comprises:

[0011] Obtaining a color value and a background color of the solid color background;

[0012] determine a completely transparent region according to the color value of each pixel, the color value of the pure color background and the background tolerance threshold, and obtain the transparency of each first pixel in the completely transparent region;

[0013] determine a semi-transparent region according to the color value of each pixel, the background color, the edge tolerance threshold and the two-color tolerance threshold, and calculate the transparency of each second pixel in the semi-transparent region;

[0014] obtain the transparency data of the material image, the transparency data including the transparency of each first pixel and the transparency of each second pixel.

[0015] In an optional implementation, the step of determining a completely transparent region according to the color value of each pixel, the color value of the pure color background and the background tolerance threshold comprises:

[0016] calculate the absolute difference value between the color value of each pixel and the color value of the pure color background to obtain a first reference value corresponding to each pixel;

[0017] each pixel with a first reference value less than the background tolerance threshold is regarded as the first pixel, and a completely transparent region containing all first pixels is obtained.

[0018] In an optional implementation, the color value includes a color value corresponding to red, a color value corresponding to green and a color value corresponding to blue.

[0019] The step of determining a semi-transparent region according to the color value of each pixel, the background color, the edge tolerance threshold and the two-color tolerance threshold comprises:

[0020] obtain a target color value of each pixel, the target color value corresponding to a color identical to the background color;

[0021] for each pixel, calculate the absolute difference value between the target color value of the pixel and the other two color values, and calculate the sum of the two absolute difference values to obtain a second reference value corresponding to the pixel, thereby obtaining a second reference value corresponding to each pixel;

[0022] for each pixel, calculate the absolute difference value between the other two color values of the pixel to obtain a third reference value corresponding to the pixel, thereby obtaining a third reference value corresponding to each pixel;

[0023] each pixel with a second reference value greater than the edge tolerance threshold and a third reference value less than the two-color tolerance threshold is regarded as the second pixel, and a semi-transparent region containing all second pixels is obtained.

[0024] In an optional embodiment, the step of calculating the transparency of each second pixel point in the translucent region comprises:

[0025] obtaining a transparency recovery formula corresponding to the background color;

[0026] calculating the transparency of each second pixel point according to the transparency recovery formula corresponding to the background color and the color value of each second pixel point;

[0027] The transparency recovery formula corresponding to the background color is as follows:

[0028]

[0029] wherein a represents the transparency of the second pixel point; k t represents the target color value of the second pixel point; k1 and k2 represent the other two color values of the second pixel point.

[0030] In an optional embodiment, the step of recovering the transparent layer of the material image according to the transparency data comprises:

[0031] calculating a new color value of each first pixel point according to the color value and the transparency of each first pixel point;

[0032] For each second pixel point, calculating the average of the other two color values of the second pixel point, and taking the average as the new target color value of the second pixel point to obtain the new target color value of each second pixel point;

[0033] calculating a new color value of each second pixel point according to the new target color value, the other two color values and the transparency of each second pixel point;

[0034] recovering the transparent layer of the material image according to the new color value of each first pixel point and the new color value of each second pixel point.

[0035] In an optional embodiment, after the step of obtaining the transparency data of the material image according to the color data, the solid color background and the tolerance parameter, the method further comprises:

[0036] obtaining color data of a to-be-replaced image, the to-be-replaced image comprising a target background;

[0037] replacing the solid color background in the material image with the target background according to the color data of the to-be-replaced image, the color data and the transparency data of the material image, to obtain a target image comprising the target background and the foreground.

[0038] In a second aspect, the present application provides an image display device applied to a client, wherein the client stores a compressed material image and a corresponding tolerance parameter of the material image, and the device comprises:

[0039] an acquisition module, configured to acquire color data of the material image, wherein the material image comprises a foreground and a solid color background, and the solid color background represents a transparent layer of the material image before compression;

[0040] a calculation module, configured to obtain transparent data of the material image according to the color data of the material image, the solid color background and the tolerance parameter;

[0041] a display module, configured to recover the transparent layer of the material image according to the transparent data, obtain a to-be-displayed image comprising the transparent layer and the foreground, and display the to-be-displayed image.

[0042] In a third aspect, the present application provides an electronic device comprising a processor and a memory, wherein the memory stores a computer program, and the processor implements the method in any of the foregoing embodiments when executing the computer program.

[0043] In a fourth aspect, the present application provides a storage medium, wherein the storage medium stores a computer program, and the computer program implements the method in any of the foregoing embodiments when executed by a processor.

[0044] The image display method and device, the electronic device and the storage medium provided by the embodiments of the present application store the compressed material image and the corresponding tolerance parameter in the client, acquire the color data of the material image, the material image comprises a foreground and a solid color background, and the solid color background represents a transparent layer of the material image before compression, then obtain the transparent data of the material image according to the color data of the material image, the solid color background and the tolerance parameter, and recover the transparent layer of the material image according to the transparent data, obtain a to-be-displayed image comprising the transparent layer and the foreground, and display the to-be-displayed image. By storing the compressed material image and the corresponding tolerance parameter in the client, the occupied space of the material image is reduced, the storage space is saved, and the transparent display effect is achieved by recovering the transparent layer.

[0045] In order to make the above objectives, features and advantages of the present application more apparent, more comprehensible and more clear, the following will describe preferred embodiments of the present application in detail with reference to the accompanying drawings. BRIEF DESCRIPTION OF DRAWINGS

[0046] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the following will briefly introduce the drawings needed to be used in the embodiments. It should be understood that the following drawings only show some of the embodiments of the present application, and therefore should not be regarded as a limitation to the scope, and for those skilled in the art, other related drawings can also be obtained without creative labor.

[0047] Figure 1 A block diagram of an electronic device provided by an embodiment of the present application is shown;

[0048] Figure 2 An example diagram of an image display method provided by an embodiment of the present application is shown;

[0049] Figure 3 A flow diagram of an image display method provided by an embodiment of the present application is shown;

[0050] Figure 4 Another flow diagram of an image display method provided by an embodiment of the present application is shown;

[0051] Figure 5 Another flow diagram of an image display method provided by an embodiment of the present application is shown;

[0052] Figure 6 Another flow diagram of an image display method provided by an embodiment of the present application is shown;

[0053] Figure 7 Another example diagram of an image display method provided by an embodiment of the present application is shown;

[0054] Figure 8 Another example diagram of an image display method provided by an embodiment of the present application is shown;

[0055] Figure 9 Another example diagram of an image display method provided by an embodiment of the present application is shown;

[0056] Figure 10 Another example diagram of an image display method provided by an embodiment of the present application is shown;

[0057] Figure 11 Another example diagram of an image display method provided by an embodiment of the present application is shown;

[0058] Figure 12 Another example diagram of an image display method provided by an embodiment of the present application is shown;

[0059] Figure 13 Another example diagram of an image display method provided by an embodiment of the present application is shown;

[0060] Figure 14 Figure 6 shows another example of the image display method provided by the embodiment of the present application;

[0061] Figure 15 Figure 7 shows a functional module diagram of the image display device provided by the embodiment of the present application.

[0062] Icon: 100-electronic device; 110-bus; 120-processor; 130-memory; 150-I / O module; 170-communication interface; 300-image display device; 310-acquisition module; 330-computation module; 350-display module; 370-replacement module. DETAILED DESCRIPTION

[0063] The technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only some of the embodiments of the present application, but not all the embodiments. The components of the embodiments of the present application described and shown in the accompanying drawings can be arranged and designed in various different configurations.

[0064] Therefore, the detailed description of the embodiments of the present application provided in the accompanying drawings below is not intended to limit the scope of the claimed present application, but only represents selected embodiments of the present application. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without creative work are within the scope of protection of the present application.

[0065] It should be noted that the relational terms such as "first" and "second" and the like are used only to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply that there is any such actual relationship or order between these entities or operations. Moreover, the terms "comprise", "include" or any other variant thereof are intended to cover non-exclusive inclusion, so that a process, method, article or device that includes a list of elements not only includes those elements, but also includes other elements not explicitly listed, or further includes elements inherent in such a process, method, article or device. Without more limitations, the element defined by the statement "comprises a" does not exclude the presence of additional identical elements in the process, method, article or device that includes the element.

[0066] With the development of multimedia technology, watching video live through a client has become a way of public entertainment, and many material resources are stored in the client to support the beautification of the interactive interface. For example, a user can send a virtual gift to a host and display a gift special effect when watching live, and the material of the gift special effect is usually a PNG picture containing a transparent layer. Since the PNG format picture supports a transparent layer and has a low compression ratio, the picture occupies a large space, thereby increasing the space occupied by the client. Further, the embodiment of the present application provides an image display method to solve the above problems.

[0067] Please refer to Figure 1 is a block schematic diagram of an electronic device 100 provided by the embodiment of the present application. The electronic device 100 comprises a bus 110, a processor 120, a memory 130, an I / O module 150, and a communication interface 170.

[0068] The bus 110 can be a circuit for connecting the above-mentioned elements to each other and transmitting communication (for example, a control message) between the above-mentioned elements.

[0069] The processor 120 can receive a command from the above-mentioned other elements (for example, the memory 130, the I / O module 150, the communication interface 170, etc.) through the bus 110, can interpret the received command, and can perform calculation or data processing according to the interpreted command.

[0070] The processor 120 can be an integrated circuit chip with signal processing capability. The processor 120 can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a ready programmable gate array (FPGA) or other programmable logic device, a discrete gate or transistor logic device, a discrete hardware component.

[0071] The memory 130 can store a command or data received from the processor 120 or other elements (for example, the I / O module 150, the communication interface 170, etc.) or a command or data generated by the processor 120 or other elements.

[0072] The memory 130 may be, but is not limited to, random access memory (RAM), read-only memory (ROM), programmable read-only memory (PROM), erasable programmable read-only memory (EPROM), or electrically erasable programmable read-only memory (EEPROM).

[0073] The I / O module 150 can receive commands or data input by the user via input-output means (e.g., sensors, keyboard, touch screen, etc.), and can transmit the received commands or data to the processor 120 or memory 130 via the bus 110. It is also used to display various information received, stored, and processed from the aforementioned components (e.g., multimedia data, text data), and can display video, images, data, etc., to the user.

[0074] Communication interface 170 can be used to communicate with other node devices for signaling or data.

[0075] Understandable, Figure 1 The structure shown is only a schematic diagram of the electronic device 100. The electronic device 100 may also include components that are larger than... Figure 1 The more or fewer components shown, or having the same Figure 1 The different configurations shown. Figure 1 The components shown can be implemented using hardware, software, or a combination thereof.

[0076] It should be noted that the electronic device 100 has an application, or client, installed for watching live video streams. The client stores one or more compressed source images, as well as tolerance parameters for each source image. Source images refer to images obtained by compressing PNG images. It is understood that because JPEG format images have a wide color gamut, good compatibility, and high compression ratio, the source images in this embodiment of the invention are in JPEG format.

[0077] To better understand this invention, the process of compressing a PNG image into a JPEG source image is described below.

[0078] The PNG image has 32-bit color, that is, 8 bits of data for each of the RGB three primary color channels, and 8 bits of data for the Alpha transparent channel. The transparent layer of the PNG image can be replaced with a solid color background by using a picture editing tool such as Photoshop or by executing software code, so as to remove the data of the Alpha transparent channel and compress the PNG image into a 24-bit JPEG image (only the data of the RGB three primary color channels is retained), that is, a material image. As for the color selection of the solid color background, in order to ensure the display effect of the image, the color with the lowest frequency in the PNG image, that is, the color of the three primary colors, red, green and blue, can be selected as the color of the solid color background.

[0079] For the convenience of understanding, a set of comparison diagrams before and after image compression are provided by the embodiment of the present application, as shown in Figure 2 (a) is a PNG image before compression, which includes a foreground and a transparent layer, that is, a background with a transparent effect. In the PNG image, the frequency of blue is the lowest, so blue is selected as the color of the transparent layer, and the PNG image is compressed to obtain a JPEG material image as shown in Figure 2 (b).

[0080] It can be seen that, since the client in the embodiment of the present application stores the compressed material image, the occupied space of the material image can be reduced, and thus the occupied space of the client is reduced. However, since the compressed material image does not have the data of the Alpha transparent channel, the display effect of the transparent layer is lost, so the embodiment of the present application restores the transparent layer by using the material image and the corresponding tolerance parameter, so as to make the image have a transparent display effect.

[0081] The following describes each step in each method provided by the embodiment of the present application and the technical effects achieved by taking the above client as an execution subject.

[0082] Please refer to Figure 3 , Figure 3 which is a flowchart of an image display method provided by the embodiment of the present application.

[0083] In step S202, color data of a material image is acquired, the material image including a foreground and a solid color background; the solid color background representing a transparent layer before compression of the material image.

[0084] It can be understood that, since the original image, that is, the PNG image, includes a foreground and a transparent layer, and the material image is an image obtained by compressing the original image and replacing the transparent layer with a solid color, the material image includes a foreground and a solid color background, and the solid color background represents the transparent layer in the original image.

[0085] In the embodiment, the color data of the material image can be obtained by a shader, and the color data can be understood as data of RGB three primary color channels, i.e., data of a red channel, data of a green channel, and data of a blue channel.

[0086] In step S204, the transparent data of the material image is obtained according to the color data of the material image, the solid color background, and the tolerance parameter.

[0087] It can be understood that, since the compressed material image does not have data of an Alpha transparent channel, but retains data of RGB three primary color channels, i.e., color data, in the embodiment, the transparent data of the material image is obtained by a pre-set transparent layer recovery algorithm, and is calculated according to the color data of the material image, the solid color background, and the tolerance parameter.

[0088] The transparent data of the material image can be understood as transparency of the material image, since the solid color background in the material image represents a transparent layer and the foreground is opaque, the transparent data of the material image can also be understood as data for achieving a transparent effect of the solid color background.

[0089] In step S206, the transparent layer of the material image is recovered according to the transparent data, a to-be-displayed image containing the transparent layer and the foreground is obtained, and the to-be-displayed image is displayed.

[0090] In the embodiment, the transparent layer of the material image is recovered according to the obtained transparent data, i.e., the solid color background in the material image is recovered to a transparent layer having a transparent effect, i.e., a to-be-displayed image containing the transparent layer and the foreground is obtained and displayed, which can be understood as, by the method provided in the embodiment, the occupied space of the material image can be reduced, and the display effect is consistent with that of the original image.

[0091] It can be seen that, based on the above steps, by storing the compressed material image and the corresponding tolerance parameter in the client, color data of the material image is obtained, the material image includes a foreground and a solid color background, and the solid color background represents a transparent layer before compression of the material image; then, according to the color data of the material image, the solid color background, and the tolerance parameter, transparent data of the material image is obtained; and then, according to the transparent data, the transparent layer of the material image is recovered, a to-be-displayed image containing the transparent layer and the foreground is obtained, and the to-be-displayed image is displayed. By storing the compressed material image and the corresponding tolerance parameter in the client, the occupied space of the material image is reduced, the effect of saving storage space is achieved, and the transparent display effect is achieved by recovering the transparent layer.

[0092] Optionally, in the embodiment, the color data of the material image includes color values of each pixel, and the tolerance parameter includes a background tolerance threshold, an edge tolerance threshold and a two-color tolerance threshold. Furthermore, for the step S204, the embodiment provides a possible implementation, please refer to Figure 4 .

[0093] In step S204-1, the color value of the background color of the pure color background is obtained.

[0094] In the embodiment, the background color of the pure color background is one of red, green and blue; the color value of the background color, i.e. the color value of the pure color background, can be obtained by a shader.

[0095] In step S204-3, according to the color value of each pixel, the color value of the pure color background and the background tolerance threshold, a completely transparent region is determined, and the transparency of each first pixel in the completely transparent region is obtained.

[0096] In step S204-5, according to the color value of each pixel, the background color, the edge tolerance threshold and the two-color tolerance threshold, a semi-transparent region is determined, and the transparency of each second pixel in the semi-transparent region is calculated.

[0097] In step S204-7, the transparency data of the material image is obtained, which includes the transparency of each first pixel and the transparency of each second pixel.

[0098] It can be understood that the pure color background represents a transparent layer, and thus the pure color background region in the material image can be regarded as a transparent region in the original image. Therefore, whether a pixel is in the transparent region can be determined according to the closeness of the color value of the pixel to the color value of the pure color background.

[0099] However, only by this way, the obtained transparent region is not accurate, which further affects the display effect of the image. Because the material image includes a foreground and a pure color background, for the pixels at the border of the two, the color of the pixels is mixed, and the color values are superimposed, because the pixels are at the edge of the foreground and the edge of the pure color background. Therefore, it is impossible to accurately determine whether the pixels at the border belong to the transparent region by using only the foregoing method.

[0100] Therefore, the embodiment of the present application determines the completely transparent region and the semi-transparent region respectively by two ways to obtain the accurate transparent region. That is, the completely transparent region is determined according to the color value of each pixel point, the color value of the pure color background and the background tolerance threshold; and the semi-transparent region is determined according to the color value of each pixel point, the background color, the edge tolerance threshold and the two-color tolerance threshold; and the transparency of each first pixel point in the completely transparent region and the transparency of each second pixel point in the semi-transparent region are calculated respectively, that is, the transparent data of the material image is obtained.

[0101] It can be understood that the transparency of each pixel point in the completely transparent region, that is, the first pixel point, is the same, that is, all 0. Similarly, it can be known that since the foreground in the material image is opaque, the transparency of each pixel point in the foreground region, that is, the third pixel point, is the same, that is, all 1. And the transparency of each pixel point in the semi-transparent region, that is, the second pixel point, can be different, and the calculation method will be introduced in the subsequent embodiment.

[0102] Optionally, for the step of determining the completely transparent region in the step S204-3, the embodiment of the present application provides a possible implementation manner.

[0103] In step S204-3-1, the absolute difference value between the color value of each pixel point and the color value of the pure color background is calculated to obtain the first reference value corresponding to each pixel point.

[0104] In step S204-3-3, each pixel point with the first reference value less than the background tolerance threshold is regarded as the first pixel point to obtain the completely transparent region containing all the first pixel points.

[0105] It can be understood that the closer the color value of the pixel point to the color value of the pure color background, the more likely the pixel point belongs to the completely transparent region. Therefore, a condition can be set in advance, and whether the pixel point belongs to the completely transparent region is determined according to whether the closeness of the color value of the pixel point to the color value of the pure color background meets the preset condition. The preset condition can be set to be less than the background tolerance threshold.

[0106] In the embodiment, the absolute difference value between the color value of each pixel point and the color value of the pure color background can be calculated to obtain the first reference value corresponding to each pixel point. The first reference value can be understood as a numerical value for indicating the closeness of the color value of the pixel point to the color value of the pure color background.

[0107] Then each first reference value is compared with a background tolerance threshold value; if the first reference value is equal to or greater than the background tolerance threshold value, it means that the preset condition is not met; if the first reference value is less than the background tolerance threshold value, it means that the preset condition is met, and the pixel point corresponding to the first reference value is taken as a first pixel point; a region including all first pixel points is obtained, that is, a completely transparent region is obtained.

[0108] Optionally, for the step of determining the semi-transparent region in step S204-5, the embodiment of the present application provides a possible implementation manner.

[0109] In step S204-5-1, a target color value of each pixel point is obtained, and the color corresponding to the target color value is the same as the background color.

[0110] In step S204-5-3, for each pixel point, the absolute difference values of the target color value and the other two color values of the pixel point are respectively calculated, and the sum of the two absolute difference values is calculated to obtain a second reference value corresponding to the pixel point, thereby obtaining the second reference value corresponding to each pixel point.

[0111] In step S204-5-5, for each pixel point, the absolute difference values of the other two color values of the pixel point are calculated to obtain a third reference value corresponding to the pixel point, thereby obtaining the third reference value corresponding to each pixel point.

[0112] In step S204-5-7, each pixel point with a second reference value greater than an edge tolerance threshold value and a third reference value less than a two-color tolerance threshold value is taken as a second pixel point, thereby obtaining a semi-transparent region including all second pixel points.

[0113] It can be understood that the color value of each pixel point includes a color value corresponding to red, that is, a value of an R channel, a color value corresponding to green, that is, a value of a G channel, and a color value corresponding to blue, that is, a value of a B channel. The color value of the solid color background also includes the three color values, and the color value corresponding to the background color is 1, and the color values corresponding to the other two colors are both 0. That is, the color value is between 0 and 1.

[0114] For example, the color of the solid color background is blue, and the color value corresponding to blue is 1, and the color values corresponding to red and green are both 0. It can be understood that the size of the color value can reflect the amount of the color component. Therefore, the embodiment of the present application determines whether the pixel point belongs to the semi-transparent region through the color values of the pixel point.

[0115] In the embodiment, since the processing manner of each pixel point is similar, the above steps will be described below by taking one pixel point as an example.

[0116] Assuming the color of the solid color background is blue, the color value corresponding to the blue color in the pixel point is taken as the target pixel value; then the absolute difference between the target color value of the pixel point and the other two color values is calculated, that is, the absolute difference between the target color value and the color value corresponding to the red color, and the absolute difference between the target color value and the color value corresponding to the green color are calculated, to obtain two absolute differences, and then the sum of the two absolute differences is calculated, that is, the second reference value corresponding to the pixel point is obtained; and the absolute difference between the color value corresponding to the red color and the color value corresponding to the green color of the pixel point is calculated, that is, the third reference value corresponding to the pixel point is obtained.

[0117] If the second reference value of the pixel point is greater than the edge tolerance threshold and the third reference value corresponding to the pixel point is less than the two-color tolerance threshold, the pixel point is taken as the second pixel point, that is, it is determined that the pixel point belongs to the semi-transparent region.

[0118] It can be understood that for these pixel points at the joint part of the foreground and the solid color background, they are at the joint part of the foreground and the transparent layer in the original image, that is, in a semi-transparent state. After replacing the transparent layer in the original image with a solid blue background, the pixel points are mixed with blue, so the color of the pixel points in the material image is overall blue.

[0119] Therefore, if the second reference value of the pixel point is greater than the edge tolerance threshold, that is, the color value corresponding to the blue color is much greater than the color values corresponding to the other two colors, and the third reference value corresponding to the pixel point is less than the two-color tolerance threshold, that is, the color value corresponding to the red color and the color value corresponding to the green color of the pixel point are relatively close, it is indicated that the blue component of the pixel point is more than the other two colors, that is, the overall color is blue, and it is further determined that the pixel point belongs to the semi-transparent region.

[0120] Each pixel point is judged in the above manner to obtain each second pixel point, and a region including all the second pixel points is obtained, that is, the semi-transparent region is obtained.

[0121] Optionally, for the step of calculating the transparency of each second pixel point in the semi-transparent region in the step S204-5, the embodiment of the present application provides a possible implementation manner.

[0122] Step S204-5-11, obtaining a transparency recovery formula corresponding to the background color;

[0123] Step S204-5-13, calculating the transparency of each second pixel point according to the transparency recovery formula corresponding to the background color and the color value of each second pixel point;

[0124] The transparency recovery formula corresponding to the background color is as follows:

[0125]

[0126] wherein a represents the transparency of the second pixel point; k t represents the target color value of the second pixel point; k1 and k2 represent other two color values of the second pixel point.

[0127] In the embodiment, the client also stores the transparency recovery formulae of the three primary colors, i.e., the transparency recovery formula corresponding to red, the transparency recovery formula corresponding to green and the transparency recovery formula corresponding to blue. The transparency recovery formula corresponding to the background color can be obtained according to the background color, and the transparency of each second pixel point can be calculated in combination with the color values of each second pixel point, i.e., the color value corresponding to red, the color value corresponding to green and the color value corresponding to blue.

[0128] For example, the background color is red, and the transparency recovery formula corresponding to red is obtained, which can be represented as:

[0129]

[0130] wherein a represents the transparency of the second pixel point; k r represents the color value corresponding to red of the second pixel point; k g represents the color value corresponding to green of the second pixel point; k b represents the color value corresponding to blue of the second pixel point.

[0131] For example, the background color is green, and the transparency recovery formula corresponding to green is obtained, which can be represented as:

[0132]

[0133] wherein a represents the transparency of the second pixel point; k g represents the color value corresponding to green of the second pixel point; k r represents the color value corresponding to red of the second pixel point; k b represents the color value corresponding to blue of the second pixel point.

[0134] For example, the background color is blue, and the transparency recovery formula corresponding to blue is obtained, which can be represented as:

[0135]

[0136] wherein a represents the transparency of the second pixel point; k b represents the color value corresponding to blue of the second pixel point; k r represents the color value corresponding to red of the second pixel point; k g represents the color value corresponding to green of the second pixel point.

[0137] Optionally, for the step of recovering the transparent layer of the material image according to the transparent data in step S206, the embodiment of the present application provides a possible implementation manner, please refer to Figure 5 .

[0138] Step S206-1, calculating a new color value of each first pixel point according to the color value and the transparency of each first pixel point;

[0139] Step S206-3, for each second pixel point, calculating an average value of the other two color values of the second pixel point, and taking the average value as a new target color value of the second pixel point, to obtain a new target color value of each second pixel point;

[0140] Step S206-5, calculating a new color value of each second pixel point according to the new target color value, the other two color values and the transparency of each second pixel point;

[0141] Step S206-7, recovering the transparent layer of the material image according to the new color value of each first pixel point and the new color value of each second pixel point.

[0142] In the embodiment, the new color value of each pixel point in the transparent region can be calculated according to the transparency and the color value of each pixel point in the obtained transparent region, to recover the transparent layer of the material image. The transparent region includes a completely transparent region and a semi-transparent region, and then the new color value of each first pixel point in the completely transparent region and the new color value of each second pixel point in the semi-transparent region are calculated respectively.

[0143] For each first pixel point, the transparency is the same, and then the new color value of each first pixel point can be calculated based on the color value and the transparency of each first pixel point.

[0144] For each second pixel point, since it is in the semi-transparent region, the color in the material image is mixed, and in order to ensure the display effect of the image, a new target color value needs to be calculated to obtain a new color value. The average value of the other two color values of the second pixel point can be taken as the new target color value.

[0145] For example, the background color is blue, and then the average value of the color value corresponding to the red color and the color value corresponding to the green color of the second pixel point is calculated, and the average value is taken as the color value corresponding to the blue color of the second pixel point, that is, the new target color value is obtained. In a similar manner, the new target color value of each second pixel point can be obtained. Then the new color value of each second pixel point is calculated according to the new target color value, the other two color values and the transparency of each second pixel point. Finally, the transparent layer of the material image is recovered according to the new color value of each first pixel point and the new color value of each second pixel point.

[0146] Optionally, after the step S204, the embodiment of the present application provides a possible implementation manner, please refer to Figure 6 .

[0147] In step S208, color data of the image to be replaced is obtained, the image to be replaced including the target background;

[0148] In step S210, the solid color background in the material image is replaced by the target background according to the color data of the image to be replaced, the color data of the material image and the transparent data, so as to obtain the target image including the target background and the foreground.

[0149] In the embodiment, after the transparent data of the material image is obtained, the background replacement can be performed on the material image. That is, the image to be replaced including the target background and the color data thereof are obtained, and the solid color background in the material image is replaced by the target background according to the color data of the image to be replaced, the color data of the material image and the transparent data, so as to obtain the target image including the target background and the foreground.

[0150] It can be understood that the color data of the image to be replaced includes the color value of each pixel point in the image to be replaced, and the pixel points in the image to be replaced correspond to the pixel points in the material image one by one. Based on the color data of the image to be replaced, the color data of the material image and the transparent data, the process of obtaining the target image can be expressed by a formula as follows:

[0151]

[0152] Wherein, represents the color value of the i th pixel point in the target image; represents the color value of the i th pixel point in the material image; represents the color value of the i th pixel point in the image to be replaced; a i represents the transparency of the i th pixel point in the material image.

[0153] In the material image, for the first pixel point belonging to the completely transparent region, the transparency is 0; for the second pixel point belonging to the semi-transparent region, the transparency can be calculated according to the transparency recovery formula; for the third pixel point belonging to the foreground region, the transparency is 1.

[0154] In order to facilitate understanding, the embodiment of the present application provides several example images to illustrate the effect of the present application, please refer to Figures 7 to 9 . For details, please refer to the substantive examination reference materials submitted by the inventor. As Figure 7 shown is the compressed material image, which includes the foreground and the blue solid color background.

[0155] If the transparent area is determined solely based on the color values ​​of individual pixels and the color values ​​of a solid-color background to obtain transparency data, and then the background of the source image is replaced based on this transparency data and an image containing the target background, the result can be as follows: Figure 8 The target image shown is currently in poor display quality because the boundary between the foreground and the target background is quite abrupt, with a noticeable blue boundary line indicating an "edge effect."

[0156] If, according to the method provided in the embodiments of the present invention, fully transparent areas and semi-transparent areas are determined to obtain transparent data, and based on this transparent data and an image containing the target background, the background of the source image is replaced, the following can be obtained: Figure 9 The target image shown demonstrates that the boundary between the foreground and background is smoother and more natural, resulting in a better overall display.

[0157] Optionally, the client can store the tolerance parameters corresponding to the source image in a JSON file, which also stores the color code of the source image's background color. The following is an example of the content of a JSON file provided in an embodiment of the present invention.

[0158] {"Background":#"0000FF",

[0159] "ToleranceBack": 0.300,

[0160] "ToleranceEdge1":0.12,

[0161] "ToleranceEdge2": 0.300

[0162] }

[0163] Wherein, Background represents the color code of the background color of the source image; ToleranceBack represents the background tolerance threshold; ToleranceEdge1 represents the edge tolerance threshold; and ToleranceEdge2 represents the two-color tolerance threshold.

[0164] Optionally, embodiments of the present invention also provide a transparency layer configuration generation tool to obtain tolerance parameters for the source image. For example... Figure 10 The image shown is an example of the interface of the transparency layer configuration generation tool provided in an embodiment of the present invention. This interface includes an image selection area, an image display area, and a parameter adjustment area.

[0165] The selection resource control in the image selection area can be used to select the material image to be processed, and the material image is displayed in the image display area, and the background color and its color number of the material image are displayed in the image selection area. The tolerance parameters, i.e., the background tolerance threshold, the edge tolerance threshold and the two-color tolerance threshold, can be adjusted in the parameter adjustment area. Based on the adjusted tolerance parameters and the method provided in the embodiments of the present application, the transparent layer of the material image can be restored and displayed in the image display area, so that the display effect of the image can be seen in real time. Alternatively, the adding background control in the image selection area can be used to select the image to be replaced containing the target background, and the method provided in the embodiments of the present application can be used to replace the background of the material image, so that the restoration effect of the transparent layer can be seen intuitively.

[0166] It can be understood that the setting of the tolerance parameters is crucial for restoring the transparent effect of the image, and therefore, in order to better understand the present application, the following will be described in combination with Figures 11 to 14 The specific description can be referred to the substantive examination reference materials submitted by the inventor.

[0167] As shown in Figure 11 , it is the compressed material image, which includes the foreground, i.e., the red flowers and green leaves, and the blue pure color background. It is assumed that the tolerance parameters are the default values, i.e., the background tolerance threshold is 0, the edge tolerance threshold is 1 and the two-color tolerance threshold is 0. After adjusting the tolerance parameters, the background tolerance threshold is 0.1, the edge tolerance threshold is 1 and the two-color tolerance threshold is 0, and the method provided in the embodiments of the present application is executed according to the adjusted tolerance parameters, the target image as shown in Figure 12 can be obtained after the background replacement of the material image. It can be seen that there is a clear blue boundary line in the joint part of the foreground and the background in the target image, i.e., the "edge effect" occurs, i.e., the display effect of the image is poor under the tolerance parameters.

[0168] Then the tolerance parameters are further adjusted, the background tolerance threshold is adjusted to 0.6, the edge tolerance threshold and the two-color tolerance threshold are the default values, i.e., 1 and 0, and the method provided in the embodiments of the present application is executed according to the adjusted tolerance parameters, the target image as shown in Figure 13 can be obtained after the background replacement of the material image. It can be seen that although there is no blue boundary line in the joint part of the foreground and the background in the target image, part of the green leaves in the foreground is broken. This is because the background tolerance threshold is too large, which causes the "ablation" phenomenon of the image, i.e., the display effect of the image is poor under the tolerance parameters.

[0169] The tolerance parameters are adjusted again, the background tolerance threshold is adjusted to 0.3, the edge tolerance threshold is adjusted to 0.12, and the two-color tolerance threshold is adjusted to 0.3, and the method provided in the embodiments of the present application is executed according to the adjusted tolerance parameters, the target image as shown inFigure 14 It can be seen that there is no blue boundary line in the junction part of the foreground and the background in the target image, and the complete foreground is reserved. That is, the image has a good display effect under the tolerance parameter, and the tolerance parameter, i.e., the background tolerance threshold 0.3, the edge tolerance threshold 0.12, and the two-color tolerance threshold 0.3, is taken as the tolerance parameter corresponding to the material image.

[0170] In order to perform the corresponding steps in the above-mentioned embodiments and various possible manners, an implementation manner of an image display device is given below. Please refer to Figure 15 , Figure 15 A functional module diagram of an image display device 300 provided by an embodiment of the present application is shown. It should be noted that the basic principle and the generated technical effects of the image display device 300 provided by the present embodiment are the same as those of the above-mentioned embodiments, and for brief description, the part not mentioned in the present embodiment can be referred to the corresponding content in the above-mentioned embodiments. The image display device 300 comprises:

[0171] The acquisition module 310 is configured to acquire color data of a material image, the material image comprising a foreground and a solid-color background; the solid-color background representing a transparent layer before compression of the material image.

[0172] The calculation module 330 is configured to obtain transparent data of the material image according to the color data of the material image, the solid-color background, and the tolerance parameter.

[0173] The display module 350 is configured to recover the transparent layer of the material image according to the transparent data, to obtain a to-be-displayed image comprising the transparent layer and the foreground, and to display the to-be-displayed image.

[0174] Optionally, the calculation module 330 is further configured to: acquire a color value of the solid-color background and a background color; determine a completely transparent region according to the color value of each pixel point, the color value of the solid-color background, and a background tolerance threshold, and obtain the transparency of each first pixel point in the completely transparent region; determine a semi-transparent region according to the color value of each pixel point, the background color, an edge tolerance threshold, and a two-color tolerance threshold, and calculate the transparency of each second pixel point in the semi-transparent region; and obtain the transparent data of the material image, the transparent data comprising the transparency of each first pixel point and the transparency of each second pixel point.

[0175] Optionally, the calculation module 330 is further configured to: calculate an absolute difference value between the color value of each pixel point and the color value of the solid-color background to obtain a first reference value corresponding to each pixel point; and take each pixel point with the first reference value less than the background tolerance threshold as a first pixel point to obtain the completely transparent region comprising all the first pixel points.

[0176] Optionally, the calculation module 330 is further configured to: obtain a target color value of each pixel point, the color corresponding to the target color value being the same as the background color; for each pixel point, calculate absolute difference values of the target color value and the other two color values of the pixel point respectively, and obtain a second reference value corresponding to the pixel point by calculating a sum of the two absolute difference values, to obtain the second reference value corresponding to each pixel point; for each pixel point, obtain a third reference value corresponding to the pixel point by calculating an absolute difference value of the other two color values of the pixel point, to obtain the third reference value corresponding to each pixel point; regard each pixel point whose second reference value is greater than an edge tolerance threshold and whose third reference value is less than a two-color tolerance threshold as a second pixel point, to obtain a semi-transparent region containing all the second pixel points.

[0177] Optionally, the calculation module 330 is further configured to: obtain a transparency recovery formula corresponding to the background color; and calculate a transparency of each second pixel point according to the transparency recovery formula corresponding to the background color and the color value of each second pixel point.

[0178] The transparency recovery formula corresponding to the background color is as follows:

[0179]

[0180] wherein a represents the transparency of the second pixel point; k t k1 and k2 represent the other two color values of the second pixel point.

[0181] Optionally, the display module 350 is further configured to: calculate a new color value of each first pixel point according to the color value and the transparency of each first pixel point; for each second pixel point, calculate an average value of the other two color values of the second pixel point, and regard the average value as a new target color value of the second pixel point, to obtain the new target color value of each second pixel point; calculate a new color value of each second pixel point according to the new target color value, the other two color values and the transparency of each second pixel point; and recover the transparent layer of the material image according to the new color value of each first pixel point and the new color value of each second pixel point.

[0182] Optionally, the image display device 300 further comprises a replacement module 370 configured to: obtain color data of a to-be-replaced image, the to-be-replaced image comprising a target background; and replace a solid color background in the material image with the target background according to the color data of the to-be-replaced image, the color data of the material image and the transparency data, to obtain a target image containing the target background and a foreground.

[0183] The embodiment of the present application further provides an electronic device comprising a processor 120 and a memory 130, the memory 130 storing a computer program, and the processor 120 implements the image display method disclosed in the above embodiment when executing the computer program.

[0184] The embodiment of the present application further provides a storage medium, which stores a computer program, and the computer program is executed by the processor 120 to realize the image display method disclosed by the embodiment of the present application.

[0185] In several embodiments provided by the present application, it should be understood that the disclosed apparatus and method can also be implemented by other manners. The apparatus embodiments described above are merely schematic, for example, the flow charts and block diagrams in the drawings show the possible implementation architecture, function and operation of the apparatus, method and computer program product according to the embodiments of the present application. In this regard, each block in the flow chart or block diagram can represent a module, a program segment or a part of code, which contains one or more executable instructions for implementing the specified logic function. It should also be noted that in some alternative implementation manners, the functions noted in the blocks can also occur in different order from that noted in the drawings. For example, two continuous blocks can actually be executed substantially in parallel, and they can also be executed in reverse order in some cases, depending on the functions involved. It should also be noted that each block in the block diagram and / or flow chart, and the combination of blocks in the block diagram and / or flow chart, can be implemented by a dedicated hardware-based system for implementing the specified function or action, or can be implemented by a combination of special-purpose hardware and computer instructions.

[0186] In addition, each functional module in the embodiments of the present application can be integrated together to form a separate part, or each module can exist independently, or two or more modules can be integrated to form a separate part.

[0187] If the functions are implemented in the form of software function modules and sold or used as independent products, they can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application essentially or the part that contributes to the prior art or the part of the technical solutions can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a number of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in the embodiments of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various media that can store program codes.

[0188] The above merely provides the preferred embodiments of the present application, and is not used to limit the present application. For those skilled in the art, the present application can have various modifications and changes. Any modifications, equivalent replacements, improvements, etc. made within the principles and technical scope of the present application shall fall into the scope of the present application.

Claims

1. An image display method characterized by, Applied to a client, the client stores compressed source images and their corresponding tolerance parameters, the tolerance parameters including background tolerance threshold, edge tolerance threshold, and two-color tolerance threshold, the method comprising: The color data of the source image is obtained, the source image includes a foreground and a solid color background; the solid color background represents the transparent layer of the source image before compression; the color data of the source image includes the color value of each pixel; Obtain the color value and background color of the solid color background; Based on the color value of each pixel, the color value of the solid color background, and the background tolerance threshold, the completely transparent area of ​​the source image is determined, and the transparency of each first pixel in the completely transparent area is obtained; Based on the color value of each pixel, the background color, the edge tolerance threshold, and the two-color tolerance threshold, the semi-transparent area of ​​the source image is determined, and the transparency of each second pixel in the semi-transparent area is calculated. Obtain the color data of the image to be replaced, wherein the image to be replaced includes the target background; Based on the color data of the image to be replaced, the color value of each pixel in the source image, the transparency of each first pixel in the fully transparent area and the transparency of each second pixel in the semi-transparent area of ​​the source image, the solid color background in the source image is replaced with the target background to obtain a target image containing the target background and the foreground; Based on the transparency of each first pixel in the fully transparent area and the transparency of each second pixel in the semi-transparent area of ​​the source image, the transparent layer of the source image is recovered, and an image to be displayed, including the transparent layer and the foreground, is obtained and displayed.

2. The method of claim 1, wherein, The step of determining the completely transparent area of ​​the source image based on the color value of each pixel, the color value of the solid color background, and the background tolerance threshold includes: Calculate the absolute difference between the color value of each pixel and the color value of the solid color background to obtain the first reference value corresponding to each pixel; Each pixel whose first reference value is less than the background tolerance threshold is taken as the first pixel, resulting in a completely transparent region containing all the first pixels.

3. The method of claim 1, wherein, The color values ​​include the color values ​​corresponding to red, green, and blue; The step of determining the semi-transparent area of ​​the source image based on the color value of each pixel, the background color, the edge tolerance threshold, and the two-color tolerance threshold includes: Obtain the target color value for each pixel, wherein the color corresponding to the target color value is the same as the background color; For each pixel, the absolute difference between the target color value of the pixel and the other two color values ​​is calculated, and the sum of the two absolute differences is calculated to obtain the second reference value corresponding to the pixel, thus obtaining the second reference value corresponding to each pixel; For each pixel, the absolute difference between the other two color values ​​of the pixel is calculated to obtain the third reference value corresponding to the pixel, thus obtaining the third reference value corresponding to each pixel. Each pixel whose second reference value is greater than the edge tolerance threshold and whose third reference value is less than the two-color tolerance threshold is taken as the second pixel, thus obtaining a semi-transparent area containing all the second pixels.

4. The method of claim 3, wherein, The step of calculating the transparency of each second pixel in the semi-transparent region includes: Obtain the transparency restoration formula corresponding to the background color; The transparency of each second pixel is calculated based on the transparency recovery formula corresponding to the background color and the color value of each second pixel. The formula for restoring the transparency of the background color is as follows: ； in, This indicates the transparency of the second pixel; This represents the target color value of the second pixel. and These represent the other two color values ​​of the second pixel.

5. The method according to claim 3, characterized in that, The step of restoring the transparency layer of the source image based on the transparency of each first pixel in the fully transparent region and the transparency of each second pixel in the semi-transparent region includes: Calculate a new color value for each of the first pixels based on the color value and transparency of each first pixel; For each second pixel, calculate the average of the other two color values ​​of the second pixel, and use the average as the new target color value of the second pixel to obtain the new target color value of each second pixel; Calculate the new color value for each second pixel based on the new target color value, the other two color values, and the transparency. The transparency layer of the source image is recovered based on the new color value of each first pixel and the new color value of each second pixel.

6. An image display device, characterized in that, Applied to a client, the client stores compressed source images and their corresponding tolerance parameters, the tolerance parameters including background tolerance threshold, edge tolerance threshold, and two-color tolerance threshold; the device includes: The acquisition module is used to acquire the color data of the source image, which includes a foreground and a solid color background; the solid color background represents the transparent layer of the source image before compression; the color data of the source image includes the color value of each pixel. The calculation module is used to obtain the color value of the solid color background and the background color; determine the completely transparent area of ​​the material image based on the color value of each pixel, the color value of the solid color background and the background tolerance threshold, and obtain the transparency of each first pixel in the completely transparent area; determine the semi-transparent area of ​​the material image based on the color value of each pixel, the background color, the edge tolerance threshold and the two-color tolerance threshold, and calculate the transparency of each second pixel in the semi-transparent area; The replacement module is used to acquire the color data of the image to be replaced, the image to be replaced including a target background; based on the color data of the image to be replaced, the color of each pixel of the source image, the transparency of each first pixel in the fully transparent area and the transparency of each second pixel in the semi-transparent area of ​​the source image, the solid color background in the source image is replaced with the target background to obtain a target image containing the target background and the foreground; The display module is used to recover the transparent layer of the material image based on the transparency of each first pixel in the fully transparent area and the transparency of each second pixel in the semi-transparent area, to obtain an image to be displayed containing the transparent layer and the foreground, and to display it.

7. An electronic device, characterized in that, It includes a processor and a memory, the memory storing a computer program, and the processor, when executing the computer program, implements the method of any one of claims 1 to 5.

8. A storage medium, characterized in that, The storage medium stores a computer program, which, when executed by a processor, implements the method of any one of claims 1 to 5.

Images