Page display method and device, electronic equipment and storage medium

Abstract

The embodiment of the invention provides a page display method and device, electronic equipment and a storage medium. The method comprises the following steps: receiving a display operation for a preset page; in response to the display operation, a preset page is displayed, a background picture is displayed in a background region of the preset page, a preset foreground object is displayed in a foreground region of the preset page, the background region comprises a first sub-region and a second sub-region, the background picture displayed in the first sub-region is a gradually-changed picture, and the background picture displayed in the second sub-region is a gradually-changed picture. A gradient color corresponding to the gradient picture is associated with a main color of a first picture region in a preset picture and a preset display color of the preset foreground object, and a background picture displayed in the second sub-region is an original picture of a second picture region in the preset picture. According to the embodiment of the invention, by adopting the technical scheme, the coordination between the adjusted background picture and the original picture in the preset picture can be improved.

Description

Technical Field

[0001] The embodiments of the present disclosure relate to the field of computer technology, and in particular, to a page display method, device, electronic device, and storage medium. Background Art

[0002] At present, in some applications, the background image in some areas of the background image is adjusted to ensure that the foreground object located on the upper layer of the background image can be clearly displayed. However, the adjusted background image is not coordinated with the original image in the background image, resulting in poor overall display effect of the background image. Summary of the invention

[0003] The embodiments of the present disclosure provide a page display method, device, electronic device and storage medium to improve the coordination between an adjusted background picture and an original picture in a background image.

[0004] In a first aspect, an embodiment of the present disclosure provides a page display method, including:

[0005] Receive a display operation for a preset page;

[0006] In response to the display operation, a preset page is displayed, a background picture is displayed in the background area of ​​the preset page, and a preset foreground object is displayed in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0007] In a second aspect, the present disclosure also provides a page display device, including:

[0008] An operation receiving module, used for receiving a display operation for a preset page;

[0009] A page display module is used to display a preset page in response to the display operation, display a background picture in the background area of ​​the preset page, and display a preset foreground object in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0010] In a third aspect, an embodiment of the present disclosure further provides an electronic device, including:

[0011] one or more processors;

[0012] a memory for storing one or more programs,

[0013] When the one or more programs are executed by the one or more processors, the one or more processors implement the page display method as described in the embodiment of the present disclosure.

[0014] In a fourth aspect, an embodiment of the present disclosure further provides a computer-readable storage medium on which a computer program is stored, and when the program is executed by a processor, the page display method as described in the embodiment of the present disclosure is implemented.

[0015] The page display method, device, electronic device and storage medium provided by the embodiment of the present disclosure receive a display operation for a preset page; in response to the display operation, display the preset page, display a background picture in the background area of ​​the preset page, and display a preset foreground object in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second area is the original picture of the second picture area in the preset picture. The embodiment of the present disclosure adopts the above-mentioned technical solution to determine the gradient color used for adjusting the background picture according to the main color in a picture area of ​​the preset picture, so as to avoid the situation where the color change of the adjusted background picture and the original picture in the preset picture is too abrupt, improve the coordination between the adjusted background picture and the original picture in the preset picture, and thus improve the overall display effect of the background picture in the background area. BRIEF DESCRIPTION OF THE DRAWINGS

[0016] The above and other features, advantages and aspects of the embodiments of the present disclosure will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. Throughout the accompanying drawings, the same or similar reference numerals represent the same or similar elements. It should be understood that the drawings are schematic and the originals and elements are not necessarily drawn to scale.

[0017] Figure 1 A flowchart of a page display method provided by an embodiment of the present disclosure;

[0018] Figure 2 A display intention of a preset page provided in an embodiment of the present disclosure;

[0019] Figure 3 A flowchart of another page display method provided by an embodiment of the present disclosure;

[0020] Figure 4 A schematic diagram of a preset picture provided in an embodiment of the present disclosure;

[0021] Figure 5 A structural block diagram of a page display device provided in an embodiment of the present disclosure;

[0022] Figure 6 A schematic diagram of the structure of an electronic device provided in an embodiment of the present disclosure. DETAILED DESCRIPTION

[0023] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as being limited to the embodiments described herein, which are instead provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes and are not intended to limit the scope of protection of the present disclosure.

[0024] It should be understood that the various steps described in the method embodiments of the present disclosure may be performed in different orders and / or in parallel. In addition, the method embodiments may include additional steps and / or omit the steps shown. The scope of the present disclosure is not limited in this respect.

[0025] The term "including" and its variations used herein are open inclusions, i.e., "including but not limited to". The term "based on" means "based at least in part on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". The relevant definitions of other terms will be given in the following description.

[0026] It should be noted that the concepts such as "first" and "second" mentioned in the present disclosure are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0027] It should be noted that the modifications of "one" and "plurality" mentioned in the present disclosure are illustrative rather than restrictive, and those skilled in the art should understand that unless otherwise clearly indicated in the context, it should be understood as "one or more".

[0028] The names of the messages or information exchanged between multiple devices in the embodiments of the present disclosure are only used for illustrative purposes and are not used to limit the scope of these messages or information.

[0029] It is understandable that before using the technical solutions disclosed in the embodiments of the present disclosure, the types, scope of use, usage scenarios, etc. of the personal information involved in the present disclosure should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with relevant laws and regulations.

[0030] For example, in response to receiving an active request from a user, a prompt message is sent to the user to clearly prompt the user that the operation requested to be performed will require obtaining and using the user's personal information. Thus, the user can autonomously choose whether to provide personal information to software or hardware such as an electronic device, application, server, or storage medium that performs the operation of the technical solution of the present disclosure according to the prompt message.

[0031] As an optional but non-limiting implementation, in response to receiving an active request from the user, the prompt information may be sent to the user in the form of a pop-up window, in which the prompt information may be presented in text form. In addition, the pop-up window may also carry a selection control for the user to choose "agree" or "disagree" to provide personal information to the electronic device.

[0032] It is understandable that the above notification and the process of obtaining user authorization are merely illustrative and do not constitute a limitation on the implementation of the present disclosure. Other methods that meet the relevant laws and regulations may also be applied to the implementation of the present disclosure.

[0033] Figure 1 A flow chart of a page display method provided by an embodiment of the present disclosure. The method can be executed by a page display device, wherein the device can be implemented by software and / or hardware, and can be configured in an electronic device, typically, in a mobile phone or a tablet computer. The page display method provided by an embodiment of the present disclosure is applicable to a scene in which a background image and a foreground object are displayed in a page, such as a scene in which a background image is displayed in a page, and a preset foreground object is displayed on an upper layer of the background image.

[0034] In some applications, users are supported to set preset pictures. However, since the color of the preset pictures set by users is not fixed, if the foreground object is displayed directly on top of the preset pictures using the preset display color of the foreground object, the foreground object may not be displayed clearly. Therefore, the prior art generally adjusts the background image in the overlapping area with the foreground object so that the foreground object can be displayed clearly.

[0035] However, the background picture adjustment method in the prior art has the problem that the adjusted background picture is not coordinated with the original picture in the preset picture, for example, the picture of the preset picture is dark as a whole, but the adjusted background picture is brighter; the picture of the preset picture is darker as a whole, but the adjusted background picture is lighter; or, the preset picture has low saturation and low brightness as a whole, but the saturation and / or brightness of the adjusted background picture is too high, and so on.

[0036] Therefore, this embodiment provides a page display method to solve at least one of the above technical problems existing in the prior art and improve the coordination between the adjusted background image and the original image in the preset picture.

[0037] like Figure 1 As shown, the page display method provided in this embodiment may include:

[0038] S101: Receive a display operation for a preset page.

[0039] The preset page may be an object including a background image, such as a page that supports users to set preset images and has a foreground object to be displayed in the display area of ​​the preset image. The following takes the preset page as an example of a personal page. The display operation may be an operation for indicating displaying the preset page, such as an operation for switching from other pages to the preset page.

[0040] In this embodiment, the current user can instruct the current application to display the preset page by performing a display operation on the preset page, and accordingly, the current application can receive the display operation performed by the current user.

[0041] S102. In response to the display operation, a preset page is displayed, a background picture is displayed in a background area of ​​the preset page, and a preset foreground object is displayed in a foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, a gradient color corresponding to the gradient picture is associated with a primary color of a first picture area in a preset picture and a preset display color of the preset foreground object, and the background picture displayed in the second sub-area is an original picture of a second picture area in the preset picture.

[0042] The background area can be considered as an area in a preset page for displaying a background image, in other words, the area where the background image is displayed. The background area can include a first sub-area and a second sub-area. The first sub-area can be an associated sub-area of ​​the foreground area in the background area, that is, a sub-area in the background area associated with the foreground area, such as a sub-area in which a preset foreground object needs to be displayed in its upper layer. The second sub-area can be considered as a sub-area in the background area except the first sub-area.

[0043] In addition, the background area may also include a third sub-area, which can be considered as the display area corresponding to the first image area in the background area, and the first sub-area may be located within the third sub-area, that is, the gradient color of the gradient picture displayed in the first sub-area can be determined based on the main color in the third sub-area of ​​the preset image containing the first sub-area. At this time, optionally, the first sub-area is located within the third sub-area of ​​the background area, and the third sub-area is the display area corresponding to the first image area in the background area.

[0044] The background picture displayed in the first sub-area is a gradient picture, such as a picture that gradually changes from an original picture in the preset picture to a picture of the main color of the first picture area in the preset picture. The original picture may be, for example, an original picture located in the first sub-area when the preset picture is displayed in the background area. Exemplarily, the background picture displayed in the first sub-area may be a picture formed by superimposing the original picture of the corresponding picture area in the preset picture with a gradient mask filled with the above-mentioned gradient color.

[0045] The background picture displayed in the second sub-area may be an original picture in a corresponding picture area in the preset picture, such as an original picture in a second picture area in the preset picture.

[0046] The preset foreground object may be a foreground object to be displayed in a preset page, such as a foreground object whose at least part of the content is displayed in the background area. The foreground area may be considered as the area where the preset foreground object is displayed in the preset page. There may be an overlapping area between the foreground area and the background area in the preset page. Optionally, there is an overlapping area between the background area and the foreground area, and the overlapping area is located within the first sub-area. In other words, the first sub-area may be a sub-area in the background area that contains an overlapping area with the foreground area.

[0047] The preset picture can be an original picture that needs to be displayed as a background in the background area. The original picture can be set by the user corresponding to the preset page. For example, when the preset page is a personal page of a user, the preset picture can be selected and / or uploaded by the user. The preset picture includes a first picture area and a second picture area. The first picture area can be a picture area corresponding to the picture located within the third sub-area of ​​the background area when displayed in the background area, that is, when the preset picture is displayed in the background area, the picture in the first picture area is displayed in the third sub-area of ​​the background area. The second picture area can be a picture area corresponding to the picture located within the second sub-area of ​​the background area when displayed in the background area, that is, when the preset picture is displayed in the background area, the picture in the second picture area is displayed in the second sub-area of ​​the background area. Optionally, the first picture area and the second picture area can be different picture areas of the preset picture, and the first picture area and the second picture area may or may not have overlapping areas. The size of the preset picture can be the same as the size of the background area. When the sizes of the two are different, the preset picture can be adjusted to have the same size as the background area.

[0048] The preset foreground object may be a foreground object associated with the display area and the background area, such as a foreground object with an overlapping area between the display area and the background area. The foreground object may be understood as an object displayed on the upper layer of the background screen, and the object may be, for example, a character, a card, or an image, etc. The present embodiment does not limit the type of the preset foreground object. The foreground area may be a display area of ​​the preset foreground object in a preset page, i.e., an area in the preset page used to display the preset foreground object.

[0049] Specifically, when a user's display operation for a preset page is received, the preset page can be displayed, and a gradient screen associated with the main color of the first image area in the preset image and the preset display color of the preset foreground object can be displayed in the first sub-area of ​​the background area of ​​the preset page, the original screen of the second image area in the preset image can be displayed in the second sub-area of ​​the background area of ​​the preset page, and the preset foreground object can be displayed using the preset display color in the foreground area of ​​the preset page.

[0050] Taking the preset page as a personal page of a certain user as an example, the preset page may include a header image area, which may be used to display a preset image set by the user and some information of the user, such as the user's avatar, nickname and / or account number. At this time, the background area may be the header image area, the preset image may be an image set by the user in the header image area and displayed as the background, and the preset foreground object may be the user's nickname and / or account number and other information displayed in the header image area.

[0051] Thus, if Figure 2As shown, when a personal page of a certain user is displayed based on the display operation of the current user, a gradient picture can be displayed in the first sub-area 21 of the background area 20 of the personal page, and the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object 22; the original picture of the second picture area in the preset picture is displayed in the second sub-area 23 of the background area 20 of the personal page; and the preset foreground object 22 ( Figure 2 In the example, the preset foreground object is the user's nickname and account).

[0052] In this embodiment, the gradient color used for adjusting the background picture is determined according to the main color of a certain picture area in the preset picture, which can avoid the situation where the color change between the adjusted background picture and the original picture in the preset picture is too abrupt, so that the color connection between the adjusted background picture and the original picture in the preset picture is more natural when displayed in the background area, thereby improving the coordination between the adjusted background picture and the original picture in the preset picture, and then improving the overall display effect of the background picture in the background area.

[0053] In this embodiment, the display mode of the background image in the background area can be flexibly set.

[0054] In some embodiments, the preset image can be adjusted using the determined gradient color to obtain a target image. For example, a preset image set by a user can be obtained; a gradient color corresponding to the gradient screen can be obtained based on the main color of the first image area in the preset image and the preset display color of the preset foreground object; the gradient color is filled in the image area corresponding to the first sub-area of ​​the background area in the preset image to obtain the target image; and the target image is displayed in the background area.

[0055] In some implementations, the determined gradient color may also be directly displayed on the upper layer of the preset image. For example, the background image is obtained by superimposing a gradient mask on the upper layer of the preset image, and the gradient color is filled in the area corresponding to the first sub-area in the gradient mask. At this time, optionally, the background image is obtained by superimposing a gradient mask on the upper layer of the preset image, and the gradient color is filled in the area corresponding to the first sub-area in the gradient mask.

[0056] The page display method provided in the present embodiment receives a display operation for a preset page; in response to the display operation, displays the preset page, displays a background picture in the background area of ​​the preset page, and displays a preset foreground object in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second area is the original picture of the second picture area in the preset picture. By adopting the above technical solution, the present embodiment determines the gradient color used to adjust the background picture according to the main color in a picture area of ​​the preset picture, which can avoid the situation where the color change of the adjusted background picture and the original picture in the preset picture is too abrupt, improve the coordination between the adjusted background picture and the original picture in the preset picture, and thus improve the overall display effect of the background picture in the background area.

[0057] Figure 3 A flow chart of another page display method provided for an embodiment of the present disclosure. The solution in this embodiment can be combined with one or more optional solutions in the above embodiments. Optionally, before the background image is displayed in the background area of ​​the preset page, it also includes: obtaining the main color of the first image area in the preset image; determining the target color according to the main color; generating a gradient color corresponding to the target color as the gradient color corresponding to the gradient image.

[0058] Correspondingly, such as Figure 3 As shown, the page display method provided in this embodiment may include:

[0059] S201: Receive a display operation for a preset page.

[0060] S202: In response to the display operation, obtain a main color of a first picture area in a preset picture.

[0061] Specifically, the current application may obtain or obtain through the server the main color of the first image area in the preset image.

[0062] When obtaining the main color of the first image area in the preset image, illustratively, the first image area 40 in the preset image (such as Figure 4 The area enclosed by the solid line in the middle); obtain the color of each pixel in the first image area 40 in the preset image; for each color of a corresponding pixel in the first image area 40, determine the number of pixels of this color in the first image area 40, and determine the color with the largest number of pixels as the main color of the first image area 40 in the preset image.

[0063] The specific size and position of the first image area 40 are not limited. For example, the bottom 1 / 2 area of ​​the preset image can be used as the first image area 40. Figure 4 As shown, the preset picture may also include a second picture area 41 (such as Figure 4 The first image region 40 and the second image region 41 may or may not have an overlapping region, such as the first image region 40 and the second image region 41 may have overlapping boundary lines but no overlapping region; or there may be overlapping regions.

[0064] S203: Determine a target color according to the primary color.

[0065] In this embodiment, after the main color of the first picture area in the preset picture is determined, the target color for generating the gradient color can be determined according to the main color.

[0066] In some embodiments, determining the target color based on the primary color includes at least one of the following: if the color contrast between the preset display color of the foreground object and the primary color is greater than or equal to a preset contrast threshold, the hue of the primary color is kept unchanged, and the saturation and brightness of the primary color are reduced to obtain the target color; if the color contrast between the preset display color of the foreground object and the primary color is less than the preset contrast threshold, the saturation of the primary color is less than or equal to a first saturation threshold, and the brightness of the primary color is greater than or equal to a first brightness threshold, the hue of the primary color is kept unchanged, the saturation of the primary color is adjusted to a first saturation value, and the brightness of the primary color is adjusted to a first brightness value to obtain the target color.

[0067] In the above embodiment, the adjustment method of the main color can be determined based on the color contrast between the preset display color of the foreground object and the main color of the first image area, as well as the saturation and brightness of the main color of the first image area, and the color obtained by adjusting the main color can be determined as the target color for generating gradient colors.

[0068] Specifically, after determining the main color of the first picture area of ​​the preset picture, the color contrast between the preset display color of the preset foreground object and the main color may be calculated.

[0069] If the color contrast is greater than or equal to the preset contrast threshold, the hue of the primary color is kept unchanged, and the saturation and brightness of the primary color are reduced, such as reducing the saturation of the primary color by a set saturation value and reducing the brightness of the primary color by a set brightness value to obtain the target color.

[0070] If the color contrast is less than the preset contrast threshold, it is further determined whether the saturation of the main color is less than or equal to the first saturation threshold and the brightness of the main color is greater than or equal to the first brightness threshold. If so, the hue of the main color is kept unchanged, the saturation of the main color is adjusted to the first saturation value, and the brightness of the main color is adjusted to the first brightness value to obtain the target color; if not, the background picture can be adjusted using the existing background picture adjustment method.

[0071] Thus, it is avoided that the overall color of the preset picture is darker, but the adjusted background picture is lighter in color and / or the adjusted background picture has too high saturation and / or brightness compared to the original picture of the background image, thereby further improving the coordination between the adjusted background picture and the original picture in the preset picture.

[0072] Among them, the calculation method of color contrast and the existing background picture adjustment method are not limited, and the preset contrast threshold, the first saturation threshold, the first brightness threshold, the first saturation value and the first brightness value as well as the reduced saturation value and the set brightness value can be set as needed, as long as the above-mentioned effect can be achieved. Exemplarily, when the preset display color of the preset foreground object is white, the color contrast can be set to 7.3, 7.33 or 7.36, the first saturation threshold can be set to 24, 25 or 26, the first saturation value can be set to 0, 1 or 2, the first brightness threshold can be set to 75, 80 or 85, and the first brightness value can be set to 35, 40 or 45.

[0073] Taking the first picture area as the bottom 1 / 2 area of ​​the preset picture, the preset display color of the preset foreground object as white, the color contrast as 7.33, the reduced saturation value and the set brightness value as 10, the first saturation threshold as 25, the first brightness threshold as 8, the first saturation value as 0, and the first brightness value as 40 as an example, the process of determining the target color can be described as follows:

[0074] a1. Get the RGB value of the primary color of the bottom 1 / 2 area of ​​the preset image (i.e., the red color component value, the green color component value, and the blue color component value).

[0075] a2. Convert the primary color from RGB mode to HEX mode, calculate the color contrast between the preset display color and the primary color, and execute a3 or a4.

[0076] a3. If the color contrast is greater than or equal to 7.33:1, the primary color is converted from the RGB mode to the HSLuv mode, that is, the hue value H1, saturation value S1 and brightness value L1 of the primary color in the HSLuv mode are calculated. Thus, the color value (H2, S2, L2) of the target color in the HSLuv mode can be (H1, S1-10, L1-10), and the target color can be further converted from the HSLuv mode to the HSB mode to facilitate the subsequent generation of gradient colors.

[0077] a3. If the color contrast is less than 7.33:1, determine whether the color value of the main color in the HSLuv mode satisfies S1≤25 and L1≥80 at the same time. If so, the color value (H2, S2, L2) of the target color in the HSLuv mode can be (H1, 0, 40), and the target color can be further converted from the HSLuv mode to the HSB mode to facilitate the subsequent generation of gradient colors; if not, the existing background picture adjustment method can be used to adjust the background picture.

[0078] In some embodiments, the preset display color of the preset foreground object is white, and determining the target color based on the primary color includes at least one of the following: if the saturation of the primary color is less than or equal to a second saturation threshold, and the brightness of the primary color is greater than or equal to a second brightness threshold, then the hue of the primary color is kept unchanged, the saturation of the primary color is adjusted to the second saturation value, and the brightness of the primary color is reduced to obtain the target color; if the saturation of the primary color is greater than the second saturation threshold, or the brightness of the primary color is less than the second brightness threshold, then the primary color is determined as the target color.

[0079] In the above embodiment, when the preset display color of the preset foreground object is white, the adjustment method of the main color can also be determined based on the saturation value and brightness value of the main color of the first image area, and the color adjusted to the main color can be determined as the target color for generating a gradient color to avoid the situation where the color of the preset image is lighter and the adjusted background image color is darker.

[0080] Specifically, after determining the main color of the first image area of ​​the preset image, it can be determined whether the saturation of the main color is less than or equal to the second saturation threshold and the brightness of the main color is greater than or equal to the second brightness threshold. If so, the hue of the main color is kept unchanged, the saturation of the main color is adjusted to the preset second saturation threshold, and the brightness of the main color is reduced, such as reducing the brightness of the main color by a set brightness value to obtain the target color; if not, the main color can be determined as the target color.

[0081] Among them, the second saturation threshold, the second brightness threshold and the reduced set brightness value can all be set as needed. For example, the second saturation value can be set to values ​​such as 18, 20 or 22, the second brightness threshold can be set to values ​​such as 90, 95 or 100, and the set brightness value can be set to 4, 5 or 6, etc.

[0082] Taking the first image area as the bottom 1 / 2 area of ​​the preset image, the second saturation value as 120, the second brightness threshold as 95, and the set brightness value as 4 as an example, the process of determining the target color can be described as follows:

[0083] b1. Get the RGB value of the primary color of the bottom 1 / 2 area of ​​the preset image (i.e., the red color component value, the green color component value, and the blue color component value).

[0084] b2. Convert the primary color from the RGB mode to the HSLuv mode, that is, calculate the hue value H1, saturation value S1 and brightness value L1 of the primary color in the HSLuv mode.

[0085] b3. Determine whether the color value of the primary color in the HSLuv mode satisfies S1≤20 and L1≥95 at the same time. If so, the color value (H2, S2, L2) of the target color in the HSLuv mode can be (H1, 0, L1-5), and the target color can be further converted from the HSLuv mode to the HSB mode to facilitate the subsequent generation of gradient colors; if not, the primary color can be determined as the target color.

[0086] S204: Generate a gradient color corresponding to the target color as the gradient color corresponding to the gradient picture.

[0087] In this embodiment, after the target color is obtained, the target color may be subjected to a gradient process to obtain a gradient color corresponding to the gradient picture, so as to subsequently generate a gradient picture based on the gradient color.

[0088] S205. Display a preset page, display a background picture in the background area of ​​the preset page, and display a preset foreground object in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0089] It should be noted that the execution order of S201-S205 is not limited. For example, before receiving the display operation for the preset page, the gradient color corresponding to the preset page can be determined based on the preset image set in the preset page and stored in the server. Therefore, after receiving the display operation for the preset page, the current application can obtain the gradient color corresponding to the preset page from the server and display the preset page.

[0090] The page display method provided in this embodiment can improve the coordination between the adjusted background image and the original image in the preset picture, thereby improving the overall display effect of the background image in the background area.

[0091] Figure 5 This is a structural block diagram of a page display device provided by an embodiment of the present disclosure. The device can be implemented by software and / or hardware, and can be configured in an electronic device, typically a mobile phone or a tablet computer, and can display a background image and a foreground object in a page by executing a page display method, such as displaying a background image in a page and displaying a preset foreground object on the upper layer of the background image. Figure 5 As shown, the page display device provided in this embodiment may include: an operation receiving module 501 and a page display module 502, wherein:

[0092] An operation receiving module 501 is used to receive a display operation for a preset page;

[0093] The page display module 502 is used to display a preset page in response to the display operation, display a background picture in the background area of ​​the preset page, and display a preset foreground object in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0094] The page display device provided in this embodiment receives a display operation for a preset page through an operation receiving module; and displays the preset page in response to the display operation through the page display module, displays a background picture in the background area of ​​the preset page, and displays a preset foreground object in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second area is the original picture of the second picture area in the preset picture. By adopting the above technical solution, this embodiment determines the gradient color used to adjust the background picture according to the main color in a picture area of ​​the preset picture, which can avoid the situation where the color change of the adjusted background picture and the original picture in the preset picture is too abrupt, improve the coordination between the adjusted background picture and the original picture in the preset picture, and thus improve the overall display effect of the background picture in the background area.

[0095] In the above solution, the background picture can be obtained by superimposing a gradient mask on the upper layer of the preset picture, and the gradient color is filled in the area of ​​the gradient mask corresponding to the first sub-area.

[0096] In the above solution, the first sub-area may be located within a third sub-area of ​​the background area, and the third sub-area is a display area corresponding to the first picture area in the background area.

[0097] Furthermore, the page display device provided in this embodiment may also include: a main color acquisition module, used to acquire the main color of the first image area in the preset image before displaying the background picture in the background area of ​​the preset page; a target color determination module, used to determine the target color based on the main color; and a gradient color generation module, used to generate a gradient color corresponding to the target color as the gradient color corresponding to the gradient picture.

[0098] In the above scheme, the target color determination module can be used to perform at least one of the following: if the color contrast between the preset display color of the foreground object and the primary color is greater than or equal to a preset contrast threshold, the hue of the primary color is kept unchanged, and the saturation and brightness of the primary color are reduced to obtain the target color; if the color contrast between the preset display color of the foreground object and the primary color is less than the preset contrast threshold, the saturation of the primary color is less than or equal to a first saturation threshold, and the brightness of the primary color is greater than or equal to a first brightness threshold, the hue of the primary color is kept unchanged, the saturation of the primary color is adjusted to a first saturation value, and the brightness of the primary color is adjusted to a first brightness value to obtain the target color.

[0099] In the above scheme, the preset display color of the preset foreground object can be white, and the target color determination module can be used to perform at least one of the following: if the saturation of the primary color is less than or equal to the second saturation threshold, and the brightness of the primary color is greater than or equal to the second brightness threshold, then the hue of the primary color is kept unchanged, the saturation of the primary color is adjusted to the second saturation value, and the brightness of the primary color is reduced to obtain the target color; if the saturation of the primary color is greater than the second saturation threshold, or the brightness of the primary color is less than the second brightness threshold, then the primary color is determined as the target color.

[0100] In the above solution, there may be an overlapping area between the background area and the foreground area, and the overlapping area may be located within the first sub-area.

[0101] The page display device provided in the embodiment of the present disclosure can execute the page display method provided in any embodiment of the present disclosure, and has the corresponding functional modules and beneficial effects of executing the page display method. For technical details not described in detail in this embodiment, please refer to the page display method provided in any embodiment of the present disclosure.

[0102] Reference below Figure 6 , which shows a schematic diagram of the structure of an electronic device (e.g., terminal device) 600 suitable for implementing the embodiment of the present disclosure. The terminal device in the embodiment of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, notebook computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), vehicle-mounted terminals (e.g., vehicle-mounted navigation terminals), etc., and fixed terminals such as digital TVs, desktop computers, etc. Figure 6 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0103] like Figure 6 As shown, the electronic device 600 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage device 608 into a random access memory (RAM) 603. In the RAM 603, various programs and data required for the operation of the electronic device 600 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to the bus 604.

[0104] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touch pad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609. The communication device 609 may allow the electronic device 600 to communicate with other devices wirelessly or by wire to exchange data. Although Figure 6 The electronic device 600 is shown with various devices, but it should be understood that it is not required to implement or possess all the devices shown. More or fewer devices may be implemented or possessed instead.

[0105] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a non-transitory computer-readable medium, and the computer program contains program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication device 609, or installed from a storage device 608, or installed from a ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed.

[0106] It should be noted that the computer-readable medium disclosed above may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that may be used by or in combination with an instruction execution system, device or device. In the present disclosure, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, in which a computer-readable program code is carried. This propagated data signal may take a variety of forms, including but not limited to an electromagnetic signal, an optical signal, or any suitable combination of the above. The computer readable signal medium may also be any computer readable medium other than a computer readable storage medium, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer readable medium may be transmitted using any suitable medium, including but not limited to: wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.

[0107] In some embodiments, the client and the server may communicate using any currently known or future developed network protocol such as HTTP (HyperText Transfer Protocol), and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), an internet (e.g., the Internet), and a peer-to-peer network (e.g., an ad hoc peer-to-peer network), as well as any currently known or future developed network.

[0108] The computer-readable medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device.

[0109] The above-mentioned computer-readable medium carries one or more programs. When the above-mentioned one or more programs are executed by the electronic device, the electronic device: receives a display operation for a preset page; in response to the display operation, displays the preset page, displays a background picture in the background area of ​​the preset page, and displays a preset foreground object in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0110] Computer program code for performing the operations of the present disclosure may be written in one or more programming languages ​​or a combination thereof, including, but not limited to, object-oriented programming languages, such as Java, Smalltalk, C++, and conventional procedural programming languages, such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a separate software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., through the Internet using an Internet service provider).

[0111] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a module, a program segment or a part of a code, and the module, the program segment or a part of the code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some implementations as replacements, the functions marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two square boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0112] The units involved in the embodiments described in the present disclosure may be implemented by software or hardware, wherein the name of a module does not, in some cases, constitute a limitation on the unit itself.

[0113] The functions described above herein may be performed at least in part by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), and the like.

[0114] In the context of the present disclosure, a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, device, or equipment. A machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or equipment, or any suitable combination of the foregoing. A more specific example of a machine-readable storage medium may include an electrical connection based on one or more lines, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.

[0115] According to one or more embodiments of the present disclosure, Example 1 provides a page display method, including:

[0116] Receive a display operation for a preset page;

[0117] In response to the display operation, a preset page is displayed, a background picture is displayed in the background area of ​​the preset page, and a preset foreground object is displayed in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0118] According to one or more embodiments of the present disclosure, Example 2 is based on the method described in Example 1, wherein the background image is obtained by superimposing a gradient mask on an upper layer of the preset image, and the gradient color is filled in an area in the gradient mask corresponding to the first sub-area.

[0119] According to one or more embodiments of the present disclosure, Example 3 is based on the method described in Example 2, wherein the first sub-area is located within a third sub-area of ​​the background area, and the third sub-area is a display area corresponding to the first image area in the background area.

[0120] According to one or more embodiments of the present disclosure, Example 4 is a method according to Example 1, and before the background image is displayed in the background area of ​​the preset page, the method further includes:

[0121] Obtaining a primary color of a first image region in the preset image;

[0122] Determine a target color according to the primary color;

[0123] A gradient color corresponding to the target color is generated as the gradient color corresponding to the gradient picture.

[0124] According to one or more embodiments of the present disclosure, Example 5 is the method according to Example 4, wherein determining the target color according to the primary color includes at least one of the following:

[0125] If the color contrast between the preset display color of the foreground object and the primary color is greater than or equal to a preset contrast threshold, the hue of the primary color is kept unchanged, and the saturation and brightness of the primary color are reduced to obtain the target color;

[0126] If the color contrast between the preset display color of the foreground object and the primary color is less than a preset contrast threshold, the saturation of the primary color is less than or equal to a first saturation threshold, and the brightness of the primary color is greater than or equal to a first brightness threshold, the hue of the primary color is kept unchanged, the saturation of the primary color is adjusted to the first saturation value, and the brightness of the primary color is adjusted to the first brightness value to obtain the target color.

[0127] According to one or more embodiments of the present disclosure, Example 6 is the method according to Example 4, wherein the preset display color of the preset foreground object is white, and determining the target color according to the primary color includes at least one of the following:

[0128] If the saturation of the primary color is less than or equal to the second saturation threshold, and the brightness of the primary color is greater than or equal to the second brightness threshold, the hue of the primary color is kept unchanged, the saturation of the primary color is adjusted to the second saturation value, and the brightness of the primary color is reduced to obtain the target color;

[0129] If the saturation of the primary color is greater than a second saturation threshold, or the brightness of the primary color is less than a second brightness threshold, the primary color is determined as the target color.

[0130] According to one or more embodiments of the present disclosure, Example 7 is based on the method described in any one of Examples 1-6, wherein there is an overlapping area between the background area and the foreground area, and the overlapping area is located within the first sub-area.

[0131] According to one or more embodiments of the present disclosure, Example 8 provides a page display device, including:

[0132] An operation receiving module, used for receiving a display operation for a preset page;

[0133] A page display module is used to display a preset page in response to the display operation, display a background picture in the background area of ​​the preset page, and display a preset foreground object in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0134] According to one or more embodiments of the present disclosure, Example 9 provides an electronic device, including:

[0135] one or more processors;

[0136] a memory for storing one or more programs,

[0137] When the one or more programs are executed by the one or more processors, the one or more processors implement the page display method as described in any one of Examples 1-7.

[0138] According to one or more embodiments of the present disclosure, Example 10 provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the page display method as described in any one of Examples 1-7.

[0139] The above description is only a preferred embodiment of the present disclosure and an explanation of the technical principles used. Those skilled in the art should understand that the scope of disclosure involved in the present disclosure is not limited to the technical solutions formed by a specific combination of the above technical features, but should also cover other technical solutions formed by any combination of the above technical features or their equivalent features without departing from the above disclosed concept. For example, the above features are replaced with the technical features with similar functions disclosed in the present disclosure (but not limited to) by each other to form a technical solution.

[0140] In addition, although each operation is described in a specific order, this should not be understood as requiring these operations to be performed in the specific order shown or in a sequential order. Under certain circumstances, multitasking and parallel processing may be advantageous. Similarly, although some specific implementation details are included in the above discussion, these should not be interpreted as limiting the scope of the present disclosure. Some features described in the context of a separate embodiment can also be implemented in a single embodiment in combination. On the contrary, the various features described in the context of a single embodiment can also be implemented in multiple embodiments individually or in any suitable sub-combination mode.

[0141] Although the subject matter has been described in language specific to structural features and / or methodological logical actions, it should be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or actions described above. On the contrary, the specific features and actions described above are merely example forms of implementing the claims.

Claims

1. A page display method, characterized in that: include: Receive a display operation for a preset page; In response to the display operation, a preset page is displayed, a background picture is displayed in the background area of ​​the preset page, and a preset foreground object is displayed in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

2. The method according to claim 1, characterized in that The background image is obtained by superimposing a gradient mask on an upper layer of the preset image, and the gradient color is filled in an area in the gradient mask corresponding to the first sub-area.

3. The method according to claim 2, characterized in that The first sub-area is located within a third sub-area of ​​the background area, and the third sub-area is a display area corresponding to the first picture area in the background area.

4. The method according to claim 1, characterized in that Before the background image is displayed in the background area of ​​the preset page, the method further includes: Obtaining a primary color of a first image region in the preset image; Determine a target color according to the primary color; A gradient color corresponding to the target color is generated as the gradient color corresponding to the gradient picture.

5. The method according to claim 4, characterized in that Determining the target color according to the primary color includes at least one of the following: If the color contrast between the preset display color of the foreground object and the primary color is greater than or equal to a preset contrast threshold, the hue of the primary color is kept unchanged, and the saturation and brightness of the primary color are reduced to obtain the target color; If the color contrast between the preset display color of the foreground object and the primary color is less than a preset contrast threshold, the saturation of the primary color is less than or equal to a first saturation threshold, and the brightness of the primary color is greater than or equal to a first brightness threshold, the hue of the primary color is kept unchanged, the saturation of the primary color is adjusted to the first saturation value, and the brightness of the primary color is adjusted to the first brightness value to obtain the target color.

6. The method according to claim 4, characterized in that The preset display color of the preset foreground object is white, and the determining of the target color according to the primary color includes at least one of the following: If the saturation of the primary color is less than or equal to the second saturation threshold, and the brightness of the primary color is greater than or equal to the second brightness threshold, the hue of the primary color is kept unchanged, the saturation of the primary color is adjusted to the second saturation value, and the brightness of the primary color is reduced to obtain the target color; If the saturation of the primary color is greater than a second saturation threshold, or the brightness of the primary color is less than a second brightness threshold, the primary color is determined as the target color.

7. The method according to any one of claims 1 to 6, characterized in that: There is an overlapping area between the background area and the foreground area, and the overlapping area is located within the first sub-area.

8. A page display device, characterized in that: include: An operation receiving module, used for receiving a display operation for a preset page; A page display module is used to display a preset page in response to the display operation, display a background picture in the background area of ​​the preset page, and display a preset foreground object in the foreground area of ​​the preset page, wherein the background area includes a first sub-area and a second sub-area, the first sub-area is an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area is a gradient picture, the gradient color corresponding to the gradient picture is associated with the main color of the first picture area in the preset picture and the preset display color of the preset foreground object, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

9. An electronic device, characterized in that: include: at least one processor; as well as a memory communicatively connected to the at least one processor; wherein, The memory stores a computer program executable by the at least one processor, and the computer program is executed by the at least one processor so that the at least one processor can execute the page display method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores computer instructions, and the computer instructions are used to enable a processor to implement the page display method according to any one of claims 1 to 7 when executed.

Images