Page display method and apparatus, and electronic device and storage medium

Abstract

Provided in the embodiments of the present disclosure are a page display method and apparatus, and an electronic device and a storage medium. The method comprises: receiving a display operation for a preset page; and in response to the display operation, displaying the preset page, displaying a background picture in a background region of the preset page, and displaying a preset foreground object in a foreground region of the preset page, wherein the background region comprises a first sub-region and a second sub-region, a background picture displayed in the first sub-region is a gradient picture, a gradient color corresponding to the gradient picture is associated with the main color of a first image region in a preset image 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 image region in the preset image. By means of using the technical solution, the embodiments of the present disclosure can improve the coordination between the background picture obtained by means of adjustment and the original picture in the preset image.

Description

Page display method, device, electronic device and storage medium

[0001] This application claims priority to the Chinese invention patent application entitled “Page display method, device, electronic device and storage medium” and application number 202310989123.1 filed on August 7, 2023. The entire contents of that application are incorporated by reference into this application. Technical Field

[0002] 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

[0003] Currently, some applications adjust the background image in certain areas to ensure that foreground objects located above the background image can be clearly displayed. However, the adjusted background image does not blend in with the original image, resulting in poor overall display quality.

[0004] Summary of the Invention

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

[0006] In a first aspect, an embodiment of the present disclosure provides a page display method, comprising: receiving a display operation for a preset page; in response to the display operation, displaying the preset page, displaying a background picture in the background area of ​​the preset page, and displaying 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 being an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area being a gradient picture, the gradient color corresponding to the gradient picture being 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 being the original picture of the second picture area in the preset picture.

[0007] In the second aspect, an embodiment of the present disclosure also provides a page display device, including: an operation receiving module for receiving a display operation for a preset page; a page display module for displaying the preset page in response to the display operation, displaying a background picture in the background area of ​​the preset page, and displaying 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 being 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.

[0008] In a third aspect, an embodiment of the present disclosure further provides an electronic device, comprising: one or more processors; and a memory for storing one or more programs, wherein 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.

[0009] In a fourth aspect, an embodiment of the present disclosure further provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the page display method as described in the embodiment of the present disclosure is implemented. BRIEF DESCRIPTION OF THE DRAWINGS

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

[0011] FIG1 is a flow chart of a page display method provided by an embodiment of the present disclosure;

[0012] FIG2 is a display diagram of a preset page provided by an embodiment of the present disclosure;

[0013] FIG3 is a flow chart of another page display method provided by an embodiment of the present disclosure;

[0014] FIG4 is a schematic diagram of a preset picture provided by an embodiment of the present disclosure;

[0015] FIG5 is a structural block diagram of a page display device provided by an embodiment of the present disclosure;

[0016] FIG6 is a schematic structural diagram of an electronic device provided by an embodiment of the present disclosure. DETAILED DESCRIPTION

[0017] The following describes embodiments of the present disclosure in more detail 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 limited to the embodiments described herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are for illustrative purposes only and are not intended to limit the scope of protection of the present disclosure.

[0018] 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.

[0019] As used herein, the term "including" and its variations are open-ended, 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," and the term "some embodiments" means "at least some embodiments." Other terms are defined in the following description.

[0020] It should be noted that the concepts of "first" and "second" mentioned in this 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.

[0021] It should be noted that the modifications of "one" and "multiple" 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, they should be understood as "one or more".

[0022] 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.

[0023] It is understandable that before using the technical solutions disclosed in the various embodiments of this disclosure, the type, scope of use, usage scenarios, etc. of the personal information involved in this 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.

[0024] For example, in response to a user's active request, a prompt message is sent to the user to clearly inform the user that the operation requested will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the electronic device, application, server, storage medium, or other software or hardware that performs the operations of the disclosed technical solution based on the prompt message.

[0025] As an optional but non-limiting implementation, in response to receiving a user's active request, 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. Furthermore, the pop-up window may also contain a selection control for the user to select "agree" or "disagree" to provide personal information to the electronic device.

[0026] It is understandable that the above notification and user authorization process are merely illustrative and do not limit the implementation of the present disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of the present disclosure.

[0027] Figure 1 is 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, a mobile phone or tablet computer. The page display method provided by an embodiment of the present disclosure is applicable to scenarios in which a background image and a foreground object are displayed on a page, such as a scenario in which a background image is displayed on a page and a preset foreground object is displayed on top of the background image.

[0028] Some applications allow users to set a preset image. However, because the color of the user-set preset image is not fixed, if a foreground object is displayed directly on top of the preset image using its preset display color, the foreground object may not be clearly displayed. Therefore, existing technologies generally adjust the background image in the area overlapping with the foreground object to ensure that the foreground object is clearly displayed.

[0029] However, the background picture adjustment method in the prior art has the problem that the adjusted background picture is inconsistent with the original picture in the preset picture, such as the overall picture of the preset picture is dark, but the adjusted background picture color is brighter; the overall picture color of the preset picture is darker, but the adjusted background picture color 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, etc.

[0030] 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.

[0031] As shown in FIG1 , the page display method provided in this embodiment may include:

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

[0033] The preset page may include an object containing a background image, such as a page that supports user-set preset images and has a foreground object to be displayed in the display area of ​​the preset image. Below, the preset page is taken as an example of a personal page. The display operation may be an operation for instructing to display the preset page, such as switching to the preset page from another page.

[0034] In this embodiment, the current user may instruct the current application to display the preset page by performing a display operation on the preset page. Accordingly, the current application may receive the display operation performed by the current user.

[0035] S102. 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, 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, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0036] The background area can be considered as the area in the preset page used to display the background image. In other words, it is 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 within the background area, that is, a sub-area in the background area that is 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 a sub-area of ​​the background area other than the first sub-area.

[0037] In addition, the background area may further include a third sub-area, which can be considered as the display area corresponding to the first image area in the background area. The first sub-area may be located within the third sub-area, that is, the gradient color of the gradient image displayed in the first sub-area can be determined based on the dominant color in the third sub-area of ​​the preset image that includes the first sub-area. In this case, 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.

[0038] The background image displayed in the first sub-area is a gradient image, e.g., a gradient image that gradually changes from an original image in a preset image to a primary color of the first image area in the preset image. For example, the original image may be the original image within the first sub-area when the preset image is displayed in the background area. Exemplarily, the background image displayed in the first sub-area may be a gradient mask formed by superimposing the original image of the corresponding image area in the preset image with the gradient color.

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

[0040] The preset foreground object may be a foreground object to be displayed on a preset page, such as a foreground object whose content is at least partially displayed within a background area. The foreground area may be considered to be the area within which the preset foreground object is displayed on the preset page. The foreground area and the background area in the preset page may overlap. Optionally, the background area and the foreground area overlap, and the overlapping area is within the first sub-area. In other words, the first sub-area may be a sub-area within the background area that includes the overlapping area with the foreground area.

[0041] The preset image can be an original image to be displayed as the background image in the background area. This original image can be set by the user corresponding to the preset page. For example, if the preset page is a user's personal page, the preset image can be selected and / or uploaded by the user. The preset image includes a first image area and a second image area. The first image area can be the image area corresponding to the image located within the third subarea of ​​the background area when displayed in the background area. That is, when the preset image is displayed in the background area, the image within the first image area is displayed within the third subarea of ​​the background area. The second image area can be the image area corresponding to the image located within the second subarea of ​​the background area when displayed in the background area. That is, when the preset image is displayed in the background area, the image within the second image area is displayed within the second subarea of ​​the background area. Optionally, the first image area and the second image area can be different image areas of the preset image, and the first and second image areas may or may not overlap. The size of the preset image can be the same as that of the background area. If the sizes are different, the preset image can be adjusted to be the same size as the background area.

[0042] The preset foreground object can 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 can be understood as an object displayed on top of the background image. For example, the object can be a character, a card, or an image. This embodiment does not limit the type of the preset foreground object. The foreground area can be the display area of ​​the preset foreground object in the preset page, that is, the area of ​​the preset page used to display the preset foreground object.

[0043] 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 picture area in the preset picture and the preset display color of the preset foreground object is displayed in the first sub-area of ​​the background area of ​​the preset page, the original screen of the second picture area in the preset picture is displayed in the second sub-area of ​​the background area of ​​the preset page, and the preset foreground object is displayed using the preset display color in the foreground area of ​​the preset page.

[0044] For example, a preset page may include a header area, which can be used to display a preset image set by the user and some user information, such as the user's profile picture, nickname, and / or account number. In this case, the background area may be the header area, the preset image may be an image set by the user in the header area and displayed as the background, and the preset foreground object may be the user's nickname and / or account number displayed in the header area.

[0045] Thus, as shown in Figure 2, when a user's personal page is displayed based on the display operation of the current user, a gradient screen 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 screen 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 screen 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 is displayed in the foreground area 24 of the personal page (in Figure 2, the preset foreground object is taken as the user's nickname and account as an example).

[0046] 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.

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

[0048] In some embodiments, the determined gradient color can be used to adjust a preset image 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 primary color of the first image area in the preset image and the preset display color of the preset foreground object; the gradient color can be 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 can be displayed in the background area.

[0049] In some embodiments, the determined gradient color may be displayed directly on top of a preset image. For example, a background image may be obtained by superimposing a gradient mask on top of the preset image, with the gradient color being filled in the area corresponding to the first sub-area within the gradient mask. Optionally, the background image may be obtained by superimposing a gradient mask on top of the preset image, with the gradient color being filled in the area corresponding to the first sub-area within the gradient mask.

[0050] The page display method provided in this 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 being an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area being a gradient picture, the gradient color corresponding to the gradient picture being 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 being the original picture of the second picture area in the preset picture. By adopting the above-mentioned technical solution, this embodiment determines the gradient color used to adjust the background picture according to the main color in a certain picture area of ​​the preset picture, thereby avoiding the situation where the color change between the adjusted background picture and the original picture in the preset picture is too abrupt, improving the coordination between the adjusted background picture and the original picture in the preset picture, and thereby improving the overall display effect of the background picture in the background area.

[0051] FIG3 is a flow chart of another page display method provided by 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 displaying the background image in the background area of ​​the preset page, the method further includes: obtaining the primary color of the first image area in the preset image; determining a target color based on the primary color; and generating a gradient color corresponding to the target color as the gradient color corresponding to the gradient image.

[0052] Accordingly, as shown in FIG3 , the page display method provided in this embodiment may include:

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

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

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

[0056] When obtaining the main color of the first image area in the preset image, for example, the first image area 40 in the preset image can be determined (such as the area surrounded by the solid line in Figure 4); the color of each pixel in the first image area 40 in the preset image is obtained; for each color of a corresponding pixel in the first image area 40, the number of pixels of the color in the first image area 40 is determined, and the color with the largest number of pixels is determined as the main color of the first image area 40 in the preset image.

[0057] The specific size and position of the first image area 40 are not limited. For example, the bottom 1 / 2 of the preset image can be used as the first image area 40. In addition, as shown in FIG4 , the preset image can also include a second image area 41 (the area surrounded by the dotted line in FIG4 ). The first image area 40 and the second image area 41 may or may not have overlapping areas. For example, the first image area 40 and the second image area 41 may have overlapping boundaries but no overlapping areas; or they may have overlapping areas.

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

[0059] In this embodiment, after the main color of the first image area in the preset image is determined, a target color for generating a gradient color may be determined according to the main color.

[0060] 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, then keeping the hue of the primary color unchanged, and reducing the saturation and brightness of the primary color 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, then keeping the hue of the primary color unchanged, adjusting the saturation of the primary color to a first saturation value, and adjusting the brightness of the primary color to a first brightness value to obtain the target color.

[0061] 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 the gradient color.

[0062] 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.

[0063] 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. For example, the saturation of the primary color is reduced by a set saturation value, and the brightness of the primary color is reduced by a set brightness value to obtain the target color.

[0064] 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.

[0065] In this way, 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, further improving the coordination between the adjusted background picture and the original picture in the preset picture.

[0066] Among them, the calculation method of color contrast and the existing background image 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. For example, when the preset display color of the preset foreground object is white, the color contrast can be set to a value such as 7.3, 7.33 or 7.36, the first saturation threshold can be set to a value such as 24, 25 or 26, the first saturation value can be set to a value such as 0, 1 or 2, the first brightness threshold can be set to a value such as 75, 80 or 85, and the first brightness value can be set to a value such as 35, 40 or 45.

[0067] Taking the first image area as the bottom 1 / 2 of the preset image, 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 target color determination process can be described as follows:

[0068] 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).

[0069] 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.

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

[0071] a4. If the color contrast ratio 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 background image can be adjusted using the existing background image adjustment method.

[0072] 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 keeping the hue of the primary color unchanged, adjusting the saturation of the primary color to the second saturation value, and reducing the brightness of the primary color 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 determining the primary color as the target color.

[0073] 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 obtained by adjusting 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 color of the adjusted background image is darker.

[0074] 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.

[0075] 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 a value such as 18, 20 or 22, the second brightness threshold can be set to a value such as 90, 95 or 100, and the set brightness value can be set to 4, 5 or 6, etc.

[0076] Taking the first image area as the bottom 1 / 2 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 target color determination process can be described as follows:

[0077] 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).

[0078] 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.

[0079] 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.

[0080] S204: Generate a gradient color corresponding to the target color as the gradient color corresponding to the gradient image.

[0081] In this embodiment, after the target color is obtained, a gradient process may be performed on the target color to obtain a gradient color corresponding to the gradient picture, so as to facilitate subsequent generation of a gradient picture based on the gradient color.

[0082] 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, 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, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0083] It should be noted that the order in which steps S201-S205 are executed is not limited. For example, before receiving a display operation for a 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. Thus, after receiving a 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.

[0084] 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.

[0085] FIG5 is a 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 tablet computer. The device can be adapted to 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. As shown in FIG5 , the page display device provided by this embodiment may include: an operation receiving module 501 and a page display module 502, wherein:

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

[0087] 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, 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, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0088] The page display device provided in this embodiment receives a display operation for a preset page through an operation receiving module; the page display module responds to the display operation to display 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 being an associated sub-area of ​​the foreground area in the background area, the background picture displayed in the first sub-area being a gradient picture, the gradient color corresponding to the gradient picture being 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 being the original picture of the second picture area in the preset picture. By adopting the above-mentioned technical solution, this embodiment determines the gradient color used to adjust the background picture according to the main color in a certain picture area of ​​the preset picture, thereby avoiding the situation where the color change of the adjusted background picture and the original picture in the preset picture is too abrupt, improving the coordination between the adjusted background picture and the original picture in the preset picture, and thereby improving the overall display effect of the background picture in the background area.

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

[0090] 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 image area in the background area.

[0091] Furthermore, the page display device provided in this embodiment may also include: a main color acquisition module, used to obtain the main color of the first picture area in the preset picture 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.

[0092] 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.

[0093] 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 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, then the hue of the main color is kept unchanged, the saturation of the main color is adjusted to the second saturation value, and the brightness of the main color is reduced to obtain the target color; if the saturation of the main color is greater than the second saturation threshold, or the brightness of the main color is less than the second brightness threshold, then the main color is determined as the target color.

[0094] 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.

[0095] 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 fully described in this embodiment, please refer to the page display method provided in any embodiment of the present disclosure.

[0096] The page display method, device, electronic device and storage medium provided by the embodiments of the present disclosure receive a display operation for a preset page; in response to the display operation, the 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 area is the original picture of the second picture area in the preset picture. By adopting the above-mentioned technical solution, the embodiments of the present disclosure determine the gradient color used to adjust the background picture according to the main color in a certain 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.

[0097] Reference is now made to FIG6 , which illustrates a schematic diagram of the structure of an electronic device (e.g., a terminal device) 600 suitable for implementing embodiments of the present disclosure. The terminal device in the embodiments of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (personal digital assistants), PADs (tablet computers), PMPs (portable multimedia players), in-vehicle terminals (e.g., in-vehicle navigation terminals), and fixed terminals such as digital TVs and desktop computers. The electronic device illustrated in FIG6 is merely an example and should not limit the functionality or scope of use of the embodiments of the present disclosure.

[0098] As shown in Figure 6, 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. Various programs and data required for the operation of the electronic device 600 are also stored in the RAM 603. 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.

[0099] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touchpad, 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 FIG. 6 shows the electronic device 600 with various devices, it should be understood that not all of the devices shown are required to be implemented or present. More or fewer devices may alternatively be implemented or present.

[0100] 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 includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication device 609, or installed from the storage device 608, or installed from the 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 performed.

[0101] It should be noted that the computer-readable medium mentioned above in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination of the two. A computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or component, 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 that contains or stores a program that can be used by or in conjunction with an instruction execution system, device, or component. In the present disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport 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 thereof.

[0102] In some embodiments, the client and server can communicate using any currently known or later developed network protocol, such as HTTP (HyperText Transfer Protocol), and can 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 later developed network.

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

[0104] 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, 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, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0105] 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 stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on the 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).

[0106] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the module, program segment, or a part of code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order than that marked in the accompanying drawings. For example, two 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 box in the block diagram and / or flowchart, and the combination of the boxes in the block diagram and / or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0107] The units involved in the embodiments described in this disclosure may be implemented in software or hardware, wherein the name of a module does not, in some cases, limit the unit itself.

[0108] The functions described above herein may be performed, at least in part, by one or more hardware logic components. For example, and 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 chip (SOCs), complex programmable logic devices (CPLDs), and the like.

[0109] In the context of the present disclosure, a machine-readable medium can be a tangible medium that can contain or store a program for use by or in conjunction with an instruction execution system, device or equipment. A machine-readable medium can be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium can 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 can 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.

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

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

[0112] 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, 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, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

[0113] 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 top of the preset image, and the gradient color is filled in the area in the gradient mask corresponding to the first sub-area.

[0114] According to one or more embodiments of the present disclosure, Example 3 is a method according to 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.

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

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

[0117] determining a target color according to the primary color;

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

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

[0120] 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;

[0121] 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.

[0122] 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 based on the primary color includes at least one of the following:

[0123] 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 keeping the hue of the primary color unchanged, adjusting the saturation of the primary color to the second saturation value, and reducing the brightness of the primary color to obtain the target color;

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

[0125] According to one or more embodiments of the present disclosure, Example 7 is the method according to 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.

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

[0127] An operation receiving module, configured to receive a display operation for a preset page;

[0128] 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, 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, and the background picture displayed in the second sub-area is the original picture of the second picture area in the preset picture.

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

[0130] one or more processors;

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

[0132] 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.

[0133] 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.

[0134] The above description is merely a preferred embodiment of the present disclosure and an illustration of the technical principles employed. 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 the specific combination of the above-mentioned technical features, but also includes other technical solutions formed by any combination of the above-mentioned technical features or their equivalents without departing from the above-mentioned disclosed concepts. For example, a technical solution formed by replacing the above-mentioned features with (but not limited to) technical features with similar functions disclosed in this disclosure.

[0135] 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 have been 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.

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

Claims

1. A page display method, comprising: 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, wherein 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 in the gradient mask corresponding to the first sub-area. 3 . The method according to claim 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.

4. The method according to claim 1, wherein before displaying the background image in the background area of ​​the preset page, the method further comprises: 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, wherein determining the target color according to the primary color comprises 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, wherein the preset display color of the preset foreground object is white, and the determining of the target color according to the primary color comprises 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-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.

8. A page display device, comprising: An operation receiving module, used for receiving a display operation for a preset page; The page display module is used to display a preset page in response to the display operation, display a background image 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 the foreground area of ​​the preset page, and the foreground area of ​​the preset page is the background area of ​​the preset page. The background area is an associated sub-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, comprising: 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 storing computer instructions, wherein 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