An interface background dynamic rendering method and device and a storage medium

Abstract

The application provides a dynamic rendering method and device of interface background and a storage medium. The method comprises the following steps: obtaining interface data (containing a plurality of theme images) of an interactive interface to be displayed, determining a target theme image, transforming the size of an image copy corresponding to the target theme image to be consistent with the size of the interactive interface to be displayed, performing blur processing on the image copy, superimposing a layer of translucent cover on the image copy as a background image of the interactive interface to be displayed, and loading and displaying the interactive interface. In this way, the idle resources of the terminal are utilized, the theme image to be loaded and displayed in the interface is used, the interface background image is prepared and displayed by using the blur processing and superimposition of the translucent cover, the dynamic rendering of the interface background is realized, the theme content of the interface is highlighted, the user experience is enhanced, and the user satisfaction is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of software, in particular to an interface background dynamic rendering method and device and storage medium. BACKGROUND

[0002] Current smart devices such as smart televisions, smart projectors, smart phones, etc. are generally performance surplus, and the GPU and CPU of the terminal are largely idle. The processing of most interactive interface backgrounds usually adopts the following several ways:

[0003] 1) The client factory-fixed background image or background color;

[0004] 2) The client factory-fixed background image or background color, allowing user-defined modification, such as mobile phone desktop image;

[0005] 3) The server sets a specific color for a specific page and transmits it to the client for rendering, which is adopted by a large number of APPs;

[0006] 4) The server sets a specific background for a specific page and transmits it to the client for rendering, which is adopted by a large number of APPs;

[0007] 5) The client perceives the ambient light and dynamically changes the screen brightness or color.

[0008] In the prior art, the interface background image or background color of the interactive application of the smart device does not change for years, and the background atmosphere is usually not related to the current content used, which easily leads to user aesthetic fatigue and poor experience. For example, the background color of a certain video mobile phone client is always white, and the background color of a television client is always dark blue. These colors are harsh, old-fashioned, and make users aesthetically fatigued. SUMMARY

[0009] The purpose of the embodiments of the present application is to provide an interface background dynamic rendering method and device and storage medium, to utilize the idle resources of the terminal, to realize the dynamic rendering of the client interface background through the theme image to be loaded and displayed in the interface, to play up the atmosphere of the theme content of the interface, to enhance the user experience, and to improve the user satisfaction.

[0010] In order to achieve the above purpose, the embodiments of the present application are realized by the following ways:

[0011] In a first aspect, an embodiment of the present application provides a method for dynamic rendering of an interface background, comprising: obtaining interface data of an interactive interface to be displayed, wherein the interface data includes multiple theme images, and each theme image is used to be displayed in the interactive interface after loading; determining a target theme image from the multiple theme images; obtaining an image copy corresponding to the target theme image, and transforming the size of the image copy to be consistent with the size of the interactive interface to be displayed; blurring the image copy, and superimposing a translucent cover on the blurred image after blurring as the background image of the interactive interface to be displayed; loading the interface data and background image of the interactive interface to be displayed to display the interactive interface.

[0012] In an embodiment of the present application, the interface data of the interactive interface to be displayed (including multiple theme images) is obtained, a target theme image is determined therefrom, the size of the image copy corresponding to the target theme image is transformed to be consistent with the size of the interactive interface to be displayed, and then the image copy is blurred and a semi-transparent cover is superimposed to serve as the background image of the interactive interface to be displayed. After loading, the interactive interface is displayed. In this way, idle resources of the terminal can be utilized, and the theme image to be loaded and displayed in the interface is prepared by blurring and superimposing a semi-transparent cover to display the interface background image, thereby realizing dynamic rendering of the interface background, playing a role in setting off the atmosphere of the theme content of the interface, enhancing user experience and improving user satisfaction.

[0013] In combination with the first aspect, in a first possible implementation method of the first aspect, the size of the image copy is transformed to be consistent with the size of the interactive interface to be displayed, including: obtaining the size of the interactive interface to be displayed; and stretching the image copy to be consistent with the size of the interactive interface to be displayed.

[0014] In combination with the first aspect, in a second possible implementation method of the first aspect, the image copy is blurred, including: performing the following processing on each pixel point in the image copy: determining the fuzzy calculation area of ​​the pixel point in the image copy; calculating the fuzzy pixel value of the pixel point based on the pixel values ​​of all pixels in the fuzzy calculation area, thereby realizing the blurring of the image copy.

[0015] In this implementation method, for each pixel in the image copy, the fuzzy calculation area of ​​the pixel (i.e., the pixel currently being processed in the image copy) is determined in the image copy, and the fuzzy pixel value of the pixel is calculated by the pixel values ​​of all pixels in the fuzzy calculation area, so that the fuzzy pixel value of the pixel is jointly affected by the pixel values ​​of all pixels in the fuzzy calculation area. Fuzzy processing of the image copy in this way is conducive to ensuring the blur effect.

[0016] In a third possible implementation of the first aspect, in the second possible implementation of the first aspect, the blur calculation region of the current pixel point is determined in the image copy, including: obtaining a preset blur influence parameter, wherein the blur influence parameter is a maximum distance between the pixel point that has an influence on the current pixel point and the current pixel point; and determining the blur calculation region of the current pixel point based on the blur influence parameter and taking the current pixel point as a center.

[0017] In this implementation, the blur calculation region of the current pixel point is determined by obtaining a preset blur influence parameter (a maximum distance between the pixel point that has an influence on the current pixel point and the current pixel point) and taking the current pixel point as a center. In this way, the blur calculation region of the current pixel point can be quickly determined.

[0018] In a fourth possible implementation of the first aspect, in the third possible implementation of the first aspect, the blur pixel value of the current pixel point is calculated based on the pixel values of all the pixel points in the blur calculation region, including: determining the number of pixel points in the blur calculation region; determining the weight corresponding to each pixel point based on the position between each pixel point and the current pixel point; obtaining the pixel value of each pixel point in the blur calculation region; and calculating the blur pixel value of the current pixel point based on the number of pixel points in the blur calculation region, the weight corresponding to each pixel point, and the pixel value of each pixel point.

[0019] In this implementation, the blur pixel value of the current pixel point is calculated based on the number of pixel points in the blur calculation region, the weight corresponding to each pixel point (determined by the position between each pixel point and the current pixel point), and the pixel value of each pixel point. In this way, the influence of all the pixel points in the blur calculation region on the current pixel point can be considered, so that the blur processing is performed. Moreover, the farther the distance between the pixel point and the current pixel point, the lower the weight, so that the processed blur effect is more realistic.

[0020] In a fifth possible implementation of the first aspect, in the fourth possible implementation of the first aspect, the weight corresponding to each pixel point is determined based on the position between each pixel point and the current pixel point, including: performing the following processing on each pixel point in the blur calculation region: obtaining the coordinates of the current pixel point and the coordinates of a target pixel point, wherein the target pixel point is the pixel point for which the weight is currently calculated; and calculating the weight of the target pixel point by using the following formula:

[0021]

[0022] wherein σ represents the weight of the target pixel point, r represents the blur influence parameter, a represents the pixel distance between the target pixel point and the current pixel point in the horizontal coordinate, and b represents the pixel distance between the target pixel point and the current pixel point in the vertical coordinate.

[0023] With reference to the fifth possible implementation manner of the first aspect, in a sixth possible implementation manner of the first aspect, the blurring pixel value of the current pixel point is calculated based on the number of pixel points in the blurring calculation region, the weight corresponding to each pixel point, and the pixel value of each pixel point, including: performing convolution and normalization calculation on all pixel points in the blurring calculation region by using the following formula:

[0024]

[0025] wherein, p (u,v) represents the blurring pixel value of the current pixel point, n represents the number of pixel points in the blurring calculation region, P (x,y) represents the pixel value of the target pixel point, σ (x,y) represents the weight of the target pixel point P (x,y) .

[0026] With reference to the first possible implementation manner of the first aspect, in a seventh possible implementation manner of the first aspect, the semi-transparent cover is superimposed on the blurred image after the blurring processing, including: generating a semi-transparent cover consistent in size with the to-be-displayed interactive interface; setting the semi-transparent cover to be white with a transparency of 70%, or setting the semi-transparent cover to be black with a transparency of 30%.

[0027] In this implementation manner, by designing the white semi-transparent cover with a transparency of 70% or the black semi-transparent cover with a transparency of 30%, different scenes can be applied. The semi-transparent cover can prevent the saturation of the picture from being too high, too bright, too dark, and the like.

[0028] In a second aspect, an embodiment of the present application provides a dynamic rendering device for an interface background, including: an interface data acquisition unit, configured to acquire interface data of a to-be-displayed interactive interface, wherein the interface data includes a plurality of theme images, and each theme image is used to be displayed in the interactive interface after being loaded; a target image determination unit, configured to determine a target theme image from the plurality of theme images; an image copy processing unit, configured to acquire an image copy corresponding to the target theme image, and transform the size of the image copy to be consistent with the size of the to-be-displayed interactive interface; a background image processing unit, configured to perform blurring processing on the image copy, and superimpose a semi-transparent cover on the blurred image after the blurring processing, as a background image of the to-be-displayed interactive interface; and a background image display unit, configured to load the interface data and the background image of the to-be-displayed interactive interface, and display the interactive interface.

[0029] In a third aspect, an embodiment of the present application provides a storage medium, which comprises a stored program, wherein the program controls a device where the storage medium is located to perform the interface background dynamic rendering method in the first aspect or any possible implementation manner of the first aspect when the program is running.

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

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

[0032] Figure 1 A flow chart of the interface background dynamic rendering method provided by an embodiment of the present application.

[0033] Figure 2 A layout diagram of the interface of the terminal entering a theme of a video client.

[0034] Figure 3 A schematic diagram of the target theme image determined in an exemplary manner.

[0035] Figure 4 A schematic diagram of stretching the image copy to be consistent with the size of the interactive interface to be displayed.

[0036] Figure 5 A schematic diagram of the blur calculation area when the current pixel point is located in a non-edge area.

[0037] Figure 6 A schematic diagram of the corresponding blurred image.

[0038] Figure 7 A schematic diagram of the background image obtained after superimposing the semi-transparent cover.

[0039] Figure 8 A structure block diagram of the interface background dynamic rendering device 10 provided in an embodiment of the present application.

[0040] Icon: 10-interface background dynamic rendering device; 11-interface data acquisition unit; 12-target image determination unit; 13-image copy processing unit; 14-background image processing unit; 15-background image display unit. DETAILED DESCRIPTION

[0041] The technical solutions in the embodiments of the present application will be described below in conjunction with the drawings in the embodiments of the present application.

[0042] In order to improve the display effect of the interface background and enhance the user experience, terminals (such as smart phone terminals, smart TV terminals, smart projection terminals, computer terminals, etc.) can execute a dynamic rendering method for the interface background.

[0043] See also Figure 1 , Figure 1 This is a flowchart of a method for dynamically rendering an interface background provided by an embodiment of the present application. In this embodiment, the method for dynamically rendering an interface background may include steps S10, S20, S30, S40, and S50.

[0044] In this embodiment, the terminal may execute step S10.

[0045] Step S10: obtaining interface data of an interactive interface to be displayed, wherein the interface data includes a plurality of theme images, and each theme image is used to be displayed in the interactive interface after being loaded.

[0046] In this embodiment, before entering the client interface, the terminal may first obtain interface data of the interactive interface to be displayed. The interface data includes multiple theme images, and each theme image is used to be displayed in the interactive interface after loading.

[0047] For example, Figure 2 As shown, Figure 2 This is the interface layout diagram of a theme when the terminal enters the video client. There should be multiple theme images in the interface to display their specific content.

[0048] After acquiring the interface data of the interactive interface to be displayed, the terminal may execute step S20.

[0049] Step S20: determining a target subject image from a plurality of subject images.

[0050] In this embodiment, the terminal can determine the target theme image from multiple theme images. For example, it can randomly select a theme image as the target theme image, or it can select the first one. Usually, the first theme image is selected as the target theme image because the theme interface usually sorts and displays theme images by their popularity. Therefore, selecting the first theme image as the target theme image has a relatively better user experience and can also play a promotional role. For example, if the target theme image is determined as Figure 3 shown.

[0051] After determining the target subject image, the terminal may execute step S30.

[0052] Step S30: Obtain an image copy corresponding to the target theme image, and transform the size of the image copy to be consistent with the size of the to-be-displayed interactive interface.

[0053] In this embodiment, an image copy corresponding to the target theme image can be obtained, for example, by copying. Then the size of the image copy is transformed to be consistent with the size of the to-be-displayed interactive interface. Here, the CV2.resize method of Python can be used for implementation.

[0054] For example, the terminal can obtain the size of the to-be-displayed interactive interface, and then stretch the image copy to be consistent with the size of the to-be-displayed interactive interface, as shown in Figure 4 .

[0055] After transforming the size of the image copy to be consistent with the size of the to-be-displayed interactive interface, the terminal can perform step S40.

[0056] Step S40: Perform blur processing on the image copy, and superimpose a semi-transparent cover on the blurred image after the blur processing as a background image of the to-be-displayed interactive interface.

[0057] In this embodiment, the terminal can first perform blur processing on the image copy.

[0058] For example, the terminal can perform the following processing on each pixel point in the image copy:

[0059] First, the terminal can determine the blur calculation region of the pixel point in the image copy.

[0060] Specifically, the terminal can obtain a preset blur influence parameter r, where the blur influence parameter r can be understood as the maximum distance between the pixel points that affect the current pixel point and the current pixel point. That is, the blur influence parameter r is used to determine the region that can affect the current pixel point during the blur processing. The blur influence parameter r is essentially the horizontal and vertical distance of the pixel range, and the larger the value, the larger the range of blur influence of a certain point, and the higher the final blur degree. In order to ensure that the effect of the interface background image does not affect the display of the foreground elements, r>50 can be set.

[0061] Based on this, the terminal can determine the blur calculation region of the current pixel point based on the blur influence parameter and taking the current pixel point as the center.

[0062] For example, for the case that the current pixel point is located in a non-edge region (i.e., the distance between the current pixel point and each edge pixel point of the image copy is at least r), the terminal can determine a square region with a side length of 2r+1 as the blur calculation region of the current pixel point, taking the coordinates of the current pixel point as the center. As shown in Figure 5 .Figure 5 The blur calculation region of the current pixel point P(u, v) is shown when the current pixel point P(u, v) is located in a non-edge region (r = 7 is taken as an example).

[0063] For the case that the current pixel point is located in an edge region (i.e., the distance between the current pixel point and the pixel point of at least one edge of the image copy is less than r), the terminal can define a virtual square region with a side length of 2r + 1 centered on the coordinates of the current pixel point, and then calculate the part of the virtual square region that overlaps with the image copy as the blur calculation region of the current pixel point.

[0064] By obtaining the preset blur influence parameter (the maximum distance between the pixel point that has an influence on the current pixel point and the current pixel point), the blur calculation region of the current pixel point is determined centered on the current pixel point. In this way, the blur calculation region of the current pixel point can be quickly determined.

[0065] After the blur calculation region of the current pixel point is determined, the terminal can calculate the blur pixel value of the current pixel point based on the pixel values of all the pixel points in the blur calculation region, thereby completing the calculation of the blur pixel values of all the pixel points in the image copy and realizing the blur processing of the image copy.

[0066] For each pixel point in the image copy, the blur calculation region of the current pixel point (i.e., the pixel point currently being processed in the image copy) is determined in the image copy, and the blur pixel value of the current pixel point is calculated based on the pixel values of all the pixel points in the blur calculation region, so that the blur pixel value of the current pixel point is jointly influenced by the pixel values of all the pixel points in the blur calculation region. In this way, the blur processing of the image copy is performed, which is conducive to ensuring the blur effect.

[0067] For example, the terminal can calculate the blur pixel value of the current pixel point based on the pixel values of all the pixel points in the blur calculation region in the following specific manner:

[0068] The terminal can first determine the number n of pixel points in the blur calculation region.

[0069] For the case that the current pixel point is located in a non-edge region, the number n of pixel points in the blur calculation region is (2r + 1) 2 ; for the case that the current pixel point is located in an edge region, the number n of pixel points in the blur calculation region can be calculated according to whether the current pixel point is located at one edge or two edges, or the number n of pixel points in the blur calculation region can be directly counted, which is not limited herein.

[0070] After the number of pixel points in the blur calculation region is determined, the terminal can determine the weight corresponding to each pixel point based on the position between each pixel point and the current pixel point in the blur calculation region.

[0071] Exemplarily, the terminal can process each pixel point in the blur calculation region as follows:

[0072] Firstly, the terminal can obtain the coordinate of the current pixel point and the coordinate of the target pixel point, wherein the target pixel point is the pixel point whose weight is currently calculated. For example, please refer to the following table: Figure 5 The current pixel point P(u, v) and the target pixel point P(x, y).

[0073] Then, the terminal can calculate the corresponding weight of the target pixel point P(x, y) by using the following formula:

[0074]

[0075] Wherein, σ represents the weight of the target pixel point, r represents the blur influence parameter, a represents the pixel distance of the target pixel point and the current pixel point in the horizontal coordinate, and b represents the pixel distance of the target pixel point and the current pixel point in the vertical coordinate.

[0076] Thus, the corresponding weight of each target pixel point in the blur calculation region can be calculated.

[0077] After that, the terminal can calculate the blur pixel value of the current pixel point based on the number of pixel points in the blur calculation region, the corresponding weight of each pixel point, and the pixel value of each pixel point.

[0078] Exemplarily, the terminal can use the following formula to perform convolution and normalization calculation on all pixel points in the blur calculation region:

[0079]

[0080] Wherein, P (u,v) represents the blur pixel value of the current pixel point, n represents the number of pixel points in the blur calculation region, P (x,y) represents the pixel value of the target pixel point, and σ (x,y) represents the weight of the target pixel point P (x,y) .

[0081] Thus, the terminal can calculate the blur pixel value of the current pixel point.

[0082] By using the number of pixel points in the blur calculation region, the corresponding weight of each pixel point (determined by the position between each pixel point and the current pixel point), and the pixel value of each pixel point to calculate the blur pixel value of the current pixel point, the influence of all pixel points in the entire blur calculation region on the current pixel point can be considered, so that the blur processing is performed, and the farther the distance from the current pixel point, the lower the weight, so that the processed blur effect is more realistic.

[0083] After the blur pixel value of each pixel point in the image copy after the stretching is calculated, the corresponding blur image can be obtained, as shown in Figure 6

[0084] Then, in order to achieve a better display effect, prevent the saturation of the picture from being too high, too bright, too dark, and the like (for example, a pure red or pure green background can be very eye-catching), the terminal can further superimpose a layer of semi-transparent cover on the blur image after the blur processing.

[0085] For example, the terminal can generate a semi-transparent cover with a size consistent with the size of the interactive interface to be displayed (the transparency of the semi-transparent cover is usually selected to be 30% to 70%). For example, the semi-transparent cover is set to white and the transparency is set to 70%, and such a semi-transparent cover is suitable for a client of a smart phone; or the semi-transparent cover is set to black and the transparency is set to 30%, and such a semi-transparent cover is suitable for a client of a television or a computer. The blur image after the superposition of the semi-transparent cover is used as the background image of the interactive interface to be displayed, as shown in Figure 7

[0086] By designing a white semi-transparent cover with a transparency of 70% or a black semi-transparent cover with a transparency of 30%, different scenarios can be applied. The semi-transparent cover can prevent the saturation of the picture from being too high, too bright, or too dark.

[0087] After the background image of the interactive interface to be displayed is obtained, the terminal can perform step S50.

[0088] Step S50: loading the interface data and the background image of the interactive interface to be displayed, and displaying the interactive interface.

[0089] In this embodiment, the terminal can load the interface data and the background image of the interactive interface to be displayed, and display the interactive interface.

[0090] By obtaining the interface data (containing a plurality of theme images) of the interactive interface to be displayed, determining the target theme image, transforming the size of the image copy corresponding to the target theme image to be consistent with the size of the interactive interface to be displayed, then performing blur processing on the image copy, superimposing a layer of semi-transparent cover, and loading the background image of the interactive interface to be displayed, the interactive interface can be displayed. In this way, the idle resources of the terminal can be utilized, the theme image to be loaded and displayed in the interface can be used, the interface background image can be prepared and displayed by using the blur processing and superimposing the semi-transparent cover, the dynamic rendering of the interface background can be realized, the theme content of the interface can be highlighted, the user experience can be enhanced, and the user satisfaction can be improved.

[0091] It should be noted that the background image provided in this embodiment is not easy to see the actual effect because the color image is avoided, but Figure 2 the actual background is a deep gray blue color close to pure color.​​Figure 4 、 6 , the background of 7 is mainly red and black, and Figure 6 、 7 are fuzzy image backgrounds.

[0092] Referring to Figure 8 , based on the same inventive concept, the embodiment of the present application also provides a dynamic rendering device 10 of an interface background. In the embodiment, the dynamic rendering device 10 of the interface background can include:

[0093] An interface data acquisition unit 11 is configured to acquire interface data of an interactive interface to be displayed, wherein the interface data includes a plurality of theme images, and each theme image is configured to be displayed in the interactive interface after being loaded.

[0094] A target image determination unit 12 is configured to determine a target theme image from the plurality of theme images.

[0095] An image copy processing unit 13 is configured to acquire an image copy corresponding to the target theme image, and transform the size of the image copy to be consistent with the size of the interactive interface to be displayed.

[0096] A background image processing unit 14 is configured to perform blur processing on the image copy, and then superimpose a layer of semi-transparent cover on the blurred image after the blur processing, as a background image of the interactive interface to be displayed.

[0097] A background image display unit 15 is configured to load the interface data and the background image of the interactive interface to be displayed, and display the interactive interface.

[0098] In the embodiment, the image copy processing unit 13 is specifically configured to acquire the size of the interactive interface to be displayed, and stretch the image copy to be consistent with the size of the interactive interface to be displayed.

[0099] In the embodiment, the background image processing unit 14 is specifically configured to perform the following processing on each pixel point in the image copy: determine a blur calculation region of the pixel point in the image copy; calculate a blur pixel value of the pixel point based on the pixel values of all pixel points in the blur calculation region, to realize the blur processing on the image copy.

[0100] In the embodiment, the background image processing unit 14 is specifically configured to acquire a preset blur influence parameter, wherein the blur influence parameter is the maximum distance between a pixel point that has an influence on the pixel point and the pixel point; and determine the blur calculation region of the pixel point based on the blur influence parameter, with the pixel point as the center.

[0101] In this embodiment, the background image processing unit 14 is specifically configured to: determine the number of pixel points in the blur calculation region; determine the weight corresponding to each pixel point in the blur calculation region based on the position between each pixel point and the current pixel point; obtain the pixel value of each pixel point in the blur calculation region; and calculate the blur pixel value of the current pixel point based on the number of pixel points in the blur calculation region, the weight corresponding to each pixel point, and the pixel value of each pixel point.

[0102] In this embodiment, the background image processing unit 14 is specifically configured to: perform the following processing on each pixel point in the blur calculation region: obtain the coordinates of the current pixel point and the coordinates of a target pixel point, wherein the target pixel point is the pixel point for which the weight is currently calculated; and calculate the weight of the target pixel point by using the following formula:

[0103]

[0104] wherein σ represents the weight of the target pixel point, r represents the blur influence parameter, a represents the pixel distance of the target pixel point and the current pixel point in the horizontal coordinate, and b represents the pixel distance of the target pixel point and the current pixel point in the vertical coordinate.

[0105] In this embodiment, the background image processing unit 14 is specifically configured to: perform convolution and normalization calculation on all pixel points in the blur calculation region by using the following formula:

[0106]

[0107] wherein P (u,v) represents the blur pixel value of the current pixel point, n represents the number of pixel points in the blur calculation region, P (x,y) represents the pixel value of the target pixel point, σ (x,y) represents the weight of the target pixel point P (x,y) .

[0108] In this embodiment, the background image processing unit 14 is specifically configured to: generate a semi-transparent cover consistent with the size of the to-be-displayed interactive interface; and set the semi-transparent cover to be white with a transparency of 70%, or set the semi-transparent cover to be black with a transparency of 30%.

[0109] The embodiments of the present application also provide a storage medium, which comprises a stored program, wherein the program controls a device where the storage medium is located to perform the method for dynamically rendering an interface background when the program is running.

[0110] In summary, the embodiment of the present application provides a dynamic rendering method and device of interface background and storage medium, by obtaining interface data (containing a plurality of theme images) of an interactive interface to be displayed, determining a target theme image therefrom, transforming the size of an image copy corresponding to the target theme image to be consistent with the size of the interactive interface to be displayed, then performing blur processing on the image copy, superimposing a layer of translucent cover as a background image of the interactive interface to be displayed, and loading to display the interactive interface. In this way, the idle resources of the terminal can be utilized, the theme image to be loaded and displayed in the interface is used, the interface background image is prepared for display by using the blur processing and superimposition of the translucent cover, the dynamic rendering of the interface background is realized, the theme content of the interface is highlighted, and the user experience is enhanced and the user satisfaction is improved.

[0111] In the embodiments provided in the present application, it should be understood that the disclosed devices and methods can be implemented in other manners. The described device embodiments are merely illustrative. For example, the division of the units is only a logical function division, and there can be another division manner in actual implementation; for example, a plurality of units or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the displayed or discussed coupling or direct coupling or communication connection between the units can be indirect coupling or communication connection through some interfaces, and can be electrical, mechanical or other forms.

[0112] In addition, the units described as separate components can or can not be physically separate, and the components displayed as units can or can not be physical units, that is, they can be located in one place, or can be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purposes of the embodiments of the present application.

[0113] In this paper, the relationship terms such as first and second are only used to distinguish one entity or operation from another entity or operation, and do not necessarily require or imply any such actual relationship or order between the entities or operations.

[0114] The above description is only an embodiment of the present application and is not used to limit the protection scope of the present application. For those skilled in the art, the present application can have various modifications and changes. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application shall be included in the protection scope of the present application.

Claims

1. A method for dynamic rendering of an interface background, characterized in that: include: Acquire interface data of an interactive interface to be displayed, wherein the interface data includes a plurality of theme images, each theme image being used to be displayed in the interactive interface after being loaded; determining a target subject image from a plurality of subject images; Obtaining an image copy corresponding to the target theme image, and transforming the size of the image copy to be consistent with the size of the interactive interface to be displayed; Blurring the image copy, and overlaying a semi-transparent cover on the blurred image as a background image of the interactive interface to be displayed; Loading the interface data and background image of the interactive interface to be displayed, and displaying the interactive interface; Blurring the image copy, including: For each pixel in the image copy, perform the following processing: Determining a fuzzy calculation area of ​​the pixel in the image copy; Calculating a fuzzy pixel value of the pixel based on the pixel values ​​of all pixels in the fuzzy calculation area, thereby blurring the image copy; Determining a fuzzy calculation area of ​​the pixel point in the image copy includes: Obtaining a preset blur influence parameter, wherein the blur influence parameter is the maximum distance between the pixel point and the pixel point that affects the pixel point; Based on the fuzzy influence parameter, the fuzzy calculation area of ​​the pixel point is determined with the pixel point as the center; Calculating the fuzzy pixel value of the pixel based on the pixel values ​​of all pixels in the fuzzy calculation area includes: Determining the number of pixels within the fuzzy calculation area; Determining a weight corresponding to each pixel based on a position between each pixel and the current pixel in the fuzzy calculation area; Obtaining the pixel value of each pixel in the fuzzy calculation area; Calculate the fuzzy pixel value of the pixel based on the number of pixels in the fuzzy calculation area, the weight corresponding to each pixel, and the pixel value of each pixel; Determining a weight corresponding to each pixel point based on a position between each pixel point and the current pixel point within the fuzzy calculation area includes: The following processing is performed on each pixel in the fuzzy calculation area: Get the coordinates of the current pixel and the target pixel, where the target pixel is the pixel currently calculating the weight. The weight of the target pixel is calculated using the following formula: Wherein, σ represents the weight of the target pixel, r represents the blur influence parameter, a represents the pixel distance between the target pixel and the current pixel on the horizontal axis, and b represents the pixel distance between the target pixel and the current pixel on the vertical axis.

2. The method for dynamic rendering of interface background according to claim 1, characterized in that: Changing the size of the image copy to be consistent with the size of the interactive interface to be displayed includes: Obtaining the size of the interactive interface to be displayed; The image copy is stretched to a size consistent with the size of the interactive interface to be displayed.

3. The dynamic rendering method of the interface background according to claim 1, characterized in that: Calculating a fuzzy pixel value of a pixel based on the number of pixels in the fuzzy calculation area, the weight corresponding to each pixel, and the pixel value of each pixel includes: The following formula is used to perform convolution and normalization calculation on all pixels in the blur calculation area: Among them, P (u,v) represents the fuzzy pixel value of the pixel point, n represents the number of pixels in the fuzzy calculation area, P (x,y) Represents the pixel value of the target pixel, σ (x,y) Represents the target pixel P (x,y) The weight of .

4. The method for dynamic rendering of interface background according to claim 2, characterized in that: Overlay a semi-transparent mask on the blurred image after blurring, including: generating a semi-transparent cover having the same size as the interactive interface to be displayed; The semi-transparent cover is set to white with a transparency of 70%, or the semi-transparent cover is set to black with a transparency of 30%.

5. A dynamic rendering device for interface background, characterized in that: include: An interface data acquisition unit, configured to acquire interface data of an interactive interface to be displayed, wherein the interface data includes a plurality of theme images, each theme image being used to be displayed in the interactive interface after being loaded; a target image determining unit, configured to determine a target subject image from a plurality of subject images; An image copy processing unit, configured to obtain an image copy corresponding to the target subject image, and convert the size of the image copy to be consistent with the size of the interactive interface to be displayed; A background image processing unit, configured to perform blurring on the image copy, and then superimpose a semi-transparent cover on the blurred image to serve as a background image for the interactive interface to be displayed; A background image display unit, configured to load the interface data and background image of the interactive interface to be displayed, and display the interactive interface; The background image processing unit is specifically configured to perform the following processing on each pixel in the image copy: determining a fuzzy calculation area for the pixel in the image copy; and calculating a fuzzy pixel value for the pixel based on the pixel values ​​of all pixels in the fuzzy calculation area, thereby blurring the image copy. The background image processing unit is specifically configured to: obtain a preset blur influence parameter, wherein the blur influence parameter is the maximum distance between the pixel point and the pixel point that has an influence on the pixel point; and determine the blur calculation area of ​​the pixel point based on the blur influence parameter and with the pixel point as the center; The background image processing unit is specifically configured to: determine the number of pixels within the fuzzy calculation area; determine the weight corresponding to each pixel based on the position between each pixel and the current pixel within the fuzzy calculation area; obtain the pixel value of each pixel within the fuzzy calculation area; and calculate the fuzzy pixel value of the current pixel based on the number of pixels within the fuzzy calculation area, the weight corresponding to each pixel, and the pixel value of each pixel; The background image processing unit is specifically configured to perform the following processing on each pixel in the fuzzy calculation area: obtain the coordinates of the pixel and the coordinates of the target pixel, where the target pixel is the pixel for which the weight is currently calculated; and calculate the weight of the target pixel using the following formula: Wherein, σ represents the weight of the target pixel, r represents the blur influence parameter, a represents the pixel distance between the target pixel and the current pixel on the horizontal axis, and b represents the pixel distance between the target pixel and the current pixel on the vertical axis.

6. A storage medium, characterized in that The storage medium includes a stored program, wherein when the program is running, the device where the storage medium is located is controlled to execute the dynamic rendering method of the interface background according to any one of claims 1 to 4.

Images