WO2022246985A1 - 一种页面显示更新方法、装置、电子设备及存储介质 - Google Patents

一种页面显示更新方法、装置、电子设备及存储介质 Download PDF

Info

Publication number
WO2022246985A1
WO2022246985A1 PCT/CN2021/106306 CN2021106306W WO2022246985A1 WO 2022246985 A1 WO2022246985 A1 WO 2022246985A1 CN 2021106306 W CN2021106306 W CN 2021106306W WO 2022246985 A1 WO2022246985 A1 WO 2022246985A1
Authority
WO
WIPO (PCT)
Prior art keywords
color
cover
preset
main color
page
Prior art date
Application number
PCT/CN2021/106306
Other languages
English (en)
French (fr)
Inventor
邱颖佳
刘超鹏
Original Assignee
北京字跳网络技术有限公司
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by 北京字跳网络技术有限公司 filed Critical 北京字跳网络技术有限公司
Priority to US17/601,240 priority Critical patent/US20240095973A1/en
Priority to BR112021019870A priority patent/BR112021019870A2/pt
Publication of WO2022246985A1 publication Critical patent/WO2022246985A1/zh

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/001—Texturing; Colouring; Generation of texture or colour
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/40—Information retrieval; Database structures therefor; File system structures therefor of multimedia data, e.g. slideshows comprising image and additional audio data
    • G06F16/44—Browsing; Visualisation therefor
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/40—Information retrieval; Database structures therefor; File system structures therefor of multimedia data, e.g. slideshows comprising image and additional audio data
    • G06F16/43—Querying
    • G06F16/435—Filtering based on additional data, e.g. user or group profiles
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/953—Querying, e.g. by the use of web search engines
    • G06F16/9535—Search customisation based on user profiles and personalisation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T11/00—2D [Two Dimensional] image generation
    • G06T11/40—Filling a planar surface by adding surface attributes, e.g. colour or texture
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/90—Determination of colour characteristics
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T2200/00—Indexing scheme for image data processing or generation, in general
    • G06T2200/24—Indexing scheme for image data processing or generation, in general involving graphical user interfaces [GUIs]

Definitions

  • the embodiments of the present disclosure relate to the field of computer technology, and in particular, to a page display updating method, device, electronic equipment, and storage medium.
  • the rendering effect such as the color of the display interface can be customized by setting the background color, theme color or other configuration parameters to customize the rendering effect of the interactive interface. If the user does not actively change the color parameters, the color of the interface will not change, and it is not related to the user's operation on the interface.
  • Embodiments of the present disclosure provide a page display update method, device, electronic device, and storage medium, which can enable the rendering effect of the display interface of the application program to be updated according to the interaction between the user and the display interface, and enhance the interaction and perception of the user and the product. .
  • an embodiment of the present disclosure provides a page display update method, including:
  • the cover of the preset song list in the song recommendation page is updated according to the target main color.
  • the embodiment of the present disclosure also provides a device for updating page display, including:
  • the image obtaining module is used to obtain the cover image of the album to which the currently playing song belongs in response to the user's page refresh operation;
  • a main color extraction module used to extract the target main color of the cover picture
  • a display update module configured to update the cover of the preset song list on the song recommendation page according to the target main color.
  • an embodiment of the present disclosure further provides an electronic device, and the electronic device includes:
  • processors one or more processors
  • the one or more processors are made to implement the page display updating method described in any one of the embodiments of the present disclosure.
  • the embodiments of the present disclosure further provide a storage medium containing computer-executable instructions, the computer-executable instructions are used to perform the page display described in any one of the embodiments of the present disclosure when executed by a computer processor update method.
  • a computer program product including computer program instructions, the computer program instructions cause a computer to execute the method for updating page display as described in any one of the embodiments of the present disclosure.
  • a computer program which, when running on a computer, causes the computer to execute the method for updating page display as described in any one of the embodiments of the present disclosure.
  • the technical solution of the embodiment of the present disclosure obtains the cover picture of the album to which the currently playing song belongs when the user performs a refresh operation on the music player or other application interface that can play music; and then extracts the target main color from the cover picture , update the cover of the preset song list on the song recommendation page according to the target main color, thereby changing the rendering effect of the refreshed page.
  • the technical solution of the embodiment of the present disclosure solves the problems in the prior art that the setting mode of the rendering effect of the page display is single and the flexibility is low.
  • the interaction of the display interface updates the rendering effect of the display interface to enhance the interaction and perception between the user and the product.
  • FIG. 1 is a schematic flowchart of a page display updating method provided by Embodiment 1 of the present disclosure
  • FIG. 2 is a schematic diagram of a current rendering effect of a song recommendation page provided by Embodiment 1 of the present disclosure
  • FIG. 3 is a schematic diagram of a rendering effect after an update of a song recommendation page provided by Embodiment 1 of the present disclosure
  • FIG. 4 is a schematic flowchart of a page display updating method provided in Embodiment 2 of the present disclosure
  • FIG. 5 is a schematic flowchart of a method for updating page display provided by Embodiment 3 of the present disclosure
  • FIG. 6 is a schematic diagram of determining a target main color gradation scheme provided by Embodiment 3 of the present disclosure.
  • FIG. 7 is a schematic diagram of a corner view provided by Embodiment 3 of the present disclosure.
  • Fig. 8 is a schematic diagram of the formation process of a daily recommended song list cover provided by Embodiment 3 of the present disclosure.
  • FIG. 9 is a schematic diagram of a cover formation process of a theme song recommendation playlist provided by Embodiment 3 of the present disclosure.
  • FIG. 10 is a schematic diagram of a cover formation process of a song list recommended by an artist radio station provided by Embodiment 3 of the present disclosure.
  • FIG. 11 is a schematic structural diagram of a page display updating device provided in Embodiment 4 of the present disclosure.
  • FIG. 12 is a schematic structural diagram of an electronic device provided by Embodiment 5 of the present disclosure.
  • the term “comprise” and its variations are open-ended, ie “including but not limited to”.
  • the term “based on” is “based at least in part on”.
  • the term “one embodiment” means “at least one embodiment”; the term “another embodiment” means “at least one further embodiment”; the term “some embodiments” means “at least some embodiments.” Relevant definitions of other terms will be given in the description below.
  • Fig. 1 is a schematic flow diagram of a method for updating page display provided by Embodiment 1 of the present disclosure.
  • This embodiment of the present disclosure is applicable to the situation of updating the display rendering effect of the interactive interface according to the interaction between the user and the application interface, especially applicable to the music playing platform. , combining the situation of updating the rendering effect of the interactive interface in combination with the music being played in the music player or other platforms that can play music.
  • the method can be executed by a page display updating device, which can be implemented in the form of software and/or hardware, and which can be configured in an electronic device, such as a mobile terminal or a server device.
  • the page display update method provided by this embodiment includes:
  • the user refreshes the interactive interface usually only the content displayed on the interactive interface is refreshed without changing the rendering effect of the interface.
  • the default interface displayed is the song recommendation page, which contains multiple song recommendation playlists, such as daily recommended collections, different music list recommended collection playlists, according to Artist music radio playlists classified by artists and singers, recommended playlists classified by music application scenarios, and recommended playlists classified by music genres. These playlists all use a picture associated with the music recommended in the playlist as the cover.
  • the cover of the song list can be used as the entrance of the song list.
  • the client display interface can enter the recommended song list of the corresponding song list for the user to browse or choose to play.
  • the song list cover can also be used only as a display screen showing the style or characteristics of the songs in the play list for users to watch.
  • the recommended song list displayed on the song recommendation page may change, showing recommended song lists that have not been displayed before, or individual song recommendations The content of the songs recommended in the playlist has been updated. Normally, there will be no transformation on the rendering of the song recommendation page.
  • a music player or other client that can play music is playing a song while the user triggers the user interaction page refresh operation by pulling down or clicking on the refresh function control, it will automatically obtain the currently playing song.
  • the cover image of the album to which the song belongs is used to update the rendering effect of the refreshed page according to the color of the cover or image content, so that the rendering effect can display or highlight the music atmosphere currently being played, making it easier for users to immerse themselves in For music, enhance the interaction between users and the music player display interface.
  • the average color selection method can be used, and the average color value of all pixel points or the pixel point color value of the specified area in the cover picture can be used as the target dominant color, or the cluster analysis method can be used to extract color as the primary color of the target.
  • the target dominant color can also be obtained by inputting the cover picture into the color extraction neural network model generated according to certain rules, and determining the target dominant color by the model output.
  • the cover of the preset song list usually contains some character images, cartoon patterns or other pattern patterns, and text, which also has a certain sense of hierarchy as a whole. This is due to the fact that covers are usually composited from multiple layers. Among the multiple layers of the composite cover, there is a background color layer that forms the main color in the cover. In this way, the extracted target main color can be used as the new color of the background color layer, and the new background color layer can be combined with other layers in the current cover of the preset song list except the background color layer to form a new cover. So that the rendering effect of the refreshed page is updated.
  • the preset playlist may be a daily song recommendation collection playlist, an artist radio song recommendation playlist, or a theme song recommendation playlist, and other playlists. Attribute information such as the number of layers, content layout, and color scheme of the cover of each playlist can correspond to different configuration strategies. When the color of the background color layer of each playlist cover is updated, the rendering effect of the cover will be updated.
  • the background color layer can be a solid color layer determined according to the main color of the target, or a gradient color layer.
  • the technical solution of the embodiment of the present disclosure can obtain the cover picture of the album to which the currently playing song belongs when the user performs a refresh operation on the music player or other application program interface that can play music; and then extract the target theme from the cover picture. Color, update the cover of the preset song list on the song recommendation page according to the target main color, thereby changing the rendering effect of the interactive page that triggers the refresh operation.
  • the technical solution of the embodiment of the present disclosure solves the problems in the prior art that the setting mode of the rendering effect of the page display is single and the flexibility is low.
  • the interaction of the display interface updates the rendering effect of the display interface to enhance the interaction and perception between the user and the product.
  • the extracted target main color can also be used as a new background color, so as to update the background color of the refreshed page. Expanding the visual display range of the extracted target main color can make it easier for the user to feel the overall atmosphere or artistic conception of the currently playing song, and enhance the user's experience. In addition, it is also possible to change the color of the function buttons on the refreshed page according to the main color of the target, such as the play button and other function buttons.
  • a schematic diagram of the current rendering effect of the song recommendation page is exemplarily shown, in which the covers of recommended song lists such as daily recommendations, golden hits charts, Tianwang Radio, soprano collections, and theme playlists are listed.
  • the rendering effect of the page can be updated.
  • the update result please refer to a schematic diagram of the rendering effect after the update of the song recommendation page provided in FIG. 3 .
  • the daily recommended song list is a recommended song list for preset songs
  • the fill color of the cover of the play list is a dotted fill, indicating the updated cover of the play list according to the extracted target main color.
  • the overall background of the song recommendation page has also been updated. Such an effect can increase the possibility of user interaction with the music player interface, and give the user a new sense of experience. What needs to be explained here is that after the page is refreshed, the song recommendation playlist can display the song recommendation playlist that is not displayed, or still display the song recommendation playlist in the current song recommendation page.
  • the embodiments of the present disclosure may be combined with various alternative solutions in the page display updating method provided in the foregoing embodiments.
  • the page display updating method provided in this embodiment provides an optimal target main color extraction method, which can optimize the rendering effect of the cover of the preset song list.
  • FIG. 4 is a schematic flowchart of a page display updating method provided by Embodiment 2 of the present disclosure. As shown in Figure 4, the page display update method provided in this embodiment includes:
  • the calculated Most of the main color distribution of the target is concentrated in yellow. After the page is refreshed, the color distribution of the rendering effect may be uneven, which is inconsistent with the main color of visual perception. Therefore, in this embodiment, an algorithm for calculating the target dominant color of the album cover image is further proposed.
  • the color values of the pixels may be RGB values of the three primary colors.
  • a plurality of preset candidate main colors can be the candidate main colors set according to commonly used colors, or the colors close to the appearance colors that can be provided by the music player are used as the preset candidate main colors, for example, red, orange, yellow, Green, cyan, blue, purple and pink.
  • the color space refers to HSV (Hue, Saturation, Value), which can convert the RGB value of a pixel into the HSV value corresponding to the color space, and then calculate the HSV value of each pixel and each preset candidate main color the geometric distance between them.
  • the preset number of pixels can be extracted equidistantly from the cover picture according to the size of the cover picture, so as to reduce the amount of calculation.
  • a pixel is extracted every three pixels, and the geometric distance between the extracted pixel and the preset candidate main color in the color space is calculated.
  • the pixel spacing can be determined according to the size of the cover picture. If the distance between selected pixels is fixed, the number of selected pixels can be further determined according to the size of the cover picture.
  • a distance value consistent with the number of preset candidate main colors can be obtained. It can be understood that the closer the pixel color value and the candidate main color are in the color space, the closer the color between the two is, and a pending main color can be confirmed for each pixel.
  • the preset candidate main color selected as the most times of undetermined main colors can be used as the target main color, so that the overall visual main color can be well extracted. color.
  • the product of the preset weighted values corresponding to the candidate main colors may be an empirical value that can improve the visual effect, or a personalized parameter value set according to personal preference for a certain candidate main color.
  • the technical solution of the embodiment of the present disclosure obtains the cover picture of the album to which the currently playing song belongs when the user performs a refresh operation on the music player or other application interface that can play music; and then extracts the target main color from the cover picture , update the cover of the preset song list in the song recommendation page according to the target main color, thereby changing the rendering effect of the refreshed page.
  • a method for extracting the target main color of the cover picture is also proposed, based on pixel points The geometric distance between the color value and the candidate main color in the color space determines the target candidate main color.
  • the interaction of the display interface updates the rendering effect of the display interface to enhance the interaction and perception between the user and the product.
  • the problem that the extracted main color is always biased towards yellow has been improved, so that the distribution of the obtained main color is more uniform, and it is more in line with the main color of visual perception, and the rendering effect after the page is updated is optimized.
  • the embodiments of the present disclosure may be combined with various alternative solutions in the page display updating method provided in the foregoing embodiments.
  • the page display updating method provided in this embodiment further illustrates the specific process of updating the cover of the preset song list according to the target main color.
  • FIG. 5 is a schematic flowchart of a method for updating page display provided by Embodiment 3 of the present disclosure. As shown in Figure 5, the page display update method provided in this embodiment includes:
  • the cover background color layer of the preset song list is set as a gradient color layer
  • the process of determining the gradient scheme according to the target main color can refer to the schematic diagram shown in FIG. 6 .
  • the original image column refers to the obtained cover image of the album currently playing the song
  • the color tone column is the target main color corresponding to each cover image (including Pink pink, Purple purple, Indigo blue purple, Blue blue, Green green, Yellow yellow, Orange orange, Red red).
  • the random column under the hue means that within the hue H interval corresponding to the main color of the target, a value can be randomly selected as the H value, and then the pixel in the upper left corner and the lower right corner of the gradient color layer can be determined and updated according to the preset strategy.
  • Saturation value (S value) and brightness value (B value) to generate an updated gradient color layer.
  • the gradient color layer may be updated according to the saturation value (S value) and brightness value (B value) of the upper right pixel point and the lower left pixel point.
  • SB values 8 combinations of SB values are listed, 1 means the S value is 40, and the B value is 100; 2 means the S value is 50, and the B value is 100; 3 means the S value is 60, and the B value is 90; 4 means S value is 70 and B value is 80; 5 means S value is 80 and B value is 70; 6 means S value is 90 and B value is 60; 7 means S value is 100 and B value is 50; 8 means The S value is 100 and the B value is 40.
  • the calculated and determined target main color of the cover picture is black, one of the preset candidate main colors is randomly selected as the corresponding target main color.
  • updating the saturation value (S value) and brightness value (B value) of the upper left corner pixel point and the lower right corner pixel point in the gradient color layer can randomly determine a set of combined values, or can be based on the preset song list.
  • Category OK For example, the theme radio song recommendation playlist gradually changes from the upper left corner to the lower right corner, and the saturation value (S value) and brightness value (B value) of the pixel point in the upper left corner and the pixel point in the lower right corner are respectively the 3rd group and the 3rd group 6 sets of values.
  • the daily recommended song list gradually changes from the lower left corner to the upper right corner, and the saturation value (S value) and brightness value (B value) of the pixels in the lower left corner and the upper right corner are the values of the first group and the sixth group respectively.
  • the cover of the preset playlist will be updated.
  • layer replacement is equivalent to recombining the updated gradient color layer with other set layers to generate a new cover.
  • the number of layers and the content layout of each layer are different for different categories of playlist covers.
  • the cover can be composed of three parts.
  • the first layer is a gradient background layer
  • the second layer is a corner layer, that is, at the three corners of the layer
  • three The three album covers are spliced together, and the three covers can be selected from the album covers with a certain number of plays. For example, for the album with the top 10,000 plays in each country, the three album pictures are rotated and stitched together to get the corner picture. , you can refer to the schematic diagram provided in FIG. 7 .
  • the synthesis process and effect of the cover of the daily song recommendation collection can refer to the content shown in FIG. 8 .
  • the cover image can be composed of three parts.
  • the first layer is the gradient color background layer.
  • the second layer is the texture template layer, which is a preset fixed picture.
  • the third layer is the cropped layer after adding color cast to the original image.
  • the original image is the cover image uploaded by the operation user.
  • these three layers are superimposed in sequence, and then the words are spelled to get the final cover of the theme song recommended playlist.
  • the specific synthesis process and effect refer to the content shown in FIG. 9 .
  • the artist radio station corresponds to the artist.
  • the cover image consists of four parts.
  • the first layer is a gradient color background.
  • the H value can extract the target main color in the preset picture.
  • the HSB value of the pixel in the lower right corner is (200, 60, 90), and the HSB value in the upper left corner is (220, 40, 100);
  • the second layer is the texture layer, which can be directly downloaded and used as a shadow template image to increase the layering of the image;
  • the third layer is the left and right artist layers, which can be combined by the preset color cast template image and artist image. Scaled and cropped.
  • the fourth layer is the main artist's portrait. After zooming, it is cut into a shape that matches the left and right artist pictures, and superimposed on the previously generated layer. Finally, the text is spliced to form the final cover.
  • the main artist is the singer or creator of the songs recommended by the artist radio station. For example, if all the songs recommended by an artist radio station are songs by singers with the surname Wang, the singer with the surname Wang is the main artist.
  • the left and right artist images are randomly matched images of singers whose singing styles are similar to the main artist. For the specific synthesis process and effect, please refer to the content shown in FIG. 10 .
  • the technical solution of the embodiment of the present disclosure obtains the cover picture of the album to which the currently playing song belongs when the user performs a refresh operation on the music player or other application interface that can play music; and then extracts the target main color from the cover picture , update the cover of the preset playlist on the song recommendation page according to the target main color, thereby changing the rendering effect of the song recommendation page, and follow the update process of the playlist cover described in different types of playlists.
  • the technical solution of the embodiment of the present disclosure solves the problems in the prior art that the setting mode of the rendering effect of the page display is single and the flexibility is low.
  • the interaction of the display interface updates the rendering effect of the display interface to enhance the interaction and perception between the user and the product.
  • the page display update method provided by the embodiment of the present disclosure and the page display update method provided by the above-mentioned embodiment belong to the same disclosed concept, and the technical details not described in detail in this embodiment can be referred to the above-mentioned embodiment, and the same technical features are described in this embodiment Example has the same beneficial effect as in the above-mentioned embodiment.
  • the update process of the cover image in each of the above embodiments can be completed at the server, and then sent to the client, and the cover image can be rendered and displayed directly on the client side; display; or, by the two parties to cooperate to complete.
  • the specific execution strategy may be determined according to the data processing efficiency during the execution of the embodiment.
  • FIG. 11 is a schematic structural diagram of a page display updating device provided by Embodiment 4 of the present disclosure.
  • the page display updating device provided in this embodiment is suitable for updating the display rendering effect of the interactive interface according to the interaction between the user and the application interface.
  • the device for updating page display includes: a picture acquisition module 410 , a main color extraction module 420 and a display update module 430 .
  • the picture acquisition module 410 is used to respond to the user's page refresh operation to obtain the cover picture of the album to which the currently playing song belongs; the main color extraction module 420 is used to extract the target main color of the cover picture; the display update module 430, It is used to update the cover of the preset song list in the refreshed page according to the target main color.
  • the technical solution of the embodiment of the present disclosure obtains the cover picture of the album to which the currently playing song belongs when the user performs a refresh operation on the music player or other application interface that can play music; and then extracts the target main color from the cover picture , update the cover of the preset song list on the song recommendation page according to the target main color, thereby changing the rendering effect of the refreshed page.
  • the technical solution of the embodiment of the present disclosure solves the problems in the prior art that the setting mode of the rendering effect of the page display is single and the flexibility is low, and enables the rendering effect of the display interface of the application to be linked with the interaction of the user.
  • the interaction of the display interface updates the rendering effect of the display interface to enhance the interaction and perception between the user and the product.
  • the main color extraction module 420 specifically includes:
  • the pixel selection sub-module is used to extract a preset number of pixels in the cover picture according to preset rules, and calculate the geometrical relationship between the extracted color value of each pixel and a plurality of preset candidate main colors in the color space. distance;
  • the undetermined main color selection submodule is used for each extracted pixel, using the preset candidate main color corresponding to the minimum distance value in the geometric distance as the undetermined main color of the pixel;
  • the target dominant color determination sub-module is used to count the number of times each preset candidate dominant color is selected as the pending dominant color, and use the preset candidate dominant color selected as the pending dominant color the most times as the target dominant color.
  • the pixel selection submodule is specifically used for:
  • the preset number of pixels is taken out equidistantly from the cover picture.
  • the target main color determination submodule is specifically used for:
  • the numerical values of the products corresponding to the preset candidate main colors are sorted, and the preset candidate main color corresponding to the maximum value in the sorting result is used as the target main color.
  • the page display updating device also includes a background color updating module:
  • It is used for updating the background color of the refreshed page with the target main color as a new background color, and/or changing the color of the function buttons in the refreshed page according to the target main color.
  • the display update module 430 includes:
  • a gradient color layer generation submodule used to determine an updated gradient color layer that matches the cover size of the preset song list according to the target main color
  • the cover update sub-module is used to replace the gradient background layer in the current cover of the preset playlist with the updated gradient color layer, and synthesize a new cover of the preset playlist.
  • the gradient color layer generating submodule is specifically used for:
  • the updated gradient color layer is generated according to the hue value and the saturation value and brightness value of the upper left pixel point and the lower right pixel point in the updated gradient color layer.
  • the cover update submodule is also used for:
  • the cover picture is replaced with the main cover picture in the album cover layer in the current cover, wherein the main cover picture is the album cover The cover image displayed in the center of the layer.
  • the preset playlists include daily song recommendation collection playlists, artist radio song recommendation playlists, and theme song recommendation playlists.
  • the page display updating device provided in the embodiments of the present disclosure can execute the page display updating method provided in any embodiment of the present disclosure, and has corresponding functional modules and beneficial effects for executing the method.
  • FIG. 12 it shows a schematic structural diagram of an electronic device (such as a terminal device or a server in FIG. 12 ) 500 suitable for implementing an embodiment of the present disclosure.
  • the terminal equipment in the embodiment of the present disclosure may include but not limited to such as mobile phone, notebook computer, digital broadcast receiver, PDA (personal digital assistant), PAD (tablet computer), PMP (portable multimedia player), vehicle terminal (such as mobile terminals such as car navigation terminals) and fixed terminals such as digital TVs, desktop computers and the like.
  • the electronic device shown in FIG. 12 is only an example, and should not limit the functions and application scope of the embodiments of the present disclosure.
  • the electronic device 500 may include a processing device (such as a central processing unit, a graphics processing unit, etc.) 501, which may be stored in a read-only memory (Read-Only Memory, ROM) 502 according to a program 506 is loaded into the program in the random access memory (Random Access Memory, RAM) 503 to execute various appropriate actions and processes.
  • a processing device such as a central processing unit, a graphics processing unit, etc.
  • ROM Read-Only Memory
  • RAM Random Access Memory
  • various programs and data necessary for the operation of the electronic device 500 are also stored.
  • the processing device 501, ROM 502, and RAM 503 are connected to each other through a bus 504.
  • An input/output (I/O) interface 505 is also connected to the bus 504 .
  • the following devices can be connected to the I/O interface 505: input devices 506 including, for example, a touch screen, touchpad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; including, for example, a liquid crystal display (LCD), speaker, vibration an output device 507 such as a computer; a storage device 508 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 509.
  • the communication means 509 may allow the electronic device 500 to perform wireless or wired communication with other devices to exchange data. While FIG. 12 shows electronic device 500 having various means, it is to be understood that implementing or having all of the means shown is not a requirement. More or fewer means may alternatively be implemented or provided.
  • embodiments of the present disclosure include a computer program product, which includes a computer program carried on a non-transitory computer readable medium, where the computer program includes program code for executing the method shown in the flowchart.
  • the computer program may be downloaded and installed from a network via communication means 509 , or from storage means 506 , or from ROM 502 .
  • the processing device 501 executes the above-mentioned functions defined in the page display updating method of the embodiment of the present disclosure.
  • the electronic device provided by the embodiment of the present disclosure and the page display update method provided by the above embodiment belong to the same disclosed concept, and the technical details not described in detail in this embodiment can be referred to the above embodiment, and this embodiment has the same features as the above embodiment beneficial effect.
  • An embodiment of the present disclosure provides a computer storage medium, on which a computer program is stored, and when the program is executed by a processor, the method for updating page display provided by the foregoing embodiments is implemented.
  • the above-mentioned computer-readable medium in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two.
  • a computer readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof.
  • Computer-readable storage media may include, but are not limited to, electrical connections with one or more wires, portable computer diskettes, hard disks, random access memory (RAM), read-only memory (ROM), erasable Programmable Read-Only Memory (Erasable Programmable Read-Only Memory, EPROM) or flash memory (FLASH), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination of the above.
  • 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, apparatus, or device.
  • a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave carrying computer-readable program code therein. Such propagated data signals may take many forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the foregoing.
  • a computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium, which can transmit, propagate, or transmit a program for use by or in conjunction with an instruction execution system, apparatus, or device .
  • Program code embodied on a computer readable medium may be transmitted by any appropriate medium, including but not limited to wires, optical cables, RF (radio frequency), etc., or any suitable combination of the above.
  • the client and the server can communicate using any currently known or future network protocols such as HTTP (HyperText Transfer Protocol, Hypertext Transfer Protocol), and can communicate with digital data in any form or medium
  • HTTP HyperText Transfer Protocol
  • the communication eg, communication network
  • Examples of communication networks include local area networks (“LANs”), wide area networks (“WANs”), internetworks (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed network of.
  • the above-mentioned computer-readable medium may be included in the above-mentioned electronic device, or may exist independently without being incorporated into the electronic device.
  • the above-mentioned computer-readable medium carries one or more programs, and when the above-mentioned one or more programs are executed by the electronic device, the electronic device:
  • the cover of the preset song list in the song recommendation page is updated according to the target main color.
  • Computer program code for carrying out operations of the present disclosure may be written in one or more programming languages, or combinations thereof, including but not limited to object-oriented programming languages—such as Java, Smalltalk, C++, and Includes conventional procedural programming languages - such as the "C" language or similar programming languages.
  • the program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server.
  • the remote computer can be connected to the user computer through any kind of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computer (such as through an Internet service provider). Internet connection).
  • LAN local area network
  • WAN wide area network
  • Internet service provider such as AT&T, MCI, Sprint, EarthLink, MSN, GTE, etc.
  • each block in a flowchart or block diagram may represent a module, program segment, or portion of code that contains one or more logical functions for implementing specified executable instructions.
  • the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or they may sometimes be executed in the reverse order, depending upon the functionality involved.
  • each block of the block diagrams and/or flowchart illustrations, and combinations of blocks in the block diagrams and/or flowchart illustrations can be implemented by a dedicated hardware-based system that performs the specified functions or operations , or may be implemented by a combination of dedicated hardware and computer instructions.
  • the units involved in the embodiments described in the present disclosure may be implemented by software or by hardware. Wherein, the names of the units and modules do not constitute limitations on the units and modules themselves under certain circumstances, for example, the data generating module may also be described as a "video data generating module".
  • exemplary types of hardware logic components include: Field Programmable Gate Arrays (Field Programmable Gate Arrays, FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (Application Specific Standard Parts, ASSP), System on Chip (System on Chip, SOC), Complex Programmable Logic Device (CPLD), etc.
  • a machine-readable medium may be a tangible medium that may contain or store a program for use by or in conjunction with an instruction execution system, apparatus, or device.
  • a machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium.
  • a machine-readable medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination of the foregoing.
  • machine-readable storage media would include one or more wire-based electrical connections, portable computer discs, hard drives, random access memory (RAM), read only memory (ROM), erasable programmable read only memory (EPROM or flash memory), optical fiber, compact disk read only memory (CD-ROM), optical storage, magnetic storage, or any suitable combination of the foregoing.
  • RAM random access memory
  • ROM read only memory
  • EPROM or flash memory erasable programmable read only memory
  • CD-ROM compact disk read only memory
  • magnetic storage or any suitable combination of the foregoing.
  • Example 1 provides a page display update method, the method includes:
  • the cover of the preset song list in the refreshed page is updated according to the target main color.
  • Example 2 provides a page display update method, which also includes:
  • Said extracting the target main color of said cover picture comprises:
  • the number of times each preset candidate main color is selected as the undetermined main color is counted, and the preset candidate main color selected as the undetermined main color the most times is used as the target main color.
  • Example 3 provides a page display update method, which also includes:
  • the step of extracting a preset number of pixels in the cover image according to preset rules includes:
  • the preset number of pixels is taken out equidistantly from the cover picture.
  • Example 4 provides a page display update method, which further includes:
  • the counting of the number of times each preset candidate main color is selected as the undetermined main color, and the preset candidate main color selected as the undetermined main color the most times as the target main color includes:
  • the numerical values of the products corresponding to the preset candidate main colors are sorted, and the preset candidate main color corresponding to the maximum value in the sorting result is used as the target main color.
  • Example 5 provides a page display update method, which also includes:
  • target main color as a new background color to update the background color of the refreshed page, and/or change the color of the function buttons on the refreshed page according to the target main color.
  • Example 6 provides a page display update method, which also includes:
  • the updating the cover of the preset song list in the refreshed page according to the target main color includes:
  • the updated gradient color layer replaces the gradient background layer in the current cover of the preset playlist to synthesize a new cover of the preset playlist.
  • Example 7 provides a page display update method, which also includes:
  • the updated gradient color layer is generated according to the hue value and the saturation value and brightness value of the upper left pixel point and the lower right pixel point in the updated gradient color layer.
  • Example 8 provides a page display update method, which also includes:
  • the method After making the updated gradient color layer replace the gradient background layer in the current cover of the preset song list, the method also includes:
  • the cover picture is replaced with the main cover picture in the album cover layer in the current cover, wherein the main cover picture is the album cover The cover image displayed in the center of the layer.
  • Example 9 provides a page display update method, which also includes:
  • the preset playlists include daily song recommendation collection playlists, artist radio song recommendation playlists and theme song recommendation playlists.
  • Example 10 provides a device for updating page display, including:
  • the image obtaining module is used to obtain the cover image of the album to which the currently playing song belongs in response to the user's page refresh operation;
  • a main color extraction module used to extract the target main color of the cover image
  • the display update module is used to update the cover of the preset song list on the refreshed page according to the target main color.
  • Example Eleven provides an apparatus for updating page display, further comprising:
  • the main color extraction module specifically includes:
  • the pixel selection sub-module is used to extract a preset number of pixels in the cover picture according to preset rules, and calculate the geometrical relationship between the extracted color value of each pixel and a plurality of preset candidate main colors in the color space. distance;
  • the undetermined dominant color selection sub-module is used for, for each extracted pixel point, using the preset candidate dominant color corresponding to the minimum distance value in the geometric distance as the undetermined dominant color of the pixel point;
  • the target dominant color determination sub-module is used to count the number of times each preset candidate dominant color is selected as the pending dominant color, and use the preset candidate dominant color selected as the pending dominant color the most times as the target dominant color.
  • Example 12 provides an apparatus for updating page display, further comprising:
  • the pixel selection submodule is specifically used for:
  • the preset number of pixels is taken out equidistantly from the cover picture.
  • Example 13 provides an apparatus for updating page display, further comprising:
  • the target main color determination submodule is specifically used for:
  • the numerical values of the products corresponding to the preset candidate main colors are sorted, and the preset candidate main color corresponding to the maximum value in the sorting result is used as the target main color.
  • Example Fourteen provides an apparatus for updating page display, further comprising:
  • the page display updating device also includes a background color updating module:
  • It is used for updating the background color of the refreshed page with the target main color as a new background color, and/or changing the color of the function buttons in the refreshed page according to the target main color.
  • Example 15 provides an apparatus for updating page display, further comprising:
  • the display update module 430 includes:
  • a gradient color layer generation submodule used to determine an updated gradient color layer that matches the cover size of the preset song list according to the target main color
  • the cover update sub-module is used to replace the gradient background layer in the current cover of the preset playlist with the updated gradient color layer, and synthesize a new cover of the preset playlist.
  • Example 16 provides an apparatus for updating page display, further comprising:
  • the gradient color layer generating submodule is specifically used for:
  • the updated gradient color layer is generated according to the hue value and the saturation value and brightness value of the upper left pixel point and the lower right pixel point in the updated gradient color layer.
  • Example 17 provides an apparatus for updating page display, further comprising:
  • the cover update submodule is also used for:
  • the cover picture is replaced with the main cover picture in the album cover layer in the current cover, wherein the main cover picture is the album cover The cover image displayed in the center of the layer.
  • Example Eighteen provides an apparatus for updating page display, further comprising:
  • the preset playlists include daily song recommendation collection playlists, artist radio song recommendation playlists and theme song recommendation playlists.

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Multimedia (AREA)
  • User Interface Of Digital Computer (AREA)
  • Processing Or Creating Images (AREA)

Abstract

公开了一种页面显示更新方法、装置、电子设备和存储介质，该方法包括：响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片；提取所述封面图片的目标主色；根据所述目标主色更新所述歌曲推荐页面中预设歌单的封面。公开的技术方案能够使应用程序的显示界面的渲染效果与用户的交互进行联动，根据用户与显示界面的交互更新显示界面的渲染效果，增进用户与产品的互动和感知。

Description

一种页面显示更新方法、装置、电子设备及存储介质
本申请要求于2021年05月27日提交中国专利局、申请号为202110587306.1、申请名称为“一种页面显示更新方法、装置、电子设备及存储介质”的中国专利申请的优先权，其全部内容通过引用结合在本申请中。
技术领域
本公开实施例涉及计算机技术领域，尤其涉及一种页面显示更新方法、装置、电子设备及存储介质。
背景技术
通常，在一些音乐类、社交类、阅读或游戏等类别应用程序中，显示界面的颜色等渲染效果可以通过设置背景色、主题色或其他配置参数，自定义设置交互界面渲染效果。如果用户不主动更改颜色参数，交互界面的颜色是不会变化的，与用户在交互界面的操作没有关联。
但是，在交互性较强的应用中，上述交互界面颜色改变的方式，不能体现并提升用户与应用间的互动。
发明内容
本公开实施例提供了一种页面显示更新方法、装置、电子设备及存储介质，能够使应用程序的显示界面的渲染效果能够根据用户与显示界面的交互进行更新，增进用户与产品的互动和感知。
第一方面，本公开实施例提供了一种页面显示更新方法，包括：
响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片；
提取所述封面图片的目标主色；
根据所述目标主色更新所述歌曲推荐页面中预设歌单的封面。
第二方面，本公开实施例还提供了一种页面显示更新装置，包括：
图片获取模块，用于响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片；
主色提取模块，用于提取所述封面图片的目标主色；
显示更新模块，用于根据所述目标主色更新所述歌曲推荐页面中预设歌单的封面。
第三方面，本公开实施例还提供了一种电子设备，所述电子设备包括：
一个或多个处理器；
存储装置，用于存储一个或多个程序，
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本公开实施例任一所述的页面显示更新方法。
第四方面，本公开实施例还提供了一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如本公开实施例任一所述的页面显示更新方法。
第五方面，提供了一种计算机程序产品，包括计算机程序指令，该计算机程序指令使得计算机执行如本公开实施例任一所述的页面显示更新方法。
第六方面，提供了一种计算机程序，当其在计算机上运行时，使得计算机执行如本公开实施例任一所述的页面显示更新方法。
本公开实施例的技术方案，通过当用户在音乐播放器或其他可以播放音乐的应用程序界面中进行刷新操作时，获取当前播放歌曲所属专辑的封面图片；进而从封面图片中提取出目标主色，根据目标主色更新歌曲推荐页面中预设歌单的封面，从而改变被刷新页面的渲染效果。本公开实施例的技术方案，解决了现有技术中页面显示的渲染效果设置方式单一，灵活性较低的问题，能够使应用程序的显示界面的渲染效果与用户的交互进行联动，根据用户与显示界面的交互更新显示界面的渲染效果，增进用户与产品的互动和感知。
附图说明
结合附图并参考以下具体实施方式，本公开各实施例的上述和其他特征、优点及方面将变得更加明显。贯穿附图中，相同或相似的附图标记表示相同或相似的元素。应当理解附图是示意性的，原件和元素不一定按照比例绘制。
图1为本公开实施例一所提供的一种页面显示更新方法的流程示意图；
图2为本公开实施例一所提供的一种歌曲推荐页面当前渲染效果示意图；
图3为本公开实施例一所提供的一种歌曲推荐页面更新后渲染效果示意图；
图4为本公开实施例二所提供的一种页面显示更新方法的流程示意图；
图5为本公开实施例三所提供的一种页面显示更新方法的流程示意图；
图6为本公开实施例三所提供的一种目标主色渐变方案确定示意图；
图7为本公开实施例三所提供的一种角图的示意图；
图8为本公开实施例三所提供的一种每日推荐歌单封面形成过程示意 图；
图9为本公开实施例三所提供的一种主题歌曲推荐歌单封面形成过程示意图；
图10为本公开实施例三所提供的一种艺人电台歌曲推荐歌单封面形成过程示意图；
图11为本公开实施例四所提供的一种页面显示更新装置结构示意图；
图12为本公开实施例五所提供的一种电子设备结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。
应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。
本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。
需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。
需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。
实施例一
图1为本公开实施例一所提供的一种页面显示更新方法流程示意图，本公开实施例适用于根据用户与应用界面的交互，更新交互界面显示渲染效果的情形，尤其适用于在音乐播放平台，结合音乐播放器或其他可以播放音乐 的平台中正在播放的音乐更新交互界面渲染效果的情形。该方法可以由页面显示更新装置来执行，该装置可以通过软件和/或硬件的形式实现，该装置可配置于电子设备中，例如配置于移动终端或服务器设备中。
如图1所示，本实施例提供的页面显示更新方法，包括：
S110、响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片。
通常，在音乐播放器或其他能够播放音乐的客户端，用户刷新交互界面时，通常只会刷新交互界面显示的内容，而不会改变界面的渲染效果。例如，打开在音乐播放器的客户端时，默认展示的界面为歌曲推荐页面，在该页面上包含多个歌曲推荐歌单，如每日推荐合集、不同的音乐榜单推荐合集歌单、按照艺人歌手分类的艺人音乐电台歌单、按照音乐适用场景分类推荐歌单，以及按照音乐类型分类推荐歌单。这些歌单均以一个与歌单内推荐的音乐相关联的图片作为封面。歌单封面可以作为歌单的入口，当用户点击封面后，客户端展示界面便可以进入对应歌单的推荐歌曲列表，以供用户浏览或选择播放。歌单封面也可以仅作为展示歌单内歌曲风格或特点的展示画面，以供用户观赏。
在歌曲推荐页面，当用户通过下拉或点击刷新功能控件等方式，触发页面刷新操作，歌曲推荐页面展示的歌曲推荐歌单可能会有变化，展示出之前未展示的推荐歌单，或者个别歌曲推荐歌单中推荐的歌曲内容有更新。通常情况下，歌曲推荐页面的渲染效果上不会有变换。
在本实施例中，若在用户通过下拉或点击刷新功能控件等方式触发用户交互页面刷新操作的同时，音乐播放器或其他能够播放音乐的客户端正在播放歌曲，就会自动的获取当前正在播放的歌曲所属的专辑的封面图片，用以根据该封面的颜色或是图像内容等信息更新被刷新页面渲染效果，使渲染效果可以展示或烘托出当前正在播放的音乐氛围，更容易让用户沉浸咋音乐中，增强用户与音乐播放器展示界面的互动性。
S120、提取所述封面图片的目标主色。
具体的，在被刷新荐页面的渲染效果更新之前，首先要从获取到的封面图片照片中提取出图片的目标主色，以作为后续渲染效果更新的依据。
在计算封面图片的目标主色时，可以采用使用平均取色法，将所有像素 点色值或封面图片中指定区域像素点色值的平均值作为目标主色，或者采用聚类分析方法提取出颜色作为目标主色。此外，还可以通过将封面图片输入至按照一定规则生成的颜色提取神经网络模型，由模型输出确定目标主色等方式获取目标主色。
S130、根据所述目标主色更新被刷新的页面中预设歌曲推荐入口的封面。
预设歌单的封面中通常包含一些人物图像、卡通图案或者其他的花纹样式的图案，以及文字，整体上也有一定的层次感。这是由于封面通常是由多层图层合成的结果。在合成封面的多个图层中，有一层背景颜色图层，形成封面中的主体颜色。从而可以将提取出的目标主色作为背景颜色图层的新颜色，将新的背景颜色图层与预设歌单的当前封面中除了背景颜色图层之外的其他图层合成新的封面，从而使被刷新的页面的渲染效果的到的更新。
进一步的，预设歌单可以是每日歌曲推荐合集歌单、艺人电台歌曲推荐歌单或主题歌曲推荐歌单等歌单。各歌单封面的图层数量、内容布局及配色方案等属性信息可以分别对应有不同的配置策略。当各歌单封面的背景颜色图层的颜色更新之后，封面的渲染效果便会得到更新。背景颜色图层可以是根据目标主色确定的纯色图层，或渐变色图层。
本公开实施例的技术方案，可以通过当用户在音乐播放器或其他可以播放音乐的应用程序界面中进行刷新操作时，获取当前播放歌曲所属专辑的封面图片；进而从封面图片中提取出目标主色，根据目标主色更新歌曲推荐页面中预设歌单的封面，从而改变触发刷新操作的交互页面的渲染效果。本公开实施例的技术方案，解决了现有技术中页面显示的渲染效果设置方式单一，灵活性较低的问题，能够使应用程序的显示界面的渲染效果与用户的交互进行联动，根据用户与显示界面的交互更新显示界面的渲染效果，增进用户与产品的互动和感知。
进一步的，在一种可选的实施方式中，还可以在更新预设歌单的封面的同时，将提取的目标主色作为新的背景色，以更新被刷新页面的背景色。扩大提取出的目标主色在视觉上的显示范围，能够更加容易的使用户感受到当前播放歌曲的整体氛围或者意境，提升用户的体验感。此外，还可以，根据目标主色变更被刷新页面中的功能按钮颜色，如播放按钮等功能按钮。
具体的，在图2中示例性的展示了歌曲推荐页面当前渲染效果示意图，其中，列举了每日推荐、金曲排行榜、天王电台、女高音合集及主题歌单等歌曲推荐歌单封面，还有首页、收藏歌单页、音乐社群及个性化设置页面(我的)切换控件，各歌单封面填充色表示该页面当前的渲染效果。当用户下拉该歌曲推荐页面进行页面刷新，且同时正在播放音乐时，页面的渲染效果可得到的更新，更新结果可参考图3所提供的一种歌曲推荐页面更新后渲染效果示意图。在图3中，每日推荐歌单为预设歌曲推荐歌单，该歌单封面的填充色为点状填充，表示根据提取出的目标主色更新后的歌单封面。此外，在图3中，歌曲推荐页面整体背景也得到了更新。这样的效果可增加用户与音乐播放器交互界面的操作互动的可能性，给用户新的体验感。这里需要说明的是，页面刷新后，歌曲推荐歌单可以展示未展示的歌曲推荐歌单，也可以仍然展示当前歌曲推荐页面中的歌曲推荐歌单。
实施例二
本公开实施例与上述实施例中所提供的页面显示更新方法中各个可选方案可以结合。本实施例所提供的页面显示更新方法，提供了一种优选的目标主色提取方法，可以优化预设歌单的封面的渲染效果。
图4为本公开实施例二所提供的一种页面显示更新方法的流程示意图。如图4所示，本实施例提供的页面显示更新方法，包括：
S210、响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片。
S220、按照预设规则取出所述封面图片中预设数量像素点，并计算提取出的每个像素点的色值分别与多个预设候选主色在颜色空间的几何距离。
考虑到歌曲的专辑封面中大概率下都有歌手的面部图像，而人的面部颜色以黄色为主，按照常规的像素点色值的均值方法或是聚类颜色提取方法，会导致计算出的目标主色分布大部分集中在黄色，页面刷新后渲染效果颜色分布可能会不均，与视觉感知主色不一致。因此，在本实施例中，进一步提出了一种专辑封面图片的目标主色计算算法。
首先，要计算出封面图片中每个像素点的色值分别与多个预设候选主色在颜色空间的几何距离。其中，像素点的色值可以是三原色RGB值。多个预设候选主色可以是根据常用颜色进行设置的候选主色，或者是将与音乐播放 器可提供的外观颜色相近的颜色作为预设的候选主色，例如，赤、橙、黄、绿、青、蓝、紫和粉。颜色空间是指HSV(Hue，Saturat ion，Va l ue)，可以将像素点的RGB值转换为颜色空间对应的HSV值，然后计算各像素点分别与每个预设的候选主色的HSV值之间的几何距离。
优选的，考虑到目标主色提取的计算效率，可以根据封面图片的尺寸，在封面图片中等距离取出所述预设数量像素点，以减小计算量。如在封面图片中，每隔三个像素点取出一个像素点，计算取出的像素点与预设候选主色在颜色空间的几何距离。在选取像素点的过程中，若需要选取的像素点数量已经确定，就可以根据封面图片的大小确定取像素点的间距。若选取像素点的间距固定，便可进一步的根据封面图片的大小确定取像素点的数量。
S230、针对提取出的每个像素点，将所述几何距离中最小距离值对应的预设候选主色作为像素点的待定主色。
在计算像素点色值与预设候选主色在颜色空间的几何距离后，可以得到与预设候选主色数量一致的距离值。可以理解的是，像素点色值与候选主色在颜色空间内，距离越近，则说明两者之间颜色最接近，便可以先为每一个像素点确认一个待定主色。
S240、统计各预设候选主色被选作待定主色的次数，并将被选作待定主色次数最多的预设候选主色作为所述目标主色。
在该步骤中，综合考虑所有像素点的待定主色，可以将被选作待定主色次数最多的预设候选主色作为目标主色，从而可以很好的从整体上提取出视觉上的主色。
在一种可行的实时方式中，还可以在统计各预设候选主色被选作待定主色的次数后，并计算各预设候选主色被选作待定主色次数的统计值与各预设候选主色对应的预设加权值的乘积；将各预设候选主色对应的乘积的数值进行排序，并将排序结果中最大值对应的预设候选主色作为目标主色。其中，各预设候选主色对应的预设加权值的乘积可以是能够使视觉效果更佳的经验数值，或者是根据对某一个候选主色的个人偏好设置的个性化参数值。
S250、根据所述目标主色更新被刷新的页面中预设歌单的封面。
本公开实施例的技术方案，通过当用户在音乐播放器或其他可以播放音乐的应用程序界面中进行刷新操作时，获取当前播放歌曲所属专辑的封面图 片；进而从封面图片中提取出目标主色，根据目标主色更新歌曲推荐页面中预设歌单的封面，从而改变被刷新的页面的渲染效果，在本实施例中，还提出了一种封面图片的目标主色提取方法，基于像素点色值与候选主色在颜色空间的几何距离确定目标候选主色。本公开实施例的技术方案，解决了现有技术中页面显示的渲染效果设置方式单一，灵活性较低的问题，能够使应用程序的显示界面的渲染效果与用户的交互进行联动，根据用户与显示界面的交互更新显示界面的渲染效果，增进用户与产品的互动和感知。同时，改善了提取的主色一直偏向黄色的问题，使获得的主色分布更加均匀，也更符合视觉感知主色，优化了页面更新后的渲染效果。
实施例三
本公开实施例与上述实施例中所提供的页面显示更新方法中各个可选方案可以结合。本实施例所提供的页面显示更新方法，进一步说明了根据目标主色更新预设歌单的封面的具体过程。
图5为本公开实施例三所提供的一种页面显示更新方法的流程示意图。如图5所示，本实施例提供的页面显示更新方法，包括：
S310、响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片。
S320、提取所述封面图片的目标主色。
S330、根据所述目标主色确定一个与所述预设歌单的封面尺寸相匹配的更新渐变色图层。
具体的，在本实施例中，预设歌单的封面背景颜色图层设置为渐变色图层，根据目标主色确定渐变方案的过程，可参考图6所示的示意图。其中，原始图片列是指获取到的当前在播放歌曲所述专辑的封面图片，取色调一列则是各封面图片对应的目标主色(包括Pink粉色，Purple紫色，Indigo蓝紫色，Blue蓝色，Green绿色，Yellow黄色，Orange橙色，Red红色)。该色调下随机列，是指在目标主色对应的色调H区间内，可以随机选取数值作为H值，然后按照预设的策略确定更新渐变色图层中左上角像素点和右下角像素点的饱和度值(S值)和亮度值(B值)，从而生成更新渐变色图层。或者，也可以根据右上角像素点和左下角像素点的饱和度值(S值)和亮度值(B值)，从而生成更新渐变色图层。在图6中，列举了8组SB数值的组合， 1表示S值为40，B值为100；2表示S值为50，B值为100；3表示S值为60，B值为90；4表示S值为70，B值为80；5表示S值为80，B值为70；6表示S值为90，B值为60；7表示S值为100，B值为50；8表示S值为100，B值为40。此外，若计算确定的封面图片的目标主色为黑色，则随机在预设的候选主色中选取一个作为对应的目标主色。
进一步的，更新渐变色图层中左上角像素点和右下角像素点的饱和度值(S值)和亮度值(B值)可以随机的确定一组组合数值，也可以根据预设歌单的类别确定。例如，主题电台歌曲推荐歌单，从左上角渐变到右下角，左上角像素点和右下角像素点的饱和度值(S值)和亮度值(B值)取值分别为第3组和第6组数值。每日推荐歌单从左下角渐变到右上角，左下角像素点和右上角像素点的饱和度值(S值)和亮度值(B值)取值分别为第1组和第6组数值。
S340、使所述更新渐变色图层替换所述预设歌单的当前封面中渐变色背景图层，合成所述预设歌单的新封面。
渐变色图层颜色更新后，预设歌单的封面便会更新。
在具体的实现过程上，图层的替换，相当于将更新的渐变色图层，与其他设定的图层重新组成，生成新的封面。不同类别的歌单封面的图层数量，以及各图层内容布局是不同的。
示例性的，针对每日歌曲推荐合集歌单，封面可以由三部分组成，第一层是渐变色背景图层，第二层是角图层，即在该图层的三个角位置处三张专辑封面图拼接而成，三张封面可以选取播放次数在一定次数以上的专辑封面，如各个国家播放次数排名前1万的专辑，将三张专辑图片分别旋转后拼接到一起即得到角图，可参考图7所提供的示意图。在整个图层的虚线框的位置，用于与在步骤S310中获取到的专辑封面进行拼接，形成新的专辑封面的图层；第三层是主封面图，即正中间的封面图，为当前播放的歌曲所在专辑封面图，即在步骤S310中获取到的专辑封面。最后，还可以添加文字。具体的，每日歌曲推荐合集歌单封面的合成过程及效果，可参考图8所示的内容。
针对主题歌曲电台推荐歌单，其封面图片可由三部分组成，第一层是是渐变色背景图层，渐变色的H值取色是由电台图主色确定。从该图层的左上 角渐变到右下角，取的SB值分别为第3组(SB＝3)和第6组(SB＝6)数值。比如计算的主色调是blue，则H值随机从200和180之间取一个值，比如选择的H值是200，则左上角和右下角的HSB值分别为(200，60，90)和(200，80，70)，然后渐变色图层。第二层是纹理模版层，预先设置的固定图片。第三层为原图加偏色后裁剪得到的图层，原图为运营用户上传的封面图。最后再将这三层图层依次叠加，再拼上文字即得到最终的主题歌曲推荐歌单封面。具体的合成过程及效果，可参考图9所示的内容。
再如，针对艺人电台歌曲推荐歌单，艺人电台是跟艺人对应的，针对不同的艺人，可以推出不同的艺人电台，就会展示不同的封面。封面图由四部分组成。第一层是渐变色背景，H值可以在预设的图片中提取目标主色，例如，右下角像素点HSB值为(200，60，90)，则左上角HSB值为(220，40，100)；第二层为纹理层，可以直接下载阴影模版图进行使用，用于增加图像层次感，第三层为左右艺人图层，可以由预设的偏色模板图像及艺人图像组合，在进行缩放和剪裁而成。第四层为主艺人头像，缩放之后，裁剪成与左右艺人图相匹配到的形状，叠放在前面生成的图层上。最后，拼接文字，形成最终的封面。这里需要说明的是，主艺人是艺人电台推荐的歌曲演唱者或创作者，如一个艺人电台推荐歌曲均为王姓歌手的歌曲，该王姓歌手即为主艺人。左右艺人图是随机匹配的与主艺人演唱风格相近的歌手的图像。具体的合成过程及效果，可参考图10所示的内容。
本公开实施例的技术方案，通过当用户在音乐播放器或其他可以播放音乐的应用程序界面中进行刷新操作时，获取当前播放歌曲所属专辑的封面图片；进而从封面图片中提取出目标主色，根据目标主色更新歌曲推荐页面中预设歌单的封面，从而改变歌曲推荐页面的渲染效果，而且按照不同类型的歌单说明的歌单封面更新的过程。本公开实施例的技术方案，解决了现有技术中页面显示的渲染效果设置方式单一，灵活性较低的问题，能够使应用程序的显示界面的渲染效果与用户的交互进行联动，根据用户与显示界面的交互更新显示界面的渲染效果，增进用户与产品的互动和感知。
上述三个类别预设歌单的封面图片的合成方案仅做示例性的说明，不做具体的限定。
本公开实施例提供的页面显示更新方法与上述实施例提供的页面显示 更新方法属于同一公开构思，未在本实施例中详尽描述的技术细节可参见上述实施例，并且相同的技术特征在本实施例与上述实施例中具有相同的有益效果。
这里需要说明的是，上述各个实施例中封面图片的更新过程可以在服务端完成，然后发送到客户端，直接在客户段进行封面图片的渲染显示；也可以在客户端进行封面图片的更新与显示；或者，由两方进行配合完成。具体的执行策略可根据实施例的执行过程中数据的处理效率而确定。
实施例四
图11为本公开实施例四所提供的一种页面显示更新装置结构示意图。本实施例提供的页面显示更新装置适用于根据用户与应用界面的交互，更新交互界面显示渲染效果的情形。
如图11所示，页面显示更新装置包括：图片获取模块410、主色提取模块420和显示更新模块430。
其中，图片获取模块410，用于响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片；主色提取模块420，用于提取所述封面图片的目标主色；显示更新模块430，用于根据所述目标主色更新被刷新的页面中预设歌单的封面。
本公开实施例的技术方案，通过当用户在音乐播放器或其他可以播放音乐的应用程序界面中进行刷新操作时，获取当前播放歌曲所属专辑的封面图片；进而从封面图片中提取出目标主色，根据目标主色更新歌曲推荐页面中预设歌单的封面，从而改变被刷新的页面的渲染效果。本公开实施例的技术方案，解决了现有技术中页面显示的渲染效果设置方式单一，灵活性较低的问题，能够使应用程序的显示界面的渲染效果与用户的交互进行联动，根据用户与显示界面的交互更新显示界面的渲染效果，增进用户与产品的互动和感知。
在一些可选的实现方式中，所述主色提取模块420具体包括：
像素点选取子模块，用于按照预设规则取出所述封面图片中预设数量像素点，并计算提取出的每个像素点的色值分别与多个预设候选主色在颜色空间的几何距离；
待定主色选取子模块，用于针对提取出的每个像素点，将所述几何距离 中最小距离值对应的预设候选主色作为像素点的待定主色；
目标主色确定子模块，用于统计各预设候选主色被选作待定主色的次数，并将被选作待定主色次数最多的预设候选主色作为所述目标主色。
在一些可选的实现方式中，所述像素点选取子模块具体用于：
根据所述封面图片的尺寸，在所述封面图片中等距离取出所述预设数量像素点。
在一些可选的实现方式中，所述目标主色确定子模块具体用于：
统计各预设候选主色被选作待定主色的次数，并计算各预设候选主色被选作待定主色次数的统计值与各预设候选主色对应的预设加权值的乘积；
将各预设候选主色对应的所述乘积的数值进行排序，并将排序结果中最大值对应的预设候选主色作为所述目标主色。
在一些可选的实现方式中，所述页面显示更新装置还包括背景色更新模块：
用于将所述目标主色作为新的背景色更新被刷新的页面的背景色，和/或，根据所述目标主色变更所述被刷新的页面中的功能按钮颜色。
在一些可选的实现方式中，所述显示更新模块430包括：
渐变色图层生成子模块，用于根据所述目标主色确定一个与所述预设歌单的封面尺寸相匹配的更新渐变色图层；
封面更新子模块，用于使所述更新渐变色图层替换所述预设歌单的当前封面中渐变色背景图层，合成所述预设歌单的新封面。
在一些可选的实现方式中，所述渐变色图层生成子模块具体用于：
在所述目标主色对应的色调区间内，随机选取色调值；
根据所述预设歌单的类别确定所述更新渐变色图层中左上角像素点和右下角像素点的饱和度值和亮度值，其中，不同类别的预设歌单的封面对应不同的颜色渐变策略；
根据所述色调值和所述更新渐变色图层中左上角像素点和右下角像素点的饱和度值和亮度值，生成所述更新渐变色图层。
在一些可选的实现方式中，所述封面更新子模块还用于：
当所述预设歌单的封面中包含专辑封面图层时，使所述封面图片替换所述当前封面中专辑封面图层中的主封面图，其中，所述主封面图为所述专辑 封面图层中显示在中心位置的封面图。
在一些可选的实现方式中，预设歌单包括每日歌曲推荐合集歌单、艺人电台歌曲推荐歌单和主题歌曲推荐歌单。
本公开实施例所提供的页面显示更新装置，可执行本公开任意实施例所提供的页面显示更新方法，具备执行方法相应的功能模块和有益效果。
值得注意的是，上述装置所包括的各个单元和模块只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本公开实施例的保护范围。
实施例五
下面参考图12，其示出了适于用来实现本公开实施例的电子设备(例如图12中的终端设备或服务器)500的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图12示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图12所示，电子设备500可以包括处理装置(例如中央处理器、图形处理器等)501，其可以根据存储在只读存储器(Read-Only Memory，ROM)502中的程序或者从存储装置506加载到随机访问存储器(Random Access Memory，RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中，还存储有电子设备500操作所需的各种程序和数据。处理装置501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。
通常，以下装置可以连接至I/O接口505：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置506；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置507；包括例如磁带、硬盘等的存储装置508；以及通信装置509。通信装置509可以允许电子设备500与其他设备进行无线或有线通信以交换数据。虽然图12示出了具有各种装置的电子设备500，但是应理解的是，并不要求实施或具备所有示出 的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在非暂态计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置509从网络上被下载和安装，或者从存储装置506被安装，或者从ROM502被安装。在该计算机程序被处理装置501执行时，执行本公开实施例的页面显示更新方法中限定的上述功能。
本公开实施例提供的电子设备与上述实施例提供的页面显示更新方法属于同一公开构思，未在本实施例中详尽描述的技术细节可参见上述实施例，并且本实施例与上述实施例具有相同的有益效果。
实施例六
本公开实施例提供了一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述实施例所提供的页面显示更新方法。
需要说明的是，本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(Erasable Programmable Read-Only Memory，EPROM)或闪存(FLASH)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。 计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。
在一些实施方式中，客户端、服务器可以利用诸如HTTP(HyperText Transfer Protocol，超文本传输协议)之类的任何当前已知或未来研发的网络协议进行通信，并且可以与任意形式或介质的数字数据通信(例如，通信网络)互连。通信网络的示例包括局域网(“LAN”)，广域网(“WAN”)，网际网(例如，互联网)以及端对端网络(例如，ad hoc端对端网络)，以及任何当前已知或未来研发的网络。
上述计算机可读介质可以是上述电子设备中所包含的；也可以是单独存在，而未装配入该电子设备中。
上述计算机可读介质承载有一个或者多个程序，当上述一个或者多个程序被该电子设备执行时，使得该电子设备：
响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片；
提取所述封面图片的目标主色；
根据所述目标主色更新所述歌曲推荐页面中预设歌单的封面。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括但不限于面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可 以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元、模块的名称在某种情况下并不构成对该单元、模块本身的限定，例如，数据生成模块还可以被描述为“视频数据生成模块”。
本文中以上描述的功能可以至少部分地由一个或多个硬件逻辑部件来执行。例如，非限制性地，可以使用的示范类型的硬件逻辑部件包括：现场可编程门阵列(Field Programmable Gate Array，FPGA)、专用集成电路(Application Specific Integrated Circuit，ASIC)、专用标准产品(Application Specific Standard Parts，ASSP)、片上系统(System on Chip，SOC)、复杂可编程逻辑设备(CPLD)等等。
在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。
根据本公开的一个或多个实施例，【示例一】提供了一种页面显示更新方法，该方法包括：
响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片；
提取所述封面图片的目标主色；
根据所述目标主色更新被刷新的页面中预设歌单的封面。
根据本公开的一个或多个实施例，【示例二】提供了一种页面显示更新方法，还包括：
所述提取所述封面图片的目标主色包括：
按照预设规则取出所述封面图片中预设数量像素点，并计算提取出的每个像素点的色值分别与多个预设候选主色在颜色空间的几何距离；
针对提取出的每个像素点，将所述几何距离中最小距离值对应的预设候选主色作为像素点的待定主色；
统计各预设候选主色被选作待定主色的次数，并将被选作待定主色次数最多的预设候选主色作为所述目标主色。
根据本公开的一个或多个实施例，【示例三】提供了一种页面显示更新方法，还包括：
所述按照预设规则取出所述封面图片中预设数量像素点，包括：
根据所述封面图片的尺寸，在所述封面图片中等距离取出所述预设数量像素点。
根据本公开的一个或多个实施例，【示例四】提供了一种页面显示更新方法，还包括：
所述统计各预设候选主色被选作待定主色的次数，并将被选作待定主色次数最多的预设候选主色作为所述目标主色，包括：
统计各预设候选主色被选作待定主色的次数，并计算各预设候选主色被选作待定主色次数的统计值与各预设候选主色对应的预设加权值的乘积；
将各预设候选主色对应的所述乘积的数值进行排序，并将排序结果中最大值对应的预设候选主色作为所述目标主色。
根据本公开的一个或多个实施例，【示例五】提供了一种页面显示更新方法，还包括：
将所述目标主色作为新的背景色更新被刷新的页面的背景色，和/或，根据所述目标主色变更所述被刷新的页面中的功能按钮颜色。
根据本公开的一个或多个实施例，【示例六】提供了一种页面显示更新方法，还包括：
所述根据所述目标主色更新所述被刷新的页面中预设歌单的封面，包括：
根据所述目标主色确定一个与所述预设歌单的封面尺寸相匹配的更新渐变色图层；
使所述更新渐变色图层替换所述预设歌单的当前封面中渐变色背景图层，合成所述预设歌单的新封面。
根据本公开的一个或多个实施例，【示例七】提供了一种页面显示更新方法，还包括：
根据所述目标主色确定一个与所述预设歌单的封面尺寸相匹配的更新渐变色图层，包括：
在所述目标主色对应的色调区间内，随机选取色调值；
根据所述预设歌单的类别确定所述更新渐变色图层中左上角像素点和右下角像素点的饱和度值和亮度值，其中，不同类别的预设歌单的封面对应不同的颜色渐变策略；
根据所述色调值和所述更新渐变色图层中左上角像素点和右下角像素点的饱和度值和亮度值，生成所述更新渐变色图层。
根据本公开的一个或多个实施例，【示例八】提供了一种页面显示更新方法，还包括：
在使所述更新渐变色图层替换所述预设歌单的当前封面中渐变色背景图层之后，所述方法还包括：
当所述预设歌单的封面中包含专辑封面图层时，使所述封面图片替换所述当前封面中专辑封面图层中的主封面图，其中，所述主封面图为所述专辑封面图层中显示在中心位置的封面图。
根据本公开的一个或多个实施例，【示例九】提供了一种页面显示更新方法，还包括：
所述预设歌单包括每日歌曲推荐合集歌单、艺人电台歌曲推荐歌单和主题歌曲推荐歌单。
根据本公开的一个或多个实施例，【示例十】提供了一种页面显示更新装置，包括：
图片获取模块，用于响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片；
主色提取模块，用于提取所述封面图片的目标主色；
显示更新模块，用于根据所述目标主色更新被刷新的页面中预设歌单的封面。
根据本公开的一个或多个实施例，【示例十一】提供了一种页面显示更新装置，还包括：
所述主色提取模块具体包括：
像素点选取子模块，用于按照预设规则取出所述封面图片中预设数量像素点，并计算提取出的每个像素点的色值分别与多个预设候选主色在颜色空间的几何距离；
待定主色选取子模块，用于针对提取出的每个像素点，将所述几何距离中最小距离值对应的预设候选主色作为像素点的待定主色；
目标主色确定子模块，用于统计各预设候选主色被选作待定主色的次数，并将被选作待定主色次数最多的预设候选主色作为所述目标主色。
根据本公开的一个或多个实施例，【示例十二】提供了一种页面显示更新装置，还包括：
在一些可选的实现方式中，所述像素点选取子模块具体用于：
根据所述封面图片的尺寸，在所述封面图片中等距离取出所述预设数量像素点。
根据本公开的一个或多个实施例，【示例十三】提供了一种页面显示更新装置，还包括：
在一些可选的实现方式中，所述目标主色确定子模块具体用于：
统计各预设候选主色被选作待定主色的次数，并计算各预设候选主色被选作待定主色次数的统计值与各预设候选主色对应的预设加权值的乘积；
将各预设候选主色对应的所述乘积的数值进行排序，并将排序结果中最大值对应的预设候选主色作为所述目标主色。
根据本公开的一个或多个实施例，【示例十四】提供了一种页面显示更新装置，还包括：
在一些可选的实现方式中，所述页面显示更新装置还包括背景色更新模块：
用于将所述目标主色作为新的背景色更新被刷新的页面的背景色，和/或，根据所述目标主色变更所述被刷新的页面中的功能按钮颜色。
根据本公开的一个或多个实施例，【示例十五】提供了一种页面显示更新装置，还包括：
在一些可选的实现方式中，所述显示更新模块430包括：
渐变色图层生成子模块，用于根据所述目标主色确定一个与所述预设歌单的封面尺寸相匹配的更新渐变色图层；
封面更新子模块，用于使所述更新渐变色图层替换所述预设歌单的当前封面中渐变色背景图层，合成所述预设歌单的新封面。
根据本公开的一个或多个实施例，【示例十六】提供了一种页面显示更新装置，还包括：
在一些可选的实现方式中，所述渐变色图层生成子模块具体用于：
在所述目标主色对应的色调区间内，随机选取色调值；
根据所述预设歌单的类别确定所述更新渐变色图层中左上角像素点和右下角像素点的饱和度值和亮度值，其中，不同类别的预设歌单的封面对应不同的颜色渐变策略；
根据所述色调值和所述更新渐变色图层中左上角像素点和右下角像素点的饱和度值和亮度值，生成所述更新渐变色图层。
根据本公开的一个或多个实施例，【示例十七】提供了一种页面显示更新装置，还包括：
在一些可选的实现方式中，所述封面更新子模块还用于：
当所述预设歌单的封面中包含专辑封面图层时，使所述封面图片替换所述当前封面中专辑封面图层中的主封面图，其中，所述主封面图为所述专辑封面图层中显示在中心位置的封面图。
根据本公开的一个或多个实施例，【示例十八】提供了一种页面显示更新装置，还包括：
所述预设歌单包括每日歌曲推荐合集歌单、艺人电台歌曲推荐歌单和主题歌曲推荐歌单。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。
此外，虽然采用特定次序描绘了各操作，但是这不应当理解为要求这些操作以所示出的特定次序或以顺序次序执行来执行。在一定环境下，多任务和并行处理可能是有利的。同样地，虽然在上面论述中包含了若干具体实现细节，但是这些不应当被解释为对本公开的范围的限制。在单独的实施例的上下文中描述的某些特征还可以组合地实现在单个实施例中。相反地，在单个实施例的上下文中描述的各种特征也可以单独地或以任何合适的子组合的方式实现在多个实施例中。
尽管已经采用特定于结构特征和/或方法逻辑动作的语言描述了本主题，但是应当理解所附权利要求书中所限定的主题未必局限于上面描述的特定特征或动作。相反，上面所描述的特定特征和动作仅仅是实现权利要求书的示例形式。

Claims (12)

  1. 一种页面显示更新方法，其特征在于，包括：
    响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片；
    提取所述封面图片的目标主色；
    根据所述目标主色更新被刷新的页面中预设歌单的封面。
  2. 根据权利要求1所述的方法，其特征在于，所述提取所述封面图片的目标主色包括：
    按照预设规则取出所述封面图片中预设数量像素点，并计算提取出的每个像素点的色值分别与多个预设候选主色在颜色空间的几何距离；
    针对提取出的每个像素点，将所述几何距离中最小距离值对应的预设候选主色作为像素点的待定主色；
    统计各预设候选主色被选作待定主色的次数，并将被选作待定主色次数最多的预设候选主色作为所述目标主色。
  3. 根据权利要求2所述的方法，其特征在于，所述按照预设规则取出所述封面图片中预设数量像素点，包括：
    根据所述封面图片的尺寸，在所述封面图片中等距离取出所述预设数量像素点。
  4. 根据权利要求2所述的方法，其特征在于，所述统计各预设候选主色被选作待定主色的次数，并将被选作待定主色次数最多的预设候选主色作为所述目标主色，包括：
    统计各预设候选主色被选作待定主色的次数，并计算各预设候选主色被选作待定主色次数的统计值与各预设候选主色对应的预设加权值的乘积；
    将各预设候选主色对应的所述乘积的数值进行排序，并将排序结果中最大值对应的预设候选主色作为所述目标主色。
  5. 根据权利要求1所述的方法，其特征在于，所述方法还包括：
    将所述目标主色作为新的背景色更新被刷新的页面的背景色，和/或，根据所述目标主色变更所述被刷新的页面中的功能按钮颜色。
  6. 根据权利要求1所述的方法，其特征在于，所述根据所述目标主色更新被刷新的页面中预设歌单的封面，包括：
    根据所述目标主色确定一个与所述预设歌单的封面尺寸相匹配的更新渐变色图层；
    使所述更新渐变色图层替换所述预设歌单的当前封面中渐变色背景图层，合成所述预设歌单的新封面。
  7. 根据权利要求6所述的方法，其特征在于，根据所述目标主色确定一个与所述预设歌单的封面尺寸相匹配的更新渐变色图层，包括：
    在所述目标主色对应的色调区间内，随机选取色调值；
    根据所述预设歌单的类别确定所述更新渐变色图层中左上角像素点和右下角像素点的饱和度值和亮度值，其中，不同类别的预设歌单的封面对应不同的颜色渐变策略；
    根据所述色调值和所述更新渐变色图层中左上角像素点和右下角像素点的饱和度值和亮度值，生成所述更新渐变色图层。
  8. 根据权利要求6所述的方法，其特征在于，在使所述更新渐变色图层替换所述预设歌单的当前封面中渐变色背景图层之后，所述方法还包括：
    当所述预设歌单的封面中包含专辑封面图层时，使所述封面图片替换所述当前封面中专辑封面图层中的主封面图，其中，所述主封面图为所述专辑封面图层中显示在中心位置的封面图。
  9. 根据权利要求1-8中任一所述的方法，其特征在于，所述预设歌单包括每日歌曲推荐合集歌单、艺人电台歌曲推荐歌单和主题歌曲推荐歌单。
  10. 一种页面显示更新装置，其特征在于，包括：
    图片获取模块，用于响应于用户的页面刷新操作，获取当前播放歌曲所属专辑的封面图片；
    主色提取模块，用于提取所述封面图片的目标主色；
    显示更新模块，用于根据所述目标主色更新所述歌曲推荐页面中预设歌单的封面。
  11. 一种电子设备，其特征在于，所述电子设备包括：
    一个或多个处理器；
    存储装置，用于存储一个或多个程序，
    当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-9中任一所述的页面显示更新方法。
  12. 一种包含计算机可执行指令的存储介质，所述计算机可执行指令在由计算机处理器执行时用于执行如权利要求1-9中任一所述的页面显示更新方法。
PCT/CN2021/106306 2021-05-27 2021-07-14 一种页面显示更新方法、装置、电子设备及存储介质 WO2022246985A1 (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
US17/601,240 US20240095973A1 (en) 2021-05-27 2021-07-14 Method and apparatus for updating page display, electronic device, and storage medium
BR112021019870A BR112021019870A2 (pt) 2021-05-27 2021-07-14 Método e aparelho para atualizar exibição de página, dispositivo eletrônico e meio de armazenamento

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202110587306.1 2021-05-27
CN202110587306.1A CN113204658A (zh) 2021-05-27 2021-05-27 一种页面显示更新方法、装置、电子设备及存储介质

Publications (1)

Publication Number Publication Date
WO2022246985A1 true WO2022246985A1 (zh) 2022-12-01

Family

ID=77023278

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/106306 WO2022246985A1 (zh) 2021-05-27 2021-07-14 一种页面显示更新方法、装置、电子设备及存储介质

Country Status (4)

Country Link
US (1) US20240095973A1 (zh)
CN (1) CN113204658A (zh)
BR (1) BR112021019870A2 (zh)
WO (1) WO2022246985A1 (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113569086B (zh) * 2021-08-05 2024-01-26 深圳墨世科技有限公司 曲库聚合方法、装置、终端设备和可读存储介质
CN113742025B (zh) * 2021-09-17 2024-07-09 北京字跳网络技术有限公司 页面生成方法、装置、设备和存储介质
CN114827698B (zh) * 2022-03-22 2024-02-02 北京字跳网络技术有限公司 一种播放信息的同步方法、装置、终端设备和存储介质

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108334531A (zh) * 2017-09-19 2018-07-27 平安普惠企业管理有限公司 图片色调提取方法、设备以及计算机可读存储介质
CN109597664A (zh) * 2018-09-21 2019-04-09 北京字节跳动网络技术有限公司 展示区域的背景配置方法、装置、设备及可读介质
CN109783182A (zh) * 2019-02-15 2019-05-21 百度在线网络技术（北京）有限公司 一种页面主题色调的调整方法、装置、设备及介质
US20200195842A1 (en) * 2017-09-12 2020-06-18 Tencent Technology (Shenzhen) Company Limited Information pushing method, storage medium, terminal device, and server
CN112069341A (zh) * 2020-09-04 2020-12-11 北京字节跳动网络技术有限公司 背景图片生成及搜索结果展示方法、装置、设备和介质

Family Cites Families (21)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7478323B2 (en) * 2004-10-25 2009-01-13 Apple Inc. Automated creation of media asset illustration collage
US20070038671A1 (en) * 2005-08-09 2007-02-15 Nokia Corporation Method, apparatus, and computer program product providing image controlled playlist generation
US8739062B2 (en) * 2006-02-24 2014-05-27 Sony Corporation Graphical playlist
US8060825B2 (en) * 2007-01-07 2011-11-15 Apple Inc. Creating digital artwork based on content file metadata
US20100229094A1 (en) * 2009-03-04 2010-09-09 Apple Inc. Audio preview of music
US9749709B2 (en) * 2010-03-23 2017-08-29 Apple Inc. Audio preview of music
JP2013080538A (ja) * 2011-10-04 2013-05-02 Sony Corp コンテンツ再生装置およびコンテンツ再生方法、並びにプログラム
US20140075308A1 (en) * 2012-09-10 2014-03-13 Apple Inc. Intelligent media queue
IN2015DN03807A (zh) * 2012-11-20 2015-10-02 Jolla Oy
US20140180762A1 (en) * 2012-12-12 2014-06-26 Ishlab, Inc. Systems and methods for customized music selection
US10102224B2 (en) * 2013-04-25 2018-10-16 Trent R. McKenzie Interactive music feedback system
ES2725461T3 (es) * 2014-02-14 2019-09-24 Pluto Inc Procedimientos y sistemas para generar y proporcionar guías de programas y contenido
CN113821143A (zh) * 2014-06-24 2021-12-21 苹果公司 音乐正在播放用户界面
US10110701B2 (en) * 2014-11-17 2018-10-23 Google Llc Structured entity information page
US10152804B2 (en) * 2015-02-13 2018-12-11 Smugmug, Inc. System and method for dynamic color scheme application
CN106997265B (zh) * 2016-01-26 2020-11-10 腾讯科技（深圳）有限公司 一种设置背景过度色的方法及装置
CN105761283B (zh) * 2016-02-14 2018-12-25 广州神马移动信息科技有限公司 一种图片主色提取方法及装置
CN109358926A (zh) * 2018-09-20 2019-02-19 珠海市君天电子科技有限公司 一种颜色设置方法、装置及电子设备
CN110968808B (zh) * 2018-09-29 2023-05-23 北京国双科技有限公司 一种实现网页主题更新的方法及装置
CN109857901B (zh) * 2019-01-25 2021-07-27 杭州网易云音乐科技有限公司 信息展示方法和装置、以及用于信息搜索的方法和装置
CN112667333B (zh) * 2020-12-23 2023-05-23 杭州网易云音乐科技有限公司 歌单界面显示控制方法及装置、存储介质和电子设备

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20200195842A1 (en) * 2017-09-12 2020-06-18 Tencent Technology (Shenzhen) Company Limited Information pushing method, storage medium, terminal device, and server
CN108334531A (zh) * 2017-09-19 2018-07-27 平安普惠企业管理有限公司 图片色调提取方法、设备以及计算机可读存储介质
CN109597664A (zh) * 2018-09-21 2019-04-09 北京字节跳动网络技术有限公司 展示区域的背景配置方法、装置、设备及可读介质
CN109783182A (zh) * 2019-02-15 2019-05-21 百度在线网络技术（北京）有限公司 一种页面主题色调的调整方法、装置、设备及介质
CN112069341A (zh) * 2020-09-04 2020-12-11 北京字节跳动网络技术有限公司 背景图片生成及搜索结果展示方法、装置、设备和介质

Also Published As

Publication number Publication date
BR112021019870A2 (pt) 2022-12-27
US20240095973A1 (en) 2024-03-21
CN113204658A (zh) 2021-08-03

Similar Documents

Publication Publication Date Title
WO2022246985A1 (zh) 一种页面显示更新方法、装置、电子设备及存储介质
CN109618222B (zh) 一种拼接视频生成方法、装置、终端设备及存储介质
US10235389B2 (en) Identifying data from keyword searches of color palettes
CN108573032A (zh) 视频推荐方法及装置
CN109491739B (zh) 一种主题色动态确定方法、装置、电子设备及存储介质
WO2021238084A1 (zh) 语音包推荐方法、装置、设备及存储介质
WO2021238447A1 (zh) 人机交互方法及装置、存储介质及电子设备
WO2021238081A1 (zh) 语音包推荐方法、装置、设备及存储介质
CN108737878B (zh) 用于结合视频呈现来修改用户界面颜色的方法和系统
WO2022042290A1 (zh) 一种虚拟模型处理方法、装置、电子设备和存储介质
WO2023078284A1 (zh) 图片渲染方法、装置、设备、存储介质和程序产品
CN103997687A (zh) 用于向视频增加交互特征的技术
WO2023143223A1 (zh) 页面处理方法、装置、设备及存储介质
JP7337172B2 (ja) 音声パケット推薦方法、装置、電子機器およびプログラム
CN112150347A (zh) 从有限的修改后图像集合中学习的图像修改样式
WO2024160128A1 (zh) 用于生成视频模板的方法、装置和电子设备
CN113742025A (zh) 页面生成方法、装置、设备和存储介质
WO2022073516A1 (zh) 生成图像的方法、装置、电子设备及介质
CN114564604A (zh) 媒体合集生成方法、装置、电子设备及存储介质
CN111369431A (zh) 图像的处理方法、装置、可读介质和电子设备
US20240112702A1 (en) Method and apparatus for template recommendation, device, and storage medium
WO2023078281A1 (zh) 图片处理方法、装置、设备、存储介质和程序产品
US10706590B2 (en) Subtitle beat generation method, image processing method, terminal, and server
KR101489211B1 (ko) 사진을 이용한 동영상 제작 방법 및 그 장치
CN106028121A (zh) 资源整合方法和系统

Legal Events

Date Code Title Description
WWE Wipo information: entry into national phase

Ref document number: 17601240

Country of ref document: US

REG Reference to national code

Ref country code: BR

Ref legal event code: B01A

Ref document number: 112021019870

Country of ref document: BR

ENP Entry into the national phase

Ref document number: 112021019870

Country of ref document: BR

Kind code of ref document: A2

Effective date: 20211004

121 Ep: the epo has been informed by wipo that ep was designated in this application

Ref document number: 21942554

Country of ref document: EP

Kind code of ref document: A1

NENP Non-entry into the national phase

Ref country code: DE

122 Ep: pct application non-entry in european phase

Ref document number: 21942554

Country of ref document: EP

Kind code of ref document: A1