WO2022068293A1 - 页面展示方法及装置 - Google Patents

页面展示方法及装置 Download PDF

Info

Publication number
WO2022068293A1
WO2022068293A1 PCT/CN2021/102868 CN2021102868W WO2022068293A1 WO 2022068293 A1 WO2022068293 A1 WO 2022068293A1 CN 2021102868 W CN2021102868 W CN 2021102868W WO 2022068293 A1 WO2022068293 A1 WO 2022068293A1
Authority
WO
WIPO (PCT)
Prior art keywords
color
page
multimedia resource
target
target multimedia
Prior art date
Application number
PCT/CN2021/102868
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 北京达佳互联信息技术有限公司
Publication of WO2022068293A1 publication Critical patent/WO2022068293A1/zh

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00Arrangements for program control, e.g. control units
    • G06F9/06Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44Arrangements for executing specific programs
    • G06F9/451Execution arrangements for user interfaces

Definitions

  • the present disclosure relates to the technical field of computer applications, and in particular, to a page display method and device.
  • Video applications push video streams to users through corresponding algorithms to meet the needs of users to watch various videos.
  • a video application will set a page label on the page displaying the video, and the user can click on the label to participate in various activities provided by the video application, such as sending emoticons, participating in voting, or viewing other information pushed.
  • the present disclosure provides a page display method and device.
  • the technical solutions of the present disclosure are as follows:
  • a page display method comprising: in response to a received page display instruction, determining a target multimedia resource and a page tag included in a target page to be displayed; The reference color corresponding to the resource, determine the corresponding adjacent color and contrasting color; display the target page, in the process of displaying the target multimedia resource through the target page, according to the adjacent color and contrasting color, the page label is displayed.
  • the presentation is rendered dynamically so that the colors of different areas in the page tab are dynamically switched between the adjacent and contrasting colors.
  • another page display method including: in response to a received page loading request, determining a target multimedia resource and a page tag included in a target page to be loaded; determining the target multimedia resource The reference hue corresponding to the resource; according to the reference hue corresponding to the target multimedia resource, determine the corresponding adjacent color and contrasting color; display the target page, in the process of displaying the target multimedia resource through the target page, according to the The adjacent color and the contrasting color are dynamically rendered and displayed on the page label, so that the colors of different regions in the page label are dynamically switched between the adjacent color and the contrasting color.
  • a page display apparatus comprising: a first determination module configured to, in response to a received page display instruction, determine a target multimedia resource and a page included in a target page to be displayed label; a second determining module, configured to determine the corresponding adjacent color and contrasting color according to the reference color tone corresponding to the target multimedia resource; a dynamic rendering display module, configured to display the target page, after passing the target page During the display process of displaying the target multimedia resource, the page label is dynamically rendered and displayed according to the adjacent color and the contrasting color, so that the colors of different areas in the page label are dynamically switched between the adjacent color and the contrasting color .
  • another apparatus for displaying pages including: a first determining module configured to, in response to a received page loading request, determine a target multimedia resource included in a target page to be loaded, and a page label; a second determination module configured to determine a reference color tone corresponding to the target multimedia resource; a third determination module configured to determine a corresponding adjacent color and a contrasting color according to the reference color tone corresponding to the target multimedia resource;
  • the dynamic rendering display module is configured to display the target page.
  • the page label is dynamically rendered and displayed according to the adjacent color and the contrasting color, so that the page tag is displayed dynamically.
  • the colors of different areas in the page tab are dynamically switched between the adjacent and contrasting colors.
  • an electronic device comprising: a processor; a memory for storing executable instructions of the processor; wherein the processor is configured to execute the executable instructions, The following steps are implemented: in response to the received page display instruction, determine the target multimedia resource and page label included in the target page to be displayed; determine the corresponding adjacent color and contrasting color according to the reference color tone corresponding to the target multimedia resource; display The target page, in the process of displaying the target multimedia resource through the target page, dynamically renders and displays the page label according to the adjacent color and contrasting color, so that the colors of different areas in the page label are displayed. Dynamically switch between the adjacent and contrasting colors.
  • an electronic device comprising: a processor; a memory for storing executable instructions of the processor; wherein the processor is configured to execute the executable instructions, Implement the following steps: in response to the received page loading request, determine the target multimedia resource and page label included in the target page to be loaded; determine the reference tone corresponding to the target multimedia resource; according to the reference corresponding to the target multimedia resource color tone, determine the corresponding adjacent color and contrasting color; display the target page, in the process of displaying the target multimedia resource through the target page, dynamically render and display the page label according to the adjacent color and contrasting color, so that the colors of different regions in the page tab can be dynamically switched between the adjacent colors and the contrasting colors.
  • a storage medium that, when an instruction in the storage medium is executed by a processor of an electronic device, enables the electronic device to perform the following steps: in response to the received page presentation instruction, determine the target multimedia resource and page label included in the target page to be displayed; determine the corresponding adjacent color and contrasting color according to the reference color tone corresponding to the target multimedia resource; display the target page, after passing the target page During the display process of displaying the target multimedia resource, the page label is dynamically rendered and displayed according to the adjacent color and the contrasting color, so that the colors of different areas in the page label are dynamically switched between the adjacent color and the contrasting color .
  • a storage medium that, when an instruction in the storage medium is executed by a processor of an electronic device, enables the electronic device to perform the following steps: in response to a received page load request, determine the target multimedia resource and page label included in the target page to be loaded; determine the reference color tone corresponding to the target multimedia resource; determine the corresponding adjacent color and contrast color according to the reference color tone corresponding to the target multimedia resource; display
  • the target page in the process of displaying the target multimedia resource through the target page, dynamically renders and displays the page label according to the adjacent color and contrasting color, so that the colors of different areas in the page label are displayed. Dynamically switch between the adjacent and contrasting colors.
  • Fig. 1 is a flow chart of a method for displaying a page according to an exemplary embodiment.
  • Fig. 2 is a flowchart of a specific page display method according to an exemplary embodiment.
  • Fig. 3 is a flowchart of another specific page display method according to an exemplary embodiment.
  • Fig. 4 is a flow chart of yet another specific method for displaying pages according to an exemplary embodiment.
  • Fig. 5a is a schematic diagram of a region between a dividing line and a corresponding edge in a page label according to an exemplary embodiment.
  • Fig. 5b is a schematic diagram showing the division of four regions in a page tag according to an exemplary embodiment.
  • Fig. 6 is a schematic diagram showing a rendering effect of a page label according to an exemplary embodiment.
  • Fig. 7 is a flowchart of another method for displaying pages according to an exemplary embodiment.
  • Fig. 8 is a block diagram of a page display apparatus according to an exemplary embodiment.
  • Fig. 9 is a block diagram of another page display apparatus according to an exemplary embodiment.
  • Fig. 10 is a block diagram of an electronic device according to an exemplary embodiment.
  • the page display method of the present disclosure may be executed by a server or a terminal, and no limitation is imposed here.
  • the execution subject is the terminal.
  • Fig. 1 is a flowchart of a method for displaying a page according to an exemplary embodiment. As shown in Fig. 1 , the method for displaying a page is used in a terminal, and includes the following steps.
  • step 101 in response to the received page display instruction, the target multimedia resources and page tags included in the target page to be displayed are determined.
  • the page display method of the present disclosure may be executed by the page display apparatus of the embodiment of the present disclosure, and the page display apparatus of the embodiment of the present disclosure may be configured in In the terminal, the page display method of the embodiment of the present disclosure is executed.
  • the terminal includes an application program or a web page provided by the server, and it can be any type of electronic device such as a user's mobile phone, a tablet computer, and a personal computer (PC), which is not limited here.
  • the page may be an interactive interface for the terminal to display multimedia resources to the user through related application programs, and the multimedia resources are comprehensive resources including multiple media.
  • the multimedia resources of the present disclosure may be the pushed video streams, and the target multimedia resources are It may be a short video searched by the user displayed to the user by the terminal through the short video application.
  • the page display instruction includes an instruction to display the target multimedia resource to the user through the target page, such as a page opening instruction or a page refresh instruction.
  • a page opening instruction or a page refresh instruction For example, when the user clicks a short video in the video push list of the short video application, the terminal receives An instruction sent by the server of the short video application to open a new page and play the target short video on the target page. For another example, when the user finishes watching a short video, the terminal receives an instruction sent by the server to refresh the current page And continue to show instructions for related types of videos.
  • the terminal may first send a page loading request to the server to obtain the target multimedia resource and display it to the user through the page.
  • the identification determines the target multimedia resource, and returns to the terminal a page display instruction including the target multimedia resource and the page label.
  • the terminal may include, in some embodiments, extracting target multimedia resources and page tags from the page display instruction, and generating a target page, etc., to determine the target included in the target page to be displayed.
  • Multimedia resources and page tags are convenient to display the target multimedia resources to the user in the target page later.
  • step 102 the corresponding adjacent color and contrasting color are determined according to the reference color tone corresponding to the target multimedia resource.
  • the reference hue is the hue related to the picture, content, and theme of the target multimedia resource. It should be noted that the hue refers to the relative lightness and darkness of the image, which is expressed as color on the color image. Therefore, in the embodiments of the present disclosure , when the target multimedia resource includes a color image, the reference hue can be the most used color in the image. For example, in the case that the target multimedia resource is a short video, the reference tone may be a color suitable for the emotion expressed by the video, or the like.
  • adjacent colors and contrasting colors are colors that are similar to the reference hue.
  • Adjacent color is a color that is similar to the reference hue, has the same cool and warm properties, and has a relatively uniform hue. For example, if the reference hue is red, the adjacent color can be yellow-orange, and if the reference hue is blue, the adjacent color is blue. The color can be dark green, etc.
  • the contrasting color is a color that can be easily distinguished from the reference hue and can achieve visual balance. For example, in the case where the reference hue is blue, the contrasting color can be light green, etc.
  • the terminal may pre-determine the range of adjacent colors and contrasting colors corresponding to each color, and after the terminal determines the reference color tone of the target multimedia resource by analyzing various colors included in the target multimedia resource, the terminal may obtain The adjacent color range and the contrasting color range corresponding to the reference hue, and then the adjacent color and the contrasting color corresponding to the reference hue are respectively selected arbitrarily.
  • the electronic device may pre-store the adjacent color and contrasting color corresponding to each color, and after determining the reference hue of the target multimedia resource, directly obtain the adjacent color and the contrasting color corresponding to the reference hue according to the preset mapping relationship. Contrasting colors.
  • step 103 the target page is displayed, and in the process of displaying the target multimedia resource through the target page, the page label is dynamically rendered and displayed according to the adjacent color and the contrasting color, so that the colors of different areas in the page label are in the adjacent color and Dynamically switch between contrasting colors.
  • the generated page displays the target multimedia resource and the page label, and in the process of displaying the target multimedia resource, first
  • the page labels in the display page are divided into different areas, and then the adjacent colors and contrasting colors are filled into different areas to realize the color rendering of the page labels.
  • the adjacent colors and the contrasting colors are further processed, and a plurality of related colors are produced based on the adjacent colors and the contrasting colors, so that the number of colors is consistent with the number of regions.
  • set the overlapping parts between different areas so that the total area after adding each area is larger than the area of the page label, so as to ensure that no blank white appears in the page label after rendering, and the page label can be rendered more fully.
  • the colors of different regions in the page label are dynamically switched between adjacent colors and contrasting colors, that is, the colors of different regions in the page label continue to change at different times, thereby realizing dynamic color rendering of the page label.
  • the area of each area is controlled to continuously change irregularly during the multimedia resource display process. Due to the fixed colors corresponding to each area, when each area changes, The color corresponding to each area has also moved in the middle of the page label compared to the previous moment. Therefore, the fixed area in the page label is equivalent to a change in color, so that the colors of different areas in the page label are adjacent to each other. Dynamic switching between color and contrasting colors.
  • the lower left corner of the page label is the area 1 displaying the adjacent color at the first moment, and at the second moment the original position of the area 1 is changed to the area 2 displaying the contrasting color, then the area in the lower left corner of the page label is displayed from the first moment to the second Dynamic switching between adjacent colors and contrasting colors is realized in time.
  • control each area to display different colors at different times in a corresponding order that is, the colors corresponding to each area can change.
  • Area 2 is filled with contrasting colors.
  • the color switching between area 1 and area 2 is controlled at preset time intervals. At the first moment, area 1 displays the adjacent color, area 2 displays the contrasting color, and at the second moment area 1 Switch the display color with area 2, then at the second moment area 1 displays the contrasting color, and area 2 displays the adjacent color, thereby realizing the dynamic switching of the colors of different areas in the page tab between the adjacent color and the contrasting color.
  • the colors of different areas in the page label are dynamically switched between the adjacent color and the contrasting color at different times. Since the adjacent color and the contrasting color are similar to the color, the color gradient effect on the page label is realized when the dynamic switching is performed. , which implements dynamic rendering of the color of the page label.
  • the target multimedia resource corresponds to multiple display pages
  • the target multimedia resource is a short video containing five key frames
  • each frame of picture corresponds to a display page.
  • the generation method dynamically renders the page labels in each display page according to the above method, so that the electronic device displays each display page and after switching the display page, the colors of different areas in the page label are dynamically switched.
  • the corresponding reference color tone is determined according to the target multimedia resource in the page display instruction, the corresponding adjacent color and contrast color are obtained according to the reference color tone, and during the display process of the target multimedia resource, the corresponding reference color is obtained based on the adjacent color and Contrasting colors to dynamically render the page tags in the display page. Therefore, the color rendering of the page label is carried out through the adjacent color and contrasting color that are similar to the reference hue of the multimedia resource, so that the color of the page label is coordinated with the color of the multimedia resource, and the aesthetics of the page label and the coordination with the display screen of the multimedia resource are improved.
  • the degree of convenience for users to obtain the information on the page label by dynamically switching the colors of different areas in the page label between adjacent colors and contrasting colors, a dynamic color gradient effect is formed, resulting in visual differentiation, which can highlight the page label, attract users' attention to the page label, and improve the page. Tag attention.
  • Fig. 2 is a flow chart of a specific method for generating a page label according to an exemplary embodiment. As shown in Figure 2, the page label generation method includes the following steps:
  • step 201 the main color tone of the target multimedia resource is acquired.
  • the main tone is the most used color in the target multimedia resource.
  • the target multimedia resource is a short video including five frames of pictures
  • the reference tone of the video is the proportion of all colors contained in the five frames of pictures. most colors.
  • the main tone of the target multimedia resource can be extracted in different ways.
  • the terminal may first determine the main color of each sub-resource in the target multimedia resource, the main color of the cover multimedia resource, and the main color of the first sub-resource. tone.
  • the cover multimedia resource is a cover introducing the target multimedia resource
  • the first sub-resource is the first sub-resource among the multiple sub-resources arranged in sequence by the target multimedia.
  • the target multimedia resource is a short video containing multiple frames of images
  • the cover multimedia resource is a cover image that introduces the name, author, etc. of the short video
  • the first sub-resource is the first frame of image.
  • the terminal may first determine the area occupied by each color in each frame of image, and then count the total area occupied by each color, and then Compare the total area of each color, and take the color with the largest area as the main color of each sub-resource, the main color of the cover multimedia resource, and the main color of the first sub-resource.
  • the main color of each sub-resource, the main color of the cover multimedia resource, and the main color of the first sub-resource are respectively processed with the corresponding weighting factors, and then summed.
  • the main color of each sub-resource, the main color of the cover The main tone of the multimedia resource and the main tone of the first sub-resource are respectively multiplied by the corresponding weighting factors, and then each opportunity is added to obtain the main tone of the target multimedia resource.
  • the weight factors corresponding to the sub-resources, cover multimedia resources, and the first sub-resource can be set according to actual needs, and there is no restriction here.
  • the weight of the sub-resources is the smallest.
  • the weight factor of the cover multimedia resource is set to be the largest, and when the terminal determines that the target multimedia resource does not have a cover, the cover multimedia resource A resource has a weighting factor of zero.
  • the main color of each sub-resource, the cover multimedia resource and the first sub-resource in the target multimedia resource is synthesized to determine the main color of the target multimedia resource, so that the determined main color of the target multimedia resource is more in line with the overall color of the target multimedia resource, The accuracy of the main tone of the acquired target multimedia resource is improved.
  • the terminal may not be able to identify the main color of each sub-resource in the target multimedia resource, or the target multimedia resource does not have a cover set. Therefore, as another possible implementation, the terminal can also use the target multimedia resource. Any one of the main color of each sub-resource, the main color of the cover multimedia resource, and the main color of the first multimedia resource is determined as the main color of the target multimedia resource.
  • the terminal when the target multimedia resource is a short video containing multiple frames of images, and the terminal cannot identify the total area occupied by each color in the short video, it can also obtain the preset cover image of the short video, and identify the The area occupied by each color in the cover image determines the main color of the cover image, and the main color of the cover image is used as the reference color of the target multimedia resource.
  • the short video does not have a cover image
  • the first frame image of the short video is acquired, the main color of the frame image is identified, and the main color of the first frame image is used as the reference color of the target multimedia resource.
  • a reference color tone is determined according to the main color tone of the target multimedia resource.
  • the terminal may directly determine the main tone of the acquired target multimedia resource as the reference tone of the target multimedia resource, or after acquiring the main tone of the target multimedia resource, the saturation and brightness of the main tone, etc. parameters to adjust to obtain a more pure main color.
  • the terminal may also receive a reference tone corresponding to the target multimedia resource sent by the server, where the reference tone is determined by the server according to the main tone of the target multimedia resource. That is, after the server determines the target multimedia resource, it determines the main color of the target multimedia resource through network computing resources, and then sets the main color of the target multimedia resource in the page display instruction and sends it to the terminal, and then the terminal can directly extract it from the page display instruction. The main color of the target multimedia resource. Therefore, the calculation amount of the terminal can be reduced, and the waiting time for dynamically rendering the page label can be shortened.
  • step 203 the corresponding adjacent colors and contrasting colors are determined according to the reference hue.
  • the corresponding adjacent colors and contrasting colors can be selected within the range of similar chroma, saturation and brightness of the reference hue.
  • the hue that is in the first direction of the chroma, saturation, and brightness of the reference hue and belongs to the first set range is selected as the adjacent color, and the reference hue is selected
  • the hue in the first direction of the chroma, saturation, and brightness that belongs to the second set range is used as the contrast color.
  • the first direction may be a counterclockwise direction
  • the second setting range is greater than the first setting range
  • the first setting range and the second setting range may be set according to factors such as user preferences, which are not limited here.
  • various colors may be pre-arranged in a gradually increasing order of chroma, saturation, and brightness, and then the position of the reference hue in the color sequence may be determined, and in a counterclockwise direction, the reference hue may be aligned with the reference hue.
  • the chroma, saturation, and brightness of the reference hue are within the first set range, select the adjacent color, and then continue to increase the range, and within the second set range of the chroma, saturation, and brightness of the reference hue, select the contrasting color .
  • the hue in the second direction of the chroma, saturation, and brightness of the reference hue and belonging to the first set range is selected as the adjacent color, and the hue in the reference hue is selected , the second direction of saturation, and brightness, and the hue that belongs to the second set range is used as the contrast color.
  • the second direction may be clockwise, the second setting range is greater than the first setting range, and the first setting range and the second setting range may be set according to factors such as user preferences, which are not limited here.
  • a reference hue can be selected on the color circle to determine the corresponding adjacent color and contrasting color.
  • the hue circle is a circularly arranged hue spectrum, and the various colors contained in the hue circle are arranged in the order in which the spectrum appears in nature, so each color has a fixed position in the hue circle, and colors with similar hues
  • warm and cool colors are set in different semicircles, and the farther the color is from the current color, the greater the difference from the current color.
  • the colors adjacent to the yellow position are yellow-orange and yellow-green, and blue, which is the complementary color of yellow, is positioned opposite the yellow position.
  • colors with similar hues are set adjacent to each other. Therefore, the position of the reference hue on the hue circle can be taken as the starting point, and the adjacent colors and contrasting colors corresponding to the reference hue can be obtained sequentially in the preset range along the same direction.
  • the same direction may be both clockwise or counterclockwise, and the preset range may be set according to the user's preference for color matching.
  • the counterclockwise direction is 60° away from the position of the reference hue. Select the adjacent color within the range of the reference color, and then continue to select the contrasting color within the range of 120° from the position of the reference color in the counterclockwise direction, so as to obtain a sense of distance from the reference color, and more clearly highlight the contrasting adjacent colors and contrasting colors. .
  • the adjacent colors and the contrasting colors are sequentially obtained within a preset range according to the chroma, saturation, and brightness of the reference hue, and the obtained
  • the adjacent color and contrasting color corresponding to the reference hue are more similar to the reference hue, which facilitates the subsequent realization of the dynamic rendering effect of the color gradient, and is easy to implement.
  • the color of the page label is more harmonious and beautiful with the color of the target multimedia resource.
  • the page labels can be dynamically rendered with multiple colors in different ways, so as to determine the number of rendering colors according to actual needs, and further improve the rendering effect of the page labels.
  • FIG. 3 is a flowchart of another specific page display method according to an exemplary embodiment. As shown in FIG. 3 , the page display method includes the following steps:
  • step 301 the number of colors for rendering the page label is determined.
  • page labels can be rendered in different colors such as two-color rendering, four-color rendering, or six-color rendering, and the number of colors to be rendered can be set according to actual needs, which is not limited here.
  • the terminal may preset the number of colors for rendering the page label. For example, the user can determine the number of colors for rendering the page label according to his own preference, and then the terminal pre-stores the number of colors used for rendering according to the user's settings. For example, in the area where the user does not like displaying the page, there are more In the case of color, the page label can be rendered in four colors by default. After receiving the page display instruction, the terminal determines whether the number of colors used for rendering has been pre-stored. According to the user's preference, the page labels are dynamically rendered with the number of colors, so that the rendering effect of the page labels is more in line with the user's needs and improves the user's satisfaction.
  • the terminal may also acquire the number of colors sent by the server for rendering the page label.
  • the configuration information can be sent to the server at the same time, so that the server can determine the number of colors to render the page label according to the configuration information of the terminal.
  • the server determines, according to the terminal configuration information in the multimedia resource request sent by the electronic device, whether the terminal satisfies the preset conditions for dynamically rendering the page label, and in the case that the terminal satisfies the minimum configuration requirements that can be rendered.
  • the number of colors for rendering the page label may be further determined according to the terminal configuration information. Further, the server sends the number of colors for rendering the page label to the terminal.
  • the server pre-sets the configuration requirements for the terminal when rendering page labels in different numbers of colors, determines the configuration requirement ranges corresponding to the different numbers of colors, and then compares the configuration information of the current electronic device with the threshold value of each configuration requirement range. The comparison is performed to determine the target configuration requirement range in which the configuration information of the current electronic device is located, and then determine the maximum number of colors that the current electronic device can support, and use the number of colors as the current number of colors for rendering page labels.
  • the configuration information of the current electronic device is greater than the threshold of the configuration requirement range corresponding to two-color rendering and smaller than the threshold value of the configuration requirement range corresponding to four-color rendering, it is determined to perform two-color rendering on the page label, so as to ensure that the electronic device
  • the two-color dynamic rendering effect of page labels can be displayed clearly and smoothly to ensure the rendering effect of page labels.
  • step 302 when it is determined that the number of colors for rendering the page label is two, the page label is dynamically rendered and displayed in two colors by using adjacent colors and contrasting colors.
  • step 303 when it is determined that the number of colors to be rendered for the page label is four, the adjacent colors and the contrasting colors are transformed to obtain the first complementary color and the second complementary color.
  • the first complementary color is the same color as the adjacent color
  • the second complementary color is the same color as the contrasting color
  • the first complementary color and the second complementary color are used to complement the four-color rendering of the page label. The other two colors that are missing.
  • the terminal can directly use the adjacent color and the contrasting color to perform two-color dynamic rendering display on the page label when the rendering mode is determined to be two-color rendering.
  • the rendering mode is four-color rendering
  • the optical three primary color values (RGB) of adjacent colors and contrasting colors can be converted into H (hue) S (saturation) B (lightness) values through the corresponding conversion formula.
  • the specific conversion method The conversion formula in the related art may be referred to, and details are not repeated here.
  • the adjacent color and the contrasting color are respectively transformed to obtain the first complementary color and the second complementary color.
  • the terminal adjusts the saturation and brightness of the adjacent color respectively within the preset range to obtain the first complementary color, and then adjusts the saturation and brightness of the contrasting color respectively within the preset range to obtain the second complementary color.
  • Complementary colors since saturation and lightness can reflect the intensity of colors, the first complementary color and the second complementary color are more eye-catching than adjacent colors and contrasting colors, which can stimulate the user's vision to a greater extent and further attract the user's attention.
  • the preset range is the predetermined range of purity and brightness when the human eye is comfortable. During the process of adjusting the purity and brightness of adjacent colors and contrasting colors, ensure that the adjusted purity and brightness are within the corresponding presets. In order to make the acquired first complementary color and second complementary color more attractive to the user's attention on the basis of avoiding damage to the user's eyesight, to ensure the user's eye health.
  • the first complementary color with higher lightness, and the second complementary color with the same hue as the contrasting color but with higher saturation and lightness, the first complementary color and the second complementary color can further stimulate the user's vision on the basis of making the user feel comfortable .
  • step 304 in the process of displaying the target video, four-color dynamic rendering is performed on the page label by using the adjacent color, the contrasting color, the first complementary color and the second complementary color.
  • the page label in the case of performing four-color rendering on the page label, is first divided into four areas, and the adjacent color, the contrasting color, the first complementary color and the second complementary color are respectively filled into different areas. , and then the four areas can be dynamically switched between adjacent colors, contrasting colors, first complementary colors and second complementary colors according to the method in the above-mentioned embodiment, so as to realize the four-color rendering of the page label.
  • the specific implementation process and principle can be Referring to the detailed description of the foregoing embodiments, details are not repeated here.
  • the above method can also be used according to the required number of complementary colors. Adjust the purity and lightness of the adjacent color and contrasting color to different values to generate multiple complementary colors. For example, if the rendering mode is determined to be six-color rendering, you can set the adjacent color and contrasting color within the preset range. The saturation value and the lightness value are respectively increased to 20% within the preset range to generate the first complementary color and the second complementary color, and then the saturation and lightness values of the adjacent color and contrasting color are respectively within the preset range. Turn up to 30% to generate the third and fourth complementary colors, based on the adjacent color, contrasting color, first complementary color, second complementary color, third complementary color and fourth complementary color. Page labels are rendered in six colors.
  • the page display method provided by the embodiments of the present disclosure can determine the number of colors for rendering the page label according to the configuration information of the terminal and the user's preference, and maximize the rendering effect on the basis that the electronic device can support.
  • more eye-catching complementary colors are obtained based on adjacent colors and contrasting colors, which can further highlight page labels and fully attract users' attention.
  • Fig. 4 is a flow chart of yet another specific method for generating page labels according to an exemplary embodiment. As shown in Figure 4, the page label generation method includes the following steps:
  • step 401 N areas intersecting with each other included in the page label at any moment are determined, wherein N is an integer greater than or equal to 2.
  • N is determined according to the rendering mode, for example, when the rendering mode is four-color rendering, N is 4.
  • the page label is first divided into corresponding irregular N regions according to the rendering mode, and the N regions intersect with each other, that is, there are overlapping parts between the N regions. Further, the shapes and areas of the N regions are controlled to change continuously at different times.
  • N dividing lines may be determined first, and each dividing line and the edge of the page label form a corresponding area. For example, as shown in FIG. 5b, when dividing When there are 4 areas, area 1 (Color1), area 2 (Color2), area 3 (Color3) and area 4 (Color4) are generated by 4 curves and each edge in the page label.
  • each dividing line is controlled to change at different times according to the curve equation of the dividing line, so as to determine N dividing lines corresponding to the N regions at any time.
  • the Bezier curve is used as the dividing line, and the control points of each Bezier curve are determined, and then the shape of the Bezier curve can be generated according to the constraints of the curve equation by adjusting the control points. corresponding changes.
  • the areas between the N dividing lines and the corresponding sides of the page label can be determined as N areas intersecting with each other included in the page label at any moment.
  • the state of each curve at any moment can be determined in real time through the curve equation of the dividing line and the corresponding curve animation frequency, and then, according to the area between the N dividing lines and the corresponding edges in the page label, determine N areas included in the page label at this moment.
  • step 402 dynamic rendering is performed on N regions respectively based on adjacent colors and contrasting colors.
  • the corresponding complementary color is obtained based on the adjacent color and the contrasting color, and the adjacent color, the contrasting color and the corresponding number of complementary colors are respectively filled to the corresponding in the area.
  • each area corresponds to a different rendering color
  • the color distribution in the page label will also change, that is, for any position in the page label, it is equivalent to its The colors change at different times.
  • the colors in each area are similar, when the area of each area changes continuously, a color gradient effect is formed, which realizes the dynamic rendering of the color of the page label.
  • the first complementary color and the second complementary color are generated based on the adjacent color and the contrasting color corresponding to the reference hue, and then the adjacent color, the contrasting color, the first complementary color and the third complementary color are generated.
  • the two complementary colors are filled into the four areas of the page label 10, and the areas of the four areas are controlled to change continuously according to the above method, so that the color of any position of the page label is constantly changing, so that as shown in 6, in the first In the page tabs at the moment, the second moment, and the third moment, the colors of different areas are dynamically switched between the adjacent color, the contrasting color, the first complementary color and the second complementary color, forming a liquid flow effect of four colors.
  • step 403 the page tag is blurred and displayed.
  • the blurring process is used to blur the difference in visual contrast between adjacent colors, contrasting colors and the generated complementary colors, so as to improve the gradient effect between adjacent colors, contrasting colors and complementary colors.
  • a blur layer is set on the upper layer of the page label, so as to further improve the transition effect between colors on the page label.
  • the electronic device can call the blur control in the front-end framework of its operating system and set it on the page label.
  • the electronic device can call the Gaussian blur effect control (UIVisualEffectView) provided in the UIKit framework to cover the Above the entire page label to achieve a blur effect.
  • UUVisualEffectView Gaussian blur effect control
  • the dynamically rendered and blurred page label is displayed in the corresponding position of the target page, and the colors of different areas in the page label are dynamically switched between adjacent colors and contrasting colors, and after After blurring, it has a good gradient transition effect between different colors, so that the color of the page label flows like a liquid, which further improves the aesthetics of the page label.
  • the page display method firstly determine N areas intersecting with each other included in the page label at any time, then dynamically render the N areas based on adjacent colors and contrasting colors, and finally set a blur on the upper layer of the page label
  • the layer is visually blurred, which realizes the dynamic switching of the colors of different areas in the page label between adjacent colors and contrasting colors, and has a good gradient transition effect between different colors, so that the various colors on the page label have continuity. liquid flow.
  • the embodiment of the present disclosure further proposes another page display method.
  • FIG. 7 is a flow chart of another page display method according to an exemplary embodiment. As shown in FIG. 7 , the page label generation method includes the following steps:
  • step 501 in response to the received page loading request, the target multimedia resources and page tags included in the target page to be loaded are determined.
  • the server refers to a server that provides computing or application services for various terminals in the network.
  • the server of the present disclosure may be a server of a short video application.
  • the page display method of the embodiment of the present disclosure may be executed by the page display apparatus of the embodiment of the present disclosure, and the page display apparatus of the embodiment of the present disclosure may be configured in the server to The page display method of the embodiment of the present disclosure is executed.
  • the page loading request is a request sent by the terminal to obtain the target multimedia resource and display the target multimedia resource through the page, and the page loading request includes a page opening request or a page refresh request.
  • the page loading request includes the identifier of the target multimedia resource displayed after the page is loaded, and then the server determines the target multimedia resource and the page label displayed on the page according to the identifier of the target multimedia resource in the page loading request.
  • the identifier of the target multimedia resource is attribute information used to distinguish each multimedia resource. For example, it can be the name information of the target multimedia resource, and the server can identify the electronic device request among the numerous multimedia resources according to the identifier of the target multimedia resource.
  • the configuration information of the terminal is the relevant performance parameters of the electronic device for displaying the screen, for example, it may include the speed of the processor, the running capacity, the resolution of the screen, and so on.
  • step 502 the reference hue corresponding to the target multimedia resource is determined.
  • the reference hue is the hue related to the picture, content, and theme of the target multimedia resource. It should be noted that the hue refers to the relative lightness and darkness of the image, which is expressed as color on the color image. Therefore, in an embodiment of the present disclosure
  • the reference tone may be the most used color in the image. For another example, if the target multimedia resource is a short video, the reference tone may be the same as the emotion expressed in the video. adapted colors, etc.
  • the server determines the target multimedia resource according to the identifier of the target multimedia resource, and then can first extract the reference tone of the target multimedia resource through different methods.
  • the main tone of the target multimedia resource is obtained first, and then the reference tone corresponding to the target multimedia resource is determined according to the main tone of the target multimedia resource.
  • the main tone is the most used color in the target multimedia resource.
  • the target multimedia resource is a short video including five frames of pictures
  • the reference tone of the video is the proportion of all colors contained in the five frames of pictures. most colors.
  • the server may first determine the main color of each sub-resource in the target multimedia resource, the main color of the cover multimedia resource, and the main color of the first sub-resource .
  • the cover multimedia resource is a cover introducing the target multimedia resource
  • the first sub-resource is the first sub-resource among the multiple sub-resources arranged in sequence by the target multimedia.
  • the target multimedia resource is a short video containing multiple frames of images
  • the cover multimedia resource is a cover image that introduces the name, author, etc. of the short video
  • the first sub-resource is the first frame of image.
  • the server may first determine the area occupied by each color in each frame of image, and then count the total area occupied by each color, Then, the total area size of each color is compared, and the color with the largest area is used as the main color of each sub-resource, the main color of the cover multimedia resource, and the main color of the first sub-resource.
  • the main color of each sub-resource, the main color of the cover multimedia resource, and the main color of the first sub-resource are respectively processed with the corresponding weighting factors, and then summed.
  • the main color of each sub-resource, the main color of the cover The main color of the multimedia resource and the main color of the first sub-resource are respectively multiplied by the corresponding weighting factors, and then each opportunity is added together to obtain the main color of the target multimedia resource, which realizes the main color,
  • the main color of the cover multimedia resource and/or the main color of the first multimedia resource are weighted and merged.
  • the weight factors corresponding to the sub-resources, cover multimedia resources, and the first sub-resource can be set according to actual needs, and there is no restriction here.
  • the weight of the sub-resources is the smallest.
  • the weight factor of the cover multimedia resource is set to be the largest, and when the terminal determines that the target multimedia resource does not have a cover, the cover multimedia resource A resource has a weighting factor of zero.
  • the server may also determine any one of the main tone of each sub-resource in the target multimedia resource, the main tone of the cover multimedia resource, and the main tone of the first multimedia resource as the target multimedia resource.
  • the main color of the resource may also determine any one of the main tone of each sub-resource in the target multimedia resource, the main tone of the cover multimedia resource, and the main tone of the first multimedia resource as the target multimedia resource.
  • step 503 the corresponding adjacent color and contrasting color are determined according to the reference color tone corresponding to the target multimedia resource.
  • adjacent colors and contrasting colors are colors that are similar to the reference hue.
  • Adjacent color is a color that is similar to the reference hue, has the same cool and warm properties, and has a relatively uniform hue. For example, if the reference hue is red, the adjacent color can be yellow-orange, and if the reference hue is blue, the adjacent color is blue. The color can be dark green, etc.
  • the contrasting color is a color that can be easily distinguished from the reference hue and can achieve visual balance. For example, in the case where the reference hue is blue, the contrasting color can be light green, etc.
  • the server may pre-determine the range of adjacent colors and contrasting colors corresponding to each color, and after determining the reference color tone of the target multimedia resource by analyzing various colors contained in the target multimedia resource, the reference color tone of the target multimedia resource can be obtained.
  • the adjacent color range and the contrasting color range corresponding to the reference hue are respectively selected arbitrarily from the adjacent color and the contrasting color corresponding to the reference hue.
  • the server may pre-store the adjacent color and contrasting color corresponding to each color, and after determining the reference color tone of the target multimedia resource, directly obtain the adjacent color and the corresponding color color according to the preset mapping relationship. Contrasting colors.
  • the server can also obtain the configuration information of the terminal, determine the number of colors for rendering the page label according to the configuration information of the terminal, and then return to the terminal the number of colors to be used for rendering the page label.
  • the server may pre-set the setting index of the configuration information of the terminal when rendering the page label in different numbers of colors, and determine the setting index corresponding to the number of different colors.
  • the setting can be four-color Rendering indicators, and then compare the configuration information of the current electronic device with each set indicator, and if the configuration information of the terminal is lower than the set indicator, determine to perform two-color rendering on the page label; if the configuration information of the terminal is higher than the setting indicator If the specified index is set, or the same as the set index, it is determined to perform four-color rendering on the corresponding page label.
  • step 504 the target page is displayed, and in the process of displaying the target multimedia resource through the target page, the page label is dynamically rendered and displayed according to the adjacent color and the contrasting color, so that the colors of different areas in the page label are between the adjacent color and the contrasting color. dynamically switch between.
  • the server after the server determines the adjacent color and contrasting color corresponding to the reference hue of the target multimedia resource, the server sends the corresponding adjacent color and contrasting color to the terminal, and controls the display of the target multimedia resource and page in the generated page. Label.
  • the control terminal in the process of controlling the terminal to display the target multimedia resource, first divides the page labels in the displayed page into different areas, and then fills adjacent colors and contrasting colors into different areas respectively, so as to realize the display of the page.
  • the color rendering of the label in which, when there are more than two divided areas, the adjacent colors and contrasting colors can be further processed first, and multiple related colors can be produced based on the adjacent colors and the contrasting colors, so that the number of colors and the number of areas are Consistent.
  • set the overlapping parts between different areas so that the total area after adding each area is larger than the area of the page label, so as to ensure that no blank white appears in the page label after rendering, and the page label can be rendered more fully. .
  • the colors of different regions in the page label are dynamically switched between adjacent colors and contrasting colors, that is, the colors of different regions in the page label continue to change at different times, thereby realizing dynamic color rendering of the page label.
  • each area corresponds to a fixed color
  • the fixed area in the page label is equivalent to a change in color, so that the color of different areas in the page label is between the adjacent color and the contrasting color. Dynamic switching.
  • the lower left corner of the page label is the area 1 displaying the adjacent color at the first moment, and at the second moment the original position of the area 1 is changed to the area 2 displaying the contrasting color, then the area in the lower left corner of the page label is displayed from the first moment to the second Dynamic switching between adjacent colors and contrasting colors is realized in time.
  • control each area to display different colors at different times in a corresponding order that is, the colors corresponding to each area can change.
  • Area 2 is filled with contrasting colors.
  • the color switching between area 1 and area 2 is controlled at preset time intervals. At the first moment, area 1 displays the adjacent color, area 2 displays the contrasting color, and at the second moment area 1 Switch the display color with area 2, then at the second moment area 1 displays the contrasting color, and area 2 displays the adjacent color, thereby realizing the dynamic switching of the colors of different areas in the page tab between the adjacent color and the contrasting color.
  • the colors of different areas in the page label are dynamically switched between the adjacent color and the contrasting color at different times. Since the adjacent color and the contrasting color are similar colors, the color gradient effect on the page label is realized when the dynamic switching is performed.
  • the steps of determining the adjacent color and contrasting color corresponding to the reference color tone of the target multimedia resource, and dynamically rendering the page label may refer to the description in the above-mentioned embodiment, which will not be repeated here.
  • the target multimedia resource is determined according to the multimedia resource request sent by the terminal including the identifier of the target multimedia resource and the configuration information of the terminal, and then the target multimedia resource is analyzed to determine the corresponding multimedia resource. the reference tone, and then return to the terminal a multimedia resource display instruction including the target multimedia resource and the reference tone corresponding to the target multimedia resource. Therefore, it is convenient for the subsequent terminal to obtain the reference color tone corresponding to the target multimedia resource, and color-render the page label by using the adjacent color and contrasting color that are similar to the reference color tone of the multimedia resource, so that the color of the page label and the color of the multimedia resource are coordinated, which improves the performance of the page label.
  • the aesthetics of the page label and the degree of coordination with the multimedia resource display screen are convenient for users to obtain the information on the page label. Moreover, by dynamically switching the colors of different areas in the page label between adjacent colors and contrasting colors, a dynamic color gradient effect is formed, resulting in visual differentiation, which can highlight the page label, attract users' attention to the page label, and improve the page. Tag attention.
  • Fig. 8 is a block diagram of a page display apparatus according to an exemplary embodiment.
  • the apparatus 100 includes a first determination module 110 , a second determination module 120 and a dynamic rendering display module 130 .
  • the first determining module 110 is configured to, in response to the received page display instruction, determine the target multimedia resources and page tags included in the target page to be displayed.
  • the second determining module 120 is configured to determine the corresponding adjacent color and contrasting color according to the reference color tone corresponding to the target multimedia resource.
  • the dynamic rendering display module 130 is configured to display the target page.
  • the page label is dynamically rendered and displayed according to the adjacent color and the contrasting color, so that the colors of the different areas in the page label are adjacent to each other. Dynamic switching between color and contrasting colors.
  • the apparatus further includes: an acquisition module configured to acquire the main tone of the target multimedia resource.
  • the third determining module is configured to determine the reference color tone according to the main color tone of the multi-target multimedia resource.
  • the acquisition module is configured to: pass the main color of each sub-resource in the target multimedia resource, the main color of the cover multimedia resource, and the main color of the first sub-resource through corresponding The weighting factors of , are processed and summed to obtain the corresponding hue, which is used as the main hue of the target multimedia resource.
  • the obtaining module is configured to: obtain the main color of each sub-resource in the target multimedia resource, the main color of the cover multimedia resource, and the main color of the first multimedia resource. Any one is determined as the main color of the target multimedia resource.
  • the second determination module 120 further includes: a first selection unit, configured to select the first direction of the chroma, saturation, and brightness of the reference hue, and belong to The hue of the first set range, as the adjacent color.
  • the second selection unit is configured to select the hue in the second direction of the chroma, saturation, and brightness of the reference hue and belonging to the second set range, as the contrast color.
  • the second determination module 120 further includes: a third selection unit, configured to select the second direction of the chroma, saturation, and brightness of the reference hue, and belong to The hue of the first set range, as the adjacent color.
  • the fourth selection unit is configured to select the hue in the second direction of the chroma, saturation, and brightness of the reference hue and belonging to the second set range, as the contrast color.
  • the dynamic rendering and display module 130 is further configured to: perform two-color dynamic rendering and display on the page label by using adjacent colors and contrasting colors.
  • the dynamic rendering display module 130 is further configured to: perform transformation processing on adjacent colors and contrasting colors, respectively, to obtain the first complementary color and the second complementary color; use adjacent colors, The contrasting color, the first complementary color and the second complementary color are displayed in four-color dynamic rendering for the page label.
  • the dynamic rendering display module 130 further includes: a first adjustment unit, configured to adjust the saturation and brightness of adjacent colors respectively within a preset range, so as to obtain the first adjustment unit.
  • a complementary color configured to adjust the saturation and brightness of the contrasting color respectively within the preset range to obtain the second complementary color.
  • the dynamic rendering and presentation module 130 further includes: a first determining unit, configured to determine N mutually intersecting regions included in the page tag at any moment, where N is greater than or an integer equal to 2.
  • the first rendering unit is configured to, at any moment, use adjacent colors and contrasting colors to respectively render N mutually intersecting regions.
  • the first determining unit is further configured to: determine the positions of the N dividing lines included in the page label at any moment; and respectively associate the N dividing lines with the corresponding pages The area between the label boundary lines is determined as N intersecting areas included in the page label at any moment.
  • the apparatus further includes: an obfuscation processing module, configured to perform obfuscation processing on the page tag, and display it.
  • the apparatus further includes: a receiving module configured to receive a reference tone corresponding to the target multimedia resource sent by a server, wherein the reference tone is the server Determined according to the main color of the target multimedia resource.
  • the dynamic rendering and presentation module 130 further includes: a first obtaining unit, configured to obtain the page label rendering mode sent by the server.
  • the second rendering unit is configured to dynamically render and display the page tag according to the adjacent color and the contrasting color based on the rendering mode.
  • the apparatus further includes: a sending module configured to send the configuration information of the terminal to the server, so that the server determines the rendering mode of the page label according to the configuration information of the terminal .
  • the page display apparatus provided by the embodiments of the present disclosure may be configured in a terminal to execute the foregoing page display method. Therefore, with regard to the apparatus in the above-mentioned embodiments, the specific manner in which each module performs operations has been described in detail in the embodiments of the method, and will not be described in detail here.
  • the page display device determines the corresponding reference color according to the target multimedia resource in the page display instruction, obtains the corresponding adjacent color and contrasting color according to the reference color, and in the process of displaying the target multimedia resource, based on the adjacent color and the contrasting color , which dynamically renders the page tags in the display page. Therefore, the color rendering of the page label is carried out through the adjacent color and contrasting color that are similar to the reference hue of the multimedia resource, so that the color of the page label is coordinated with the color of the multimedia resource, and the aesthetics of the page label and the coordination with the display screen of the multimedia resource are improved.
  • the degree of convenience for users to obtain the information on the page label are dynamically switched between adjacent colors and contrasting colors, forming a dynamic color gradient effect, resulting in visual differentiation, which can attract users' attention to the page label and increase the page label's attention. .
  • Fig. 9 is a block diagram of another page display apparatus according to an exemplary embodiment.
  • the apparatus 200 includes a first determination module 210 , a second determination module 220 , a third determination module 230 and a dynamic rendering display module 240 .
  • the first determining module 210 is configured to, in response to the received page loading request, determine the target multimedia resources and page tags included in the target page to be loaded.
  • the second determining module 220 is configured to determine the reference hue corresponding to the target multimedia resource.
  • the third determining module 230 is configured to determine the corresponding adjacent color and contrasting color according to the reference color tone corresponding to the target multimedia resource.
  • the dynamic rendering display module 240 is configured to display the target page.
  • the page label is dynamically rendered and displayed according to the adjacent color and the contrasting color, so that the colors of different areas in the page label are adjacent to each other. Dynamic switching between color and contrasting colors.
  • the second determining module 220 further includes: a first acquiring unit, configured to acquire the main tone of the target multimedia resource.
  • the first determining unit is configured to determine the reference tone corresponding to the target multimedia resource according to the main tone of the target multimedia resource.
  • the first obtaining unit is further configured to: obtain the main color of each sub-resource in the target multimedia resource, the main color of the cover multimedia resource, and/or the first multimedia resource
  • the main color of the target multimedia resource is weighted and fused to generate the main color of the target multimedia resource.
  • the apparatus further includes: an acquisition module configured to acquire configuration information of the terminal.
  • the fourth determining module is configured to determine the rendering mode of the page label according to the configuration information of the terminal.
  • the returning module is configured to return the rendering mode of the page label to the terminal.
  • the fourth determining module is further configured to: when the configuration information of the terminal is lower than the set index, determine that the rendering mode is two-color rendering; when the configuration information of the terminal is high In the case of setting the index or the same as the setting index, it is determined that the rendering mode is four-color rendering.
  • the page display device determines the target multimedia resource according to the identifier of the target multimedia resource included in the page loading request sent by the terminal and the configuration information of the terminal, and then parses the target multimedia resource to determine the corresponding target multimedia resource. and then returns to the terminal a multimedia resource display instruction including the target multimedia resource and the reference tone corresponding to the target multimedia resource. Therefore, it is convenient for the subsequent terminal to obtain the reference color tone corresponding to the target multimedia resource, and color-render the page label by using the adjacent color and contrasting color that are similar to the reference color tone of the multimedia resource, so that the color of the page label and the color of the multimedia resource are coordinated, which improves the performance of the page label.
  • the aesthetics of the page label and the degree of coordination with the multimedia resource display screen are convenient for users to obtain the information on the page label. Moreover, by dynamically switching the colors of different areas in the page label between adjacent colors and contrasting colors, a dynamic color gradient effect is formed, resulting in visual differentiation, which can highlight the page label, attract users' attention to the page label, and improve the page. Tag attention.
  • FIG. 10 is a block diagram of an electronic device 200 for displaying pages according to an exemplary embodiment, wherein the electronic device may be the terminal described in the above embodiment, or the server described in the above embodiment.
  • the above-mentioned electronic device 200 includes:
  • the memory 210 and the processor 220 are connected to a bus 230 of different components (including the memory 210 and the processor 220 ).
  • the memory 210 stores executable instructions of the processor 220 .
  • the processor 220 implements the following steps when executing the executable instruction: in response to the received page display instruction, determining the target multimedia included in the target page to be displayed resource and page label; determine the corresponding adjacent color and contrasting color according to the reference color corresponding to the target multimedia resource; display the target page, in the process of displaying the target multimedia resource through the target page, according to the adjacent color and contrasting color, the page label A dynamic rendering display is performed, so that the colors of different areas in the page tab are dynamically switched between the adjacent colors and the contrasting colors.
  • the processor 220 implements the following steps when executing the executable instructions: in response to the received page loading request, determining the target multimedia included in the target page to be loaded resources and page labels; determine the reference color tone corresponding to the target multimedia resource; determine the corresponding adjacent color and contrasting color according to the reference color tone corresponding to the target multimedia resource; display the target page, and display the target multimedia resource display process through the target page , the page label is dynamically rendered and displayed according to the adjacent color and the contrasting color, so that the colors of different areas in the page label are dynamically switched between the adjacent color and the contrasting color.
  • Bus 230 represents one or more of several types of bus structures, including a memory bus or memory controller, a peripheral bus, a graphics acceleration port, a processor, or a local bus using any of a variety of bus structures.
  • these architectures include, but are not limited to, Industry Standard Architecture (ISA) bus, Micro Channel Architecture (MAC) bus, Enhanced ISA bus, Video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect ( PCI) bus.
  • Electronic device 200 typically includes a variety of electronic device-readable media. These media can be any available media that can be accessed by server 200, including volatile and non-volatile media, removable and non-removable media.
  • Memory 210 may also include computer system readable media in the form of volatile memory, such as random access memory (RAM) 240 and/or cache memory 250 .
  • Server 200 may further include other removable/non-removable, volatile/non-volatile computer system storage media.
  • storage system 260 may be used to read and write to non-removable, non-volatile magnetic media (not shown in FIG. 10, commonly referred to as a "hard drive”).
  • a disk drive for reading and writing to removable non-volatile magnetic disks eg "floppy disks”
  • removable non-volatile optical disks eg CD-ROM, DVD-ROM
  • each drive may be connected to bus 230 through one or more data media interfaces.
  • the memory 210 may include at least one program product having a set (eg, at least one) of program modules configured to perform the functions of various embodiments of the present disclosure.
  • Program modules 270 generally perform the functions and/or methods in the embodiments described in this disclosure.
  • the electronic device 200 may also communicate with one or more external devices 290 (eg, keyboard, pointing device, display 291, etc.), with one or more devices that enable a user to interact with the electronic device 200, and/or with Any device (eg, network card, modem, etc.) that enables the electronic device 200 to communicate with one or more other computing devices. Such communication may take place through input/output (I/O) interface 292 . Also, the electronic device 200 may communicate with one or more networks (eg, a local area network (LAN), a wide area network (WAN), and/or a public network such as the Internet) through a network adapter 293 . As shown, network adapter 293 communicates with other modules of electronic device 200 via bus 230 . It should be understood that, although not shown, other hardware and/or software modules may be used in conjunction with electronic device 200, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives and data backup storage systems.
  • the processor 220 executes various functional applications and data processing by executing programs stored in the memory 210 .
  • the electronic device can execute the above-mentioned page display method, and perform color rendering on the page label by using a color close to the reference hue of the multimedia resource and the contrasting color, so that the color of the page label is consistent with the color of the multimedia resource.
  • the coordination improves the aesthetics of the page label and the coordination degree with the multimedia resource display screen, and facilitates the user to obtain the information on the page label.
  • a dynamic color gradient effect is formed, resulting in visual differentiation, which can highlight the page label, attract users' attention to the page label, and improve the page. Tag attention.
  • the present disclosure also proposes a storage medium.
  • the electronic device when the instructions in the storage medium are executed by the processor of the electronic device, the electronic device can perform the following steps: in response to the received page display instruction, determine the target multimedia resources and page tags included in the target page to be displayed; Determine the corresponding adjacent color and contrasting color according to the reference color tone corresponding to the target multimedia resource; display the target page, and dynamically render the page label according to the adjacent color and contrasting color during the display process of displaying the target multimedia resource through the target page Display to dynamically switch colors in different areas of a page tab between adjacent and contrasting colors.
  • the present disclosure also proposes a storage medium.
  • the electronic device when the instructions in the storage medium are executed by the processor of the electronic device, the electronic device can perform the following steps: in response to the received page loading request, determine the target multimedia resources and page tags included in the target page to be loaded; Determine the reference color tone corresponding to the target multimedia resource; determine the corresponding adjacent color and contrast color according to the reference color tone corresponding to the target multimedia resource; display the target page, in the process of displaying the target multimedia resource through the target page, according to the adjacent color and contrasting colors, and dynamically rendering and displaying the page label, so that the colors of different regions in the page label are dynamically switched between the adjacent colors and the contrasting colors.

Landscapes

  • Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Theoretical Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本公开关于一种页面展示方法及装置,其中,该方法包括:响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;根据与目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示目标页面,在通过目标页面展示目标多媒体资源展示过程中,根据邻近色及对比色,对页面标签进行动态渲染展示,以使页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。

Description

页面展示方法及装置
相关申请的交叉引用
本申请基于申请号为202011062615.9、申请日为2020年09月30日的中国专利申请提出,并要求该中国专利申请的优先权,该中国专利申请的全部内容在此引入本申请作为参考。
技术领域
本公开涉及计算机应用技术领域,尤其涉及一种页面展示方法及装置。
背景技术
随着互联网技术的发展,各种推送视频的应用程序在人们的生活中逐渐普及,视频应用通过相应的算法推送视频流给用户,以满足用户观看各种视频的需求。通常视频应用在展示视频的页面上会设置一个页面标签,用户点击该标签可以参与视频应用提供的各种活动,比如,发送表情、参与投票或者查看推送的其他信息等。
发明内容
本公开提供一种页面展示方法及装置。本公开的技术方案如下:
根据本公开实施例的第一方面,提供一种页面展示方法,包括:响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
根据本公开实施例的第二方面,提供另一种页面展示方法,包括:响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;确定所述目标多媒体资源对应的参考色调;根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
根据本公开实施例的第三方面,提供一种页面展示装置,包括:第一确定模块,被配 置为响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;第二确定模块,被配置为根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;动态渲染展示模块,被配置为展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
根据本公开实施例的第四方面,提供另一种页面展示装置,包括:第一确定模块,被配置为响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;第二确定模块,被配置为确定所述目标多媒体资源对应的参考色调;第三确定模块,被配置为根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;动态渲染展示模块,被配置为展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
根据本公开实施例的第五方面,提供一种电子设备,包括:处理器;用于存储所述处理器可执行指令的存储器;其中,所述处理器被配置为执行所述可执行指令,实现以下步骤:响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
根据本公开实施例的第六方面,提供一种电子设备,包括:处理器;用于存储所述处理器可执行指令的存储器;其中,所述处理器被配置为执行所述可执行指令,实现以下步骤:响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;确定所述目标多媒体资源对应的参考色调;根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
根据本公开实施例的第七方面,提供一种存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得所述电子设备能够执行以下步骤:响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签 进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
根据本公开实施例的第八方面,提供一种存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得所述电子设备能够执行以下步骤:响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;确定所述目标多媒体资源对应的参考色调;根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
此处的附图被并入说明书中并构成本说明书的一部分,示出了符合本公开的实施例,并与说明书一起用于解释本公开的原理,并不构成对本公开的不当限定。
图1是根据一示例性实施例示出的一种页面展示方法的流程图。
图2是根据一示例性实施例示出的一种具体的页面展示方法的流程图。
图3是根据一示例性实施例示出的另一种具体的页面展示方法的流程图。
图4是根据一示例性实施例示出的又一种具体的页面展示方法的流程图。
图5a是根据一示例性实施例示出的一种分割线与页面标签中对应边之间的区域示意图。
图5b是根据一示例性实施例示出的一种页面标签中4个区域分割的示意图。
图6是根据一示例性实施例示出的一种页面标签的渲染效果示意图。
图7是根据一示例性实施例示出的另一种页面展示方法的流程图。
图8是根据一示例性实施例示出的一种页面展示装置框图。
图9是根据一示例性实施例示出的另一种页面展示装置框图。
图10是根据一示例性实施例示出的一种电子设备的框图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案,下面将结合附图,对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是,本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二” 等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
还需说明的是,本公开的页面展示方法可以由服务端执行,也可以由终端执行,此处不做任何限制。为了便于描述本公开的页面展示方法,作为一种示例,下面先以执行主体为终端的实施例进行说明。
图1是根据一示例性实施例示出的一种页面展示方法的流程图,如图1所示,该页面展示方法用于终端中,包括以下步骤。
在步骤101中,响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签。
需要说明的是,在本公开的页面展示方法的执行主体为终端的实施例中,本公开的页面展示方法可以由本公开实施例的页面展示装置执行,本公开实施例的页面展示装置可以配置在终端中,以执行本公开实施例的页面展示方法。终端中包含由服务器提供服务的应用程序或网页等,它可以是用户的手机、平板电脑和个人计算机(PC)等任意类型的电子设备,此处不做限制。
其中,页面可以是终端通过相关的应用程序向用户展示多媒体资源的交互界面,多媒体资源是包括多种媒体的综合资源,比如,本公开的多媒体资源可以为推送的视频流,而目标多媒体资源则可以是终端通过短视频应用向用户展示的用户搜索的短视频。
其中,页面展示指令包括页面打开指令或页面刷新指令等通过目标页面向用户展示目标多媒体资源的指令,比如,用户在短视频应用的视频推送列表中点击了一个短视频的情况下,终端接收到该短视频应用的服务器发送的打开一个新的页面并在该目标页面中播放该目标短视频的指令,又比如,在用户观看完一个短视频的情况下,终端接收到服务器发送的刷新当前页面并继续展示相关类型的视频的指令。
在本公开的实施例中,终端可以先向服务器发送页面加载请求,以获取目标多媒体资源并通过页面向用户展示,页面加载请求中可包括目标多媒体资源的标识,进而服务端根据目标多媒体资源的标识确定目标多媒体资源,并向终端返回包含标多媒体资源以及页面标签的页面展示指令。
进一步的,终端响应接收到的页面展示指令,在一些实施例中可包括从页面展示指令中提取出目标多媒体资源以及页面标签,以及生成目标页面等,以确定待展示的目标页面中包括的目标多媒体资源以及页面标签,便于后续在目标页面中向用户展示目标多媒体资 源。
在步骤102中,根据与目标多媒体资源对应的参考色调,确定对应的邻近色及对比色。
其中,参考色调是与目标多媒体资源的画面、内容和主题等相关的色调,需要说明的是,色调是指图像的相对明暗程度,在彩色图像上表现为颜色,因此,在本公开的实施例中,当目标多媒体资源包括彩色图像时,参考色调可以是图像中使用最多的颜色。比如,在目标多媒体资源为一段短视频的情况下,参考色调可以是与该视频表达的情感相适应的颜色等。
其中,邻近色及对比色是与参考色调相近的颜色。邻近色是与参考色调的色相较为近似,冷暖性质一致,色调较为统一的颜色,比如,在参考色调为红色的情况下,邻近色可以为黄橙色,在参考色调为蓝色的情况下,邻近色可以为深绿色等。而对比色是可以较容易与参考色调相区分且可以实现视觉平衡的颜色,比如,在参考色调为蓝色的情况下,对比色可以为浅绿色等。
在本公开的一些实施例中,终端可以预先确定各颜色对应的邻近色及对比色的范围,在终端通过解析目标多媒体资源中包含的各种颜色等方式确定目标多媒体资源的参考色调后,可以获取该参考色调对应的邻近色范围及对比色的范围,然后分别从中任意选取出与该参考色调对应的邻近色及对比色。
在本公开的一些实施例中,电子设备可以预先存储各颜色对应的邻近色及对比色,在确定目标多媒体资源的参考色调后,根据预设的映射关系直接获取与该参考色调对应的邻近色及对比色。
在步骤103中,展示目标页面,在通过目标页面展示目标多媒体资源展示过程中,根据邻近色及对比色,对页面标签进行动态渲染展示,以使页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
在本公开的实施例中,在终端确定目标多媒体资源的参考色调对应的邻近色及对比色后,在生成的页面中展示目标多媒体资源以及页面标签,并在展示目标多媒体资源的过程中,先将展示页面中的页面标签划分不同的区域,再将邻近色及对比色分别填充至不同的区域中,以实现对页面标签的颜色渲染,其中,在划分的区域超过两个的情况下,可以先对邻近色及对比色进行进一步处理,基于邻近色及对比色生产相关的多个颜色,以使颜色个数与区域个数一致。并且,设置不同区域间存在交叠的部分,以使各个区域相加后的总面积大于页面标签的面积,从而保证渲染后页面标签中不会出现空白色,更加充分的对页面标签进行着色渲染。
进一步的,使页面标签中不同区域的颜色在邻近色及对比色之间动态切换,即页面标签中不同区域的颜色在不同时刻下持续发生变化,从而实现对页面标签的动态颜色渲染。
在一些实施例中作为一种可能的实现方式,控制各个区域的面积在多媒体资源展示过程中持续发生不规则的变化,由于各个区域分别对应的固定的颜色,在各区域发生变化的情况下,各区域对应的颜色相较于前一时刻在页面标签的中位置也发生了移动,因此,对于页面标签中固定的区域相当于颜色发生了改变,从而实现了页面标签中不同区域的颜色在邻近色及对比色之间动态切换。比如,页面标签左下角在第一时刻为显示邻近色的区域1,在第二时刻原本区域1所在的位置变换为显示对比色的区域2,则页面标签左下角的区域在第一时刻至第二时刻间实现了邻近色及对比色之间动态切换。
作为另一种可能的实现方式,以相应的顺序控制每个区域在不同时刻下显示不同的颜色,即各个区域分别对应的颜色可以发生变化,比如,在先将区域1填充邻近色,先将区域2填充对比色,在目标多媒体资源展示过程中,以预设的时间间隔控制区域1和区域2进行颜色切换,在第一时刻区域1显示邻近色,区域2显示对比色,在第二时刻区域1和区域2进行显示颜色的切换,则在第二时刻区域1显示对比色,区域2显示邻近色,从而实现了页面标签中不同区域的颜色在邻近色及对比色之间动态切换。
由此,页面标签中不同区域的颜色在不同时刻下在邻近色及对比色之间进行动态切换,由于邻近色及对比色为与相近的颜色,在进行动态切换时实现了页面标签上的颜色渐变效果,实现了对页面标签的颜色进行动态渲染。
需要说明的是,在目标多媒体资源对应多个展示页面的情况下,比如,目标多媒体资源为包含五个关键帧的短视频,每帧画面对应一个展示页面,本公开的实施例提供的页面标签生成方法对每个展示页面中的页面标签均按照上述方式进行动态渲染,以使电子设备展示每个展示页面和在切换展示页面后,页面标签中不同区域的颜色均进行动态切换。
本公开的实施例提供的页面标签生成方法,根据页面展示指令中的目标多媒体资源确定对应的参考色调,根据参考色调获取对应的邻近色及对比色,在目标多媒体资源展示过程中,基于邻近色及对比色,对展示页面中的页面标签进行动态渲染。由此,通过与多媒体资源的参考色调相近邻近色及对比色对页面标签进行色彩渲染,使页面标签的色彩与多媒体资源的色彩相协调,提高了页面标签的美观程度和与多媒体资源展示画面的协调程度,便于用户获取页面标签上的信息。并且,通过页面标签中不同区域的颜色在邻近色及对比色之间动态切换,形成了动态的颜色渐变效果,造成视觉上的差异化,从而可以突出页面标签,吸引用户关注页面标签,提升了页面标签的关注度。
基于上述实施例,为了更加清楚的说明终端确定目标多媒体资源对应的参考色调,以及获取与参考色调对应的邻近色及对比色的具体实现过程,在本公开的实施例还提出了一种具体的页面展示方法。
图2是根据一示例性实施例示出的一种具体的页面标签生成方法的流程图。如图2所 示,该页面标签生成方法包括以下步骤:
在步骤201中,获取目标多媒体资源的主色调。
其中,主色调是目标多媒体资源中使用最多的颜色,比如,在目标多媒体资源为一个包括五帧画面的短视频的情况下,该视频的参考色调为五帧画面包含的所有颜色中所占比例最多的颜色。
在本公开的实施例中,当终端获取目标多媒体资源后,可以通过不同的方式提取出目标多媒体资源的主色调。
作为一种可能的实现方式,在目标多媒体资源包括多个子资源的情况下,终端可以先确定该目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调。其中,封面多媒体资源是介绍该目标多媒体资源的封面,首个子资源在目标多媒体顺序排列的多个子资源中的第一个子资源。比如,目标多媒体资源为包含多帧图像的短视频时,封面多媒体资源为介绍该短视频名称、作者等的封面图像,而首个子资源是第一帧图像。在一些实施例中,当子资源、封面多媒体资源、及首个子资源为图像时,终端可以先确定每帧图像中各颜色所占的面积,然后统计出每种颜色所占的总面积,进而比较各颜色的总面积大小,以所占面积最大的颜色为各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调。
进一步的,将各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调分别与对应的权重因子进行处理,再求和,比如,可以将各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调分别与对应的权重因子相乘,然后再将各个乘机相加,以得到目标多媒体资源的主色调。其中,子资源、封面多媒体资源、及首个子资源对应的权重因子可以根据实际需要进行设置,此处不做限制,比如,可以将子资源的权重因子设为最大、封面多媒体资源其次、及首个子资源的权重最小,又比如,在用户更看重目标多媒体资源的封面的情况下,将封面多媒体资源的权重因子设为最大,而在终端判断出该目标多媒体资源没有封面的情况下,封面多媒体资源的权重因子为零。
由此,综合目标多媒体资源中的各个子资源、封面多媒体资源和首个子资源的主色调确定目标多媒体资源的主色调,使确定出的目标多媒体资源的主色调更加符合目标多媒体资源的整体颜色,提高了获取的目标多媒体资源的主色调的准确性。
可以理解,实际应用中可能存在终端无法识别目标多媒体资源中每个子资源的主色调,或者目标多媒体资源没有设置封面的情况,因此,作为另一种可能的实现方式,终端还可以将目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、及首个多媒体资源的主色调中的任意一个,确定为目标多媒体资源的主色调。
举例而言,在目标多媒体资源为包含多帧图像的短视频,且终端无法识别短视频中每 种颜色所占的总面积的情况下,还可以获取该短视频预设的封面图,并识别该封面图像中各颜色所占的面积以确定该封面图像的主色调,以该封面图像的主色调为目标多媒体资源的参考色调。在短视频不存在封面图的情况下,则获取该短视频的首帧图像,并识别该帧图像的主色调,以该首帧图像的主色调为目标多媒体资源的参考色调。
由此,提高了获取目标多媒体资源的主色调的成功率,降低了终端的计算量。
在步骤202中,根据目标多媒体资源的主色调,确定参考色调。
在本公开实施例中,可以终端直接将获取目标多媒体资源的主色调确定为目标多媒体资源的参考色调,也可以在获取目标多媒体资源的主色调后,再对主色调的饱和度和明亮度等参数进行调整,以获取更加纯正的主色调。
在本公开的另一个实施例中,终端还可以接收服务端发送的目标多媒体资源对应的参考色调,其中,参考色调为服务端根据目标多媒体资源的主色调确定的。即服务端确定目标多媒体资源后,通过网络计算资源确定目标多媒体资源的主色调,然后将目标多媒体资源的主色调设置在页面展示指令中发送给终端,进而终端可以直接在页面展示指令中提取出目标多媒体资源的主色调。由此,可以减少终端的计算量,缩短了对页面标签进行动态渲染的等待时间。
在步骤203中,根据参考色调确定对应的邻近色及对比色。
在本公开的实施例中,由于获取的邻近色及对比色是与参考色调相近的颜色,故可以在参考色调的色度、饱和度和明亮度相近的范围内选取对应的邻近色及对比色。
在本公开的一些实施例中,选取与在参考色调在的色度、饱和度、明亮度的第一方向上、且属于第一设定范围的色调,作为邻近色,并且,选取在参考色调的色度、饱和度、明亮度的第一方向、且属于第二设定范围的色调,作为对比色。其中,第一方向可以为逆时针方向,第二设定范围大于第一设定范围,第一设定范围和第二设定范围可以根据用户的偏好等因素进行设置,此处不做限制。在一些实施例中,可以预先将各种颜色按照以色度、饱和度、明亮度逐渐递增的顺序排列后,确定参考色调在该颜色顺序中的位置,并沿逆时针方向,在与参考色调的色度、饱和度、明亮度相距第一设定范围内,选取邻近色,然后继续增大范围,在与参考色调的色度、饱和度、明亮度相距第二设定范围内,选取对比色。
在本公开的一些实施例中,选取在参考色调的色度、饱和度、明亮度的第二方向、且属于第一设定范围的色调,作为邻近色,并且,选取在参考色调的色度、饱和度、明亮度的第二方向、且属于第二设定范围的色调,作为对比色。其中,第二方向可以为顺时针方向,第二设定范围大于第一设定范围,第一设定范围和第二设定范围可以根据用户的偏好等因素进行设置,此处不做限制。
举例而言,可以在色相环(color circle)上选取参考色调确定对应的邻近色及对比色。
其中,色相环是一种圆形排列的色相光谱,色相环中包含的各种颜色按照光谱在自然中出现的顺序排列,因此在色相环中每种颜色具有固定的位置,且色调相近的颜色邻近设置,暖色调和冷色调的颜色设置在不同的半圆内,距离当前颜色的位置越远的颜色,与当前颜色的差别越大。比如,与黄色的位置相邻的颜色为黄橙色和黄绿色,与黄色成互补色的蓝色位于黄色位置的相对立的位置上。而在色相环中色调相近的颜色邻近设置,因此,可以以参考色调在色相环上的位置为出发点,沿相同方向,在预设的范围内依次获取与参考色调对应的邻近色及对比色。
其中,相同的方向可以同为顺时针方向或同为逆时针方向,预设的范围可以根据用户对于颜色搭配的喜好设定。
比如,在根据用户的历史使用记录判断出用户偏好颜色更加协调的情况下,在参考色调在色相环上的位置后,沿逆时针方向在与参考色调的位置相距30°的范围内选取邻近色,然后,再继续沿逆时针方向在与参考色调的位置相距30°的范围内选取对比色,以获取与参考色调更为相近的邻近色及对比色。
又比如,在根据用户的历史使用记录判断出用户偏好颜色间存在明显的对比与平衡的情况下,在参考色调在色相环上的位置后,沿逆时针方向在与参考色调的位置相距60°的范围内选取邻近色,然后,再继续沿逆时针方向在与参考色调的位置相距120°的范围内选取对比色,以获取与参考色调拉开距离感,更加明显的突出对比的邻近色及对比色。
本公开的实施例提供的页面展示方法,在获取与参考色调的对应的邻近色及对比色时,根据参考色调的色度、饱和度、明亮度在预设范围内依次获取邻近色及对比色,获取的与参考色调对应的邻近色及对比色与参考色调更加相近,便于后续实现颜色渐变的动态渲染效果,且易于实现,而后续根据与参考色调相近的邻近色及对比色对页面标签进行渲染时,使页面标签的颜色与目标多媒体资源的颜色更加协调美观。
在本公开一种可能的实现形式中,可以通过不同的方式对页面标签进行多种颜色的动态渲染,以根据实际需要确定渲染颜色的数量,进一步提升页面标签的渲染效果。
图3是根据一示例性实施例示出的另一种具体的页面展示方法的流程图,如图3所示,该页面展示方法包括以下步骤:
在步骤301中,确定对页面标签进行渲染的颜色数量。
在本公开的实施例中,可以对页面标签进行双色渲染、四色渲染或六色渲染等不同颜色数量的渲染,进行渲染的颜色数量可根据实际需要进行设置,此处不做限制。
在本公开一些实施例中,终端可以预先设置对页面标签进行渲染的的颜色数量。举例 而言,用户可以根据自身的偏好确定对页面标签进行渲染的颜色数量,然后终端根据用户的设置的预存渲染时使用的颜色数量,比如,在用户不喜欢展示页面的区域内存在较多的颜色的情况下,则可以预设对页面标签进行四色渲染,终端在接收页面展示指令后,确定是否预先存储了渲染时使用的颜色数量,在是的情况下,获取预存的颜色数量,以根据用户的偏好对页面标签进行颜色数量的动态渲染,使页面标签的渲染效果更符合用户的需求,提高用户的满意度。
在本公开一些实施例中,终端还可以获取服务端发送的对页面标签进行渲染的颜色数量。终端在发送资源请求时,可以将配置信息发送给同时服务端,以使服务端根据终端的配置信息,确定确定对页面标签进行渲染的颜色数量。进一步,服务端根据电子设备发送的多媒体资源请求中的终端配置信息,确定终端是否满足对页面标签进行动态渲染的预设条件,在确地终端满足可以进行渲染的最低配置要求的情况下,还可以进一步根据终端配置信息确定对页面标签进行渲染的颜色数量。进而,服务端将对页面标签进行渲染的颜色数量发送给终端。
举例而言,服务端预先设置以不同数量的颜色对页面标签进行渲染时对终端的配置要求,确定不同颜色数量对应的配置要求范围,然后将当前电子设备的配置信息与各配置要求范围的阈值进行比较,以确定当前电子设备的配置信息所处的目标配置要求范围,进而确定当前电子设备可以支持的最大颜色数量,以该颜色数量为当前的对页面标签进行渲染的颜色数量。比如,在确定当前电子设备的配置信息大于双色渲染对应的配置要求范围的阈值且小于于四色渲染对应的配置要求范围的阈值的情况下,则确定对页面标签进行双色渲染,从而保证电子设备可以清晰、流畅的显示页面标签的双色动态渲染效果,确保页面标签的渲染效果。
在步骤302中,在确定对页面标签进行渲染的颜色数量为两个的情况下,利用邻近色及对比色,对页面标签进行双色动态渲染展示。
在步骤303中,在确定对页面标签进行渲染的颜色数量为四个的情况下,将邻近色及对比色别进行变换处理,以获取第一补充色及第二补充色。
其中,第一补充色是与邻近色的色相相同的颜色,第二补充色是与对比色的色相相同的颜色,第一补充色及第二补充色用于补充对页面标签进行四色渲染时所欠缺的另外两种颜色。
在本公开实施例中,终端在获取参考色调对应的邻近色及对比色后,在确定渲染模式为双色渲染的情况下,可直接利用邻近色及对比色,对页面标签进行双色动态渲染展示,在确定渲染模式为四色渲染的情况下,可先将邻近色及对比色的光学三原色值(RGB)通过相应的转换公式转换成H(色相)S(饱和度)B(明度)值,具体的转换方法可参照相 关技术中的转换公式,此处不再赘述。
进一步的,将邻近色及对比色分别进行变换处理,以获取第一补充色及第二补充色。举例而言,终端将邻近色的饱和度及明亮度分别调整至预设范围内,以获取第一补充色,再将对比色的饱和度及明亮度分别调整至预设范围内,以获取第二补充色。其中,由于饱和度和明度可以反映色彩的强烈程度,因此,第一补充色及第二补充色相较于邻近色及对比色更加醒目,可以更大程度的刺激用户的视觉,进一步吸引用户的关注。
需要说明的是,预设范围是预先确定的人眼感到舒适时的纯度范围和明度范围,在调整邻近色及对比色的纯度及明度的过程中,确保调整后的纯度及明度在对应的预设范围内,以使获取的第一补充色及第二补充色在可以更加吸引用户的关注的基础上,避免损害用户的视力,保证用户的用眼健康。比如,将邻近色及对比色的饱和度值和明度值在预设范围内分别调高20%,再通过转换公式将调整后的HSB值转换为RGB值,以获取与邻近色色相相同但饱和度和明度较高的第一补充色,和对比色色相相同但饱和度和明度较高的第二补充色,第一补充色及第二补充色可以在使用户感到舒适的基础上进一步刺激用户的视觉。
在步骤304中,在目标视频展示过程中,利用邻近色、对比色、第一补充色及第二补充色,对页面标签进行四色动态渲染展示。
在本公开实施例中,在对页面标签进行四色渲染的情况下,先将页面标签划分为四个区域,将邻近色、对比色、第一补充色及第二补充色分别填充至不同的区域中,然后可以按照上述实施例中的方式使四块区域在邻近色、对比色、第一补充色及第二补充色间动态切换,实现对页面标签的四色渲染,具体实现过程及原理,可以参照上述实施例的详细描述,此处不再赘述。
需要说明的是,在本公开的其他实施例中,在确定页面标签的渲染模式为大于四色的多色渲染模式的情况下,还可以按照上述方法,根据所需的补充色的个数,将邻近色及对比色的的纯度及明度调整为不同的值,以生成多个补充色,比如,在确定渲染模式为六色渲染的情况下,可在预设范围内,先将邻近色及对比色的饱和度值和明度值在预设范围内分别调高至20%,以生成第一补充色及第二补充色,再将邻近色及对比色的饱和度值和明度值在预设范围内分别调高至30%,以生成第三补充色及第四补充色,从而基于邻近色、对比色、第一补充色、第二补充色、第三补充色及第四补充色,对展示页面中的页面标签进行六色渲染。
本公开的实施例提供的页面展示方法,可以根据终端的配置信息和用户的偏好确定对页面标签进行渲染的颜色数量,在电子设备可支持的基础上最大程度的提高渲染效果。并且,对页面标签进行多色渲染时,基于邻近色及对比色获取更加醒目补充色,可以进一步突出页面标签,充分吸引用户的注意。
基于上述实施例,为了更加清楚的描述终端对展示页面中的页面标签进行动态渲染的具体实现过程,在本公开的实施例还提出了一种具体的页面标签生成方法。
图4是根据一示例性实施例示出的又一种具体的页面标签生成方法的流程图。如图4所示,该页面标签生成方法包括以下步骤:
在步骤401中,确定页面标签在任一时刻包括的彼此相交的N个区域,其中,N为大于或等于2的整数。
其中,N根据渲染模式确定,比如,在渲染模式为四色渲染的情况下,N为4。在确定渲染模式后,先根据渲染模式将页面标签划分为对应的不规则的N个区域,且N个区域彼此相交,即N个区域两两间存在重叠的部分。进一步的,控制N个区域的形状和面积在不同时刻下持续发生变换。
在本公开的实施例中,由于区域由不同的线围成,因此,可以先确定N条分割线,各分割线与页面标签的边线组成相应的区域,比如,如图5b所示,当划分4个区域时,通过4条曲线与页面标签中各个边生成区域1(Color1)、区域2(Color2)、区域3(Color3)和区域4(Color4)。
进一步的,根据分割线的曲线方程控制各分割线的形状在不同时刻下发生变化,以在任一时刻,确定N个区域分别对应的N条分割线。作为一种可能的实现方式,以贝塞尔曲线作为分割线,并确定每条贝塞尔曲线的控制点,之后通过调整控制点,即可使贝塞尔曲线的形状按照曲线方程的约束产生相应的变化。
之后,即可将N条分割线分别与所述页面标签对应边之间的区域,确定为所述页面标签在任一时刻包括的彼此相交的N个区域。
可以理解的是,在贝塞尔曲线在动态变换的过程中,分割线的形状会发生变化,则分割线与页面标签中对应边的围城的区域也会变化。比如,在N=4的情况下,如图5a和5b所示,5a为在任一时刻,任一分割线与页面标签中对应边之间的区域示意图,图5b为4条分割曲线的交点为页面标签的四个顶点时,页面标签中4个区域分割的示意图。
在一些实施例中,可以通过分割线的曲线方程及对应的曲线动画频率,来实时确定各个曲线在任一时刻的状态,进而,根据N条分割线分别与页面标签中对应边间的区域,确定该时刻页面标签中包含的N个区域。
在步骤402中,基于邻近色及对比色,对N个区域分别进行动态渲染。
在本公开的实施例中,根据上述实施例中的方法根据区域的个数N,基于邻近色及对比色获取对应的补充色,并将邻近色、对比色及相应个数的补充色分别填充至对应的区域中。
进一步的,由于每个区域对应不同的渲染颜色,从而在各区域的面积发生变化的情况 下,页面标签中的颜色分布也会发生变化,即对于页面标签中任一位置而言,相当于其在不同时刻的颜色发生了改变。又因为,每个区域中的颜色相近,当每个区域的面积不断发生变化时,行成了颜色渐变的效果,实现了对页面标签的颜色进行动态渲染。
举例而言,如图6所示,在进行四色渲染时,基于参考色调对应的邻近色和对比色生成第一补充色和第二补充色,然后将邻近色、对比色、第一补充色和第二补充色填充至页面标签10的四个区域中,并按照上述方式控制四个区域的面积持续发生变换,使页面标签任一位置的颜色在不断变化,从而如6所示的,在第一时刻、第二时刻和第三时刻下的页面标签中,不同区域的颜色在邻近色、对比色、第一补充色和第二补充色之间动态切换,形成四种颜色的液体流动效果。
在步骤403中,对页面标签进行模糊处理,并展示。
其中,模糊处理用于模糊邻近色、对比色及生成的补充色在视觉对比上的差异,提高邻近色、对比色及补充色之间的渐变效果。
在本公开的实施例中,电子设备在对N个区域分别进行动态渲染后,在页面标签上层设置模糊图层,以进一步提高页面标签上各颜色间的过度效果。作为一种可能的实现方式,电子设备可以调用其操作系统的前端框架中的模糊控件,并设置在页面标签上,比如,电子设备可以调用UIKit框架中提供的高斯模糊效果控件(UIVisualEffectView)覆盖在整个页面标签上面,以实现模糊效果。
进一步的,对页面标签进行模糊处理后,将进行动态渲染和模糊处理后的页面标签在目标页面的相应位置进行展示,页面标签中不同区域的颜色在邻近色及对比色之间动态切换,且经过模糊处理后,具有较好的不同颜色间的渐变过度效果,使页面标签的颜色如同液体流动,进一步提高了页面标签的美观度。
本公开的实施例提供的页面展示方法,先确定页面标签在任一时刻包括的彼此相交的N个区域,再基于邻近色及对比色,对N个区域分别进行动态渲染,最后在页面标签上层设置模糊图层进行视觉上模糊效果,实现了页面标签中不同区域的颜色在邻近色及对比色之间动态切换,且具有较好的不同颜色间的渐变过度效果,使页面标签上各种颜色具有连续性的液体流动。
基于上述实施例,为了更加清楚的描述服务端执行页面展示方法的具体实现过程,本公开的实施例还提出了另一种的页面展示成方法。
图7是根据一示例性实施例示出的另一种页面展示方法的流程图,如图7所示,该页面标签生成方法包括以下步骤:
在步骤501中,响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标 多媒体资源及页面标签。
需要说明的是,服务端是指在网络中为各种终端提供计算或者应用服务的服务器,比如,本公开的服务端可以为某短视频应用程序的服务器。当本公开的页面展示方法的执行主体为服务端时,本公开实施例的页面展示方法可以由本公开实施例的页面展示装置执行,本公开实施例的页面展示装置可以配置在服务端中,以执行本公开实施例的页面展示方法。
其中,页面加载请求是终端发送的获取目标多媒体资源,并通过页面展示目标多媒体资源的请求,页面加载请求包括页面打开请求或页面刷新请求等。页面加载请求中包括页面加载后展示的目标多媒体资源的标识,进而服务端根据页面加载请求中的目标多媒体资源的标识确定目标多媒体资源及在页面上展示的页面标签。
其中,目标多媒体资源的标识是用于区分各多媒体资源的属性信息,比如,它可以是目标多媒体资源的名称信息,服务端根据目标多媒体资源的标识可以在众多的多媒体资源中识别出电子设备请求的目标多媒体资源。终端的配置信息是电子设备进行画面显示的相关性能参数,比如,它可以包括处理器的速度、运行能存和屏幕的分辨率等等。
在步骤502中,确定目标多媒体资源对应的参考色调。
其中,参考色调是与目标多媒体资源的画面、内容和主题等相关的色调,需要说明的是,色调是指图像的相对明暗程度,在彩色图像上表现为颜色,因此,在本公开一个实施例中,在目标多媒体资源包括彩色图像的情况下,参考色调可以是图像中使用最多的颜色,又比如,在目标多媒体资源为一段短视频的情况下,参考色调可以是与该视频表达的情感相适应的颜色等。在本公开的一个实施例中,服务端根据先目标多媒体资源的标识确定目标多媒体资源,然后可以先通过不同的方式提取出目标多媒体资源的参考色调。
在本公开的实施例中,先获取目标多媒体资源的主色调,再根据目标多媒体资源的主色调,确定目标多媒体资源对应的参考色调。
其中,主色调是目标多媒体资源中使用最多的颜色,比如,在目标多媒体资源为一个包括五帧画面的短视频的情况下,该视频的参考色调为五帧画面包含的所有颜色中所占比例最多的颜色。
在获取目标多媒体资源的主色调时,作为一种可能的实现方式,服务端可以先确定该目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调。其中,封面多媒体资源是介绍该目标多媒体资源的封面,首个子资源在目标多媒体顺序排列的多个子资源中的第一个子资源。比如,目标多媒体资源为包含多帧图像的短视频的情况下,封面多媒体资源为介绍该短视频名称、作者等的封面图像,而首个子资源是第一帧图像。在一些实施例中,当子资源、封面多媒体资源、及首个子资源为图像时,服务端可以先确定每帧图像中各颜色所占的面积,然后统计出每种颜色所占的总面积,进而 比较各颜色的总面积大小,以所占面积最大的颜色为各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调。
进一步的,将各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调分别与对应的权重因子进行处理,再求和,比如,可以将各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调分别与对应的权重因子相乘,然后并再将各个乘机相加,以得到目标多媒体资源的主色调,实现了对各个子资源的主色调、封面多媒体资源的主色调、和/或首个多媒体资源的主色调进行加权融合。其中,子资源、封面多媒体资源、及首个子资源对应的权重因子可以根据实际需要进行设置,此处不做限制,比如,可以将子资源的权重因子设为最大、封面多媒体资源其次、及首个子资源的权重最小,又比如,在用户更看重目标多媒体资源的封面的情况下,将封面多媒体资源的权重因子设为最大,而在终端判断出该目标多媒体资源没有封面的情况下,封面多媒体资源的权重因子为零。
作为另一种可能的实现方式,服务端还可以将目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、及首个多媒体资源的主色调中的任意一个,确定为目标多媒体资源的主色调。
在步骤503中,根据与目标多媒体资源对应的参考色调,确定对应的邻近色及对比色。
其中,邻近色及对比色是与参考色调相近的颜色。邻近色是与参考色调的色相较为近似,冷暖性质一致,色调较为统一的颜色,比如,在参考色调为红色的情况下,邻近色可以为黄橙色,在参考色调为蓝色的情况下,邻近色可以为深绿色等。而对比色是可以较容易与参考色调相区分且可以实现视觉平衡的颜色,比如,在参考色调为蓝色的情况下,对比色可以为浅绿色等。
在本公开的一些实施例中,服务端可以预先确定各颜色对应的邻近色及对比色的范围,在通过解析目标多媒体资源中包含的各种颜色等方式确定目标多媒体资源的参考色调后,可以获取该参考色调对应的邻近色范围及对比色的范围,分别从中任意选取出与该参考色调对应的邻近色及对比色。
在本公开的一些实施例中,服务端可以预先存储各颜色对应的邻近色及对比色,在确定目标多媒体资源的参考色调后,根据预设的映射关系直接获取与该参考色调对应的邻近色及对比色。
需要说明的是,在本公开的实施例中,服务端还可以获取终端的配置信息,根据终端的配置信息,确定对页面标签进行渲染的颜色数量,再向终端返回确定对页面标签进行渲染的颜色数量,以使终端对页面标签进行不同颜色数量的动态渲染。在一些实施例中,服务端可以预先设置以不同数量的颜色对页面标签进行渲染时对终端的配置信息的设定指 标,确定不同颜色数量对应的设定指标,比如,设定可以进行四色渲染的指标,然后将当前电子设备的配置信息与各设定指标进行比较,在终端的配置信息低于设定指标的情况下,确定对页面标签进行双色渲染;在终端的配置信息高于设定指标、或与设定指标相同的情况下,确定对所对页面标签进行四色渲染。
在步骤504中,展示目标页面,在通过目标页面展示目标多媒体资源展示过程中,根据邻近色及对比色,对页面标签进行动态渲染展示,以使页面标签中不同区域的颜色在邻近色及对比色之间动态切换。
在本公开的实施例中,在服务端确定目标多媒体资源的参考色调对应的邻近色及对比色后,将对应的邻近色及对比色发送给终端,并控制在生成的页面中展示目标多媒体资源以及页面标签。
在一些实施例中,在控制终端展示目标多媒体资源的过程中,先控制终端将展示页面中的页面标签划分不同的区域,再将邻近色及对比色分别填充至不同的区域中,以实现对页面标签的颜色渲染,其中,在划分的区域超过两个的情况下,可以先对邻近色及对比色进行进一步处理,基于邻近色及对比色生产相关的多个颜色,以使颜色个数与区域个数一致。并且,设置不同区域间存在交叠的部分,以使各个区域相加后的总面积大于页面标签的面积,从而保证渲染后页面标签中不会出现空白色,更加充分的对页面标签进行着色渲染。
进一步的,使页面标签中不同区域的颜色在邻近色及对比色之间动态切换,即页面标签中不同区域的颜色在不同时刻下持续发生变化,从而实现对页面标签的动态颜色渲染。
作为一种可能的实现方式,控制各个区域的面积在多媒体资源展示过程中持续发生不规则的变化,由于各个区域分别对应的固定的颜色,在各区域发生变化的情况下,各区域对应的颜色相较于前一时刻在页面标签的中位置也发生了移动,因此,对于页面标签中固定的区域相当于颜色发生了改变,从而实现了页面标签中不同区域的颜色在邻近色及对比色之间动态切换。比如,页面标签左下角在第一时刻为显示邻近色的区域1,在第二时刻原本区域1所在的位置变换为显示对比色的区域2,则页面标签左下角的区域在第一时刻至第二时刻间实现了邻近色及对比色之间动态切换。
作为另一种可能的实现方式,以相应的顺序控制每个区域在不同时刻下显示不同的颜色,即各个区域分别对应的颜色可以发生变化,比如,在先将区域1填充邻近色,先将区域2填充对比色,在目标多媒体资源展示过程中,以预设的时间间隔控制区域1和区域2进行颜色切换,在第一时刻区域1显示邻近色,区域2显示对比色,在第二时刻区域1和区域2进行显示颜色的切换,则在第二时刻区域1显示对比色,区域2显示邻近色,从而实现了页面标签中不同区域的颜色在邻近色及对比色之间动态切换。
由此,页面标签中不同区域的颜色在不同时刻下在邻近色及对比色之间进行动态切换,由于邻近色及对比色为相近的颜色,在进行动态切换时实现了页面标签上的颜色渐变效果,实现了页面标签进行动态渲染。
在本公开的实施例中,确定目标多媒体资源的参考色调对应的邻近色及对比色,以及对页面标签进行动态渲染步骤可参照上述实施例中的描述,此处不再赘述。
本公开的实施例提供的页面展示方法,根据终端发送的多媒体资源请求中包含目标多媒体资源的标识及终端的配置信息确定目标多媒体资源,再对目标多媒体资源进行解析,以确定目标多媒体资源对应的参考色调,进而向终端返回包括目标多媒体资源及目标多媒体资源对应的参考色调的多媒体资源展示指令。由此,便于后续终端获取目标多媒体资源对应的参考色调,并通过与多媒体资源的参考色调相近邻近色及对比色对页面标签进行色彩渲染,使页面标签的色彩与多媒体资源的色彩相协调,提高了页面标签的美观程度和与多媒体资源展示画面的协调程度,便于用户获取页面标签上的信息。并且,通过页面标签中不同区域的颜色在邻近色及对比色之间动态切换,形成了动态的颜色渐变效果,造成视觉上的差异化,从而可以突出页面标签,吸引用户关注页面标签,提升了页面标签的关注度。
图8是根据一示例性实施例示出的一种页面展示装置框图。参照图8,该装置100包括第一确定模块110、第二确定模块120及动态渲染展示模块130。
其中,该第一确定模块110,被配置为响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签。
第二确定模块120,被配置为根据与目标多媒体资源对应的参考色调,确定对应的邻近色及对比色。
动态渲染展示模块130,被配置为展示目标页面,在通过目标页面展示目标多媒体资源展示过程中,根据邻近色及对比色,对页面标签进行动态渲染展示,以使页面标签中不同区域的颜色在邻近色及对比色之间动态切换。
在本公开实施例一种可能的实现方式中,该装置,还包括:获取模块,被配置为获取目标多媒体资源的主色调。第三确定模块,被配置为根据多目标多媒体资源的主色调,确定参考色调。
在本公开实施例一种可能的实现方式中,获取模块,被配置为:将目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调分别通过对应的权重因子进行处理后求和,得到对应的色调,作为所述目标多媒体资源的主色调。
在本公开实施例一种可能的实现方式中,获取模块,被配置为:将目标多媒体资源中 的各个子资源的主色调、封面多媒体资源的主色调、及首个多媒体资源的主色调中的任意一个,确定为目标多媒体资源的主色调。
在本公开实施例一种可能的实现方式中,第二确定模块120,还包括:第一选取单元,被配置为选取在参考色调的色度、饱和度、明亮度的第一方向、且属于第一设定范围的色调,作为邻近色。第二选取单元,被配置为选取在参考色调的色度、饱和度、明亮度的第二方向、且属于第二设定范围的色调,作为对比色。
在本公开实施例一种可能的实现方式中,第二确定模块120,还包括:第三选取单元,被配置为选取在参考色调的色度、饱和度、明亮度的第二方向、且属于第一设定范围的色调,作为邻近色。第四选取单元,被配置为选取在参考色调的色度、饱和度、明亮度的第二方向、且属于第二设定范围的色调,作为对比色。
在本公开实施例一种可能的实现方式中,动态渲染展示模块130,还被配置为:利用邻近色及对比色,对页面标签进行双色动态渲染展示。
在本公开实施例一种可能的实现方式中,动态渲染展示模块130,还被配置为:将邻近色及对比色分别进行变换处理,以获取第一补充色及第二补充色;利用邻近色、对比色、第一补充色及第二补充色,对页面标签进行四色动态渲染展示。
在本公开实施例一种可能的实现方式中,动态渲染展示模块130,还包括:第一调整单元,被配置为将邻近色的饱和度及明亮度分别调整至预设范围内,以获取第一补充色。第二调整单元,被配置为将对比色的饱和度及明亮度分别调整至所述预设范围内,以获取第二补充色。
在本公开实施例一种可能的实现方式中,动态渲染展示模块130,还包括:第一确定单元,被配置为确定页面标签在任一时刻包括的N个彼此相交的区域,其中,N为大于或等于2的整数。第一渲染单元,被配置为在任一时刻,利用邻近色及对比色,对N个彼此相交的区域分别进行渲染。
在本公开实施例一种可能的实现方式中,第一确定单元,还被配置为:确定页面标签在任一时刻包含的N条分割线的位置;将N条分割线分别与对应的所述页面标签边界线之间的区域,确定为页面标签在任一时刻包括的N个彼此相交的区域。
在本公开实施例一种可能的实现方式中,该装置还包括:模糊处理模块,被配置为对页面标签进行模糊处理,并展示。
在本公开实施例一种可能的实现方式中,该装置还包括:接收模块,被配置为接收服务端发送的所述目标多媒体资源对应的参考色调,其中,所述参考色调为所述服务端根据目标多媒体资源的主色调确定的。
在本公开实施例一种可能的实现方式中,动态渲染展示模块130,还包括:第一获取 单元,被配置为获取服务端发送的页面标签渲染模式。第二渲染单元,被配置为基于渲染模式,根据邻近色及对比色,对页面标签进行动态渲染展示。
在本公开实施例一种可能的实现方式中,该装置还包括:发送模块,被配置为将终端的配置信息发送给服务端,以使服务端根据终端的配置信息,确定页面标签的渲染模式。
在实际使用时,本公开实施例提供的页面展示装置,可以被配置在终端中,以执行前述页面展示方法。因此,关于上述实施例中的装置,其中各个模块执行操作的具体方式已经在有关该方法的实施例中进行了详细描述,此处将不做详细阐述说明。
本公开的实施例提供的页面展示装置,根据页面展示指令中的目标多媒体资源确定对应的参考色调,根据参考色调获取对应的邻近色及对比色,在目标多媒体资源展示过程中,基于邻近色及对比色,对展示页面中的页面标签进行动态渲染。由此,通过与多媒体资源的参考色调相近邻近色及对比色对页面标签进行色彩渲染,使页面标签的色彩与多媒体资源的色彩相协调,提高了页面标签的美观程度和与多媒体资源展示画面的协调程度,便于用户获取页面标签上的信息。并且,通过页面标签中不同区域的颜色在邻近色及对比色之间动态切换,形成了动态的颜色渐变效果,造成视觉上的差异化,从而可以吸引用户关注页面标签,提升了页面标签的关注度。
图9是根据一示例性实施例示出的另一种页面展示装置框图。参照图9,该装置200包括第一确定模块,210、第二确定模块220、第三确定模块230及动态渲染展示模块240。
其中,第一确定模块210被配置为响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签。
第二确定模块220,被配置为确定目标多媒体资源对应的参考色调。
第三确定模块230,被配置为根据与目标多媒体资源对应的参考色调,确定对应的邻近色及对比色。
动态渲染展示模块240,被配置为展示目标页面,在通过目标页面展示目标多媒体资源展示过程中,根据邻近色及对比色,对页面标签进行动态渲染展示,以使页面标签中不同区域的颜色在邻近色及对比色之间动态切换。
在本公开实施例一种可能的实现方式中,第二确定模块220,还包括:第一获取单元,被配置为获取目标多媒体资源的主色调。第一确定单元,被配置为根据目标多媒体资源的主色调,确定目标多媒体资源对应的参考色调。
在本公开实施例一种可能的实现方式中,第一获取单元,还被配置为:将目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、和/或首个多媒体资源的主色调进行加权融合,以生成目标多媒体资源的主色调。
在本公开实施例一种可能的实现方式中,该装置还包括:获取模块,被配置为获取终端的配置信息。第四确定模块,被配置为根据终端的配置信息,确定页面标签的渲染模式。返回模块,被配置为向终端返回所述页面标签的渲染模式。
在本公开实施例一种可能的实现方式中,第四确定模块,还被配置为:在终端的配置信息低于设定指标的情况下,确定渲染模式为双色渲染;在终端的配置信息高于设定指标、或与所述设定指标相同的情况下,确定渲染模式为四色渲染。
本公开的实施例提供的页面展示装置,根据终端发送的页面加载请求中包含的目标多媒体资源的标识及终端的配置信息确定目标多媒体资源,再对目标多媒体资源进行解析,以确定目标多媒体资源对应的参考色调,进而向终端返回包括目标多媒体资源及目标多媒体资源对应的参考色调的多媒体资源展示指令。由此,便于后续终端获取目标多媒体资源对应的参考色调,并通过与多媒体资源的参考色调相近邻近色及对比色对页面标签进行色彩渲染,使页面标签的色彩与多媒体资源的色彩相协调,提高了页面标签的美观程度和与多媒体资源展示画面的协调程度,便于用户获取页面标签上的信息。并且,通过页面标签中不同区域的颜色在邻近色及对比色之间动态切换,形成了动态的颜色渐变效果,造成视觉上的差异化,从而可以突出页面标签,吸引用户关注页面标签,提升了页面标签的关注度。
图10是根据一示例性实施例示出的一种用于页面展示的电子设备200的框图,其中,电子设备可以为上述实施例所述的终端,也可以为上述实施例所述的服务端。
如图10所示,上述电子设备200包括:
存储器210及处理器220,连接不同组件(包括存储器210和处理器220)的总线230,存储器210存储有处理器220的可执行指令。
在电子设备可以为上述实施例所述的终端的情况下,处理器220执行所述可执行指令时实现以下步骤:响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;根据与目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示目标页面,在通过目标页面展示所述目标多媒体资源展示过程中,根据邻近色及对比色,对页面标签进行动态渲染展示,以使页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
在电子设备可以为上述实施例所述的服务端的情况下,处理器220执行所述可执行指令时实现以下步骤:响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;确定目标多媒体资源对应的参考色调;根据与目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示所述目标页面,在通过目标页面展示所述目标多媒体资源展示过程中,根据邻近色及对比色,对页面标签进行动态渲染展示,以 使页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
总线230表示几类总线结构中的一种或多种,包括存储器总线或者存储器控制器,外围总线,图形加速端口,处理器或者使用多种总线结构中的任意总线结构的局域总线。举例来说,这些体系结构包括但不限于工业标准体系结构(ISA)总线,微通道体系结构(MAC)总线,增强型ISA总线、视频电子标准协会(VESA)局域总线以及外围组件互连(PCI)总线。
电子设备200典型地包括多种电子设备可读介质。这些介质可以是任何能够被服务器200访问的可用介质,包括易失性和非易失性介质,可移动的和不可移动的介质。
存储器210还可以包括易失性存储器形式的计算机系统可读介质,例如随机存取存储器(RAM)240和/或高速缓存存储器250。服务器200可以进一步包括其它可移动/不可移动的、易失性/非易失性计算机系统存储介质。仅作为举例,存储系统260可以用于读写不可移动的、非易失性磁介质(图10未显示,通常称为“硬盘驱动器”)。尽管图10中未示出,可以提供用于对可移动非易失性磁盘(例如“软盘”)读写的磁盘驱动器,以及对可移动非易失性光盘(例如CD-ROM,DVD-ROM或者其它光介质)读写的光盘驱动器。在这些情况下,每个驱动器可以通过一个或者多个数据介质接口与总线230相连。存储器210可以包括至少一个程序产品,该程序产品具有一组(例如至少一个)程序模块,这些程序模块被配置以执行本公开各实施例的功能。
具有一组(至少一个)程序模块270的程序/实用工具280,可以存储在例如存储器210中,这样的程序模块270包括——但不限于——操作系统、一个或者多个应用程序、其它程序模块以及程序数据,这些示例中的每一个或某种组合中可能包括网络环境的实现。程序模块270通常执行本公开所描述的实施例中的功能和/或方法。
电子设备200也可以与一个或多个外部设备290(例如键盘、指向设备、显示器291等)通信,还可与一个或者多个使得用户能与该电子设备200交互的设备通信,和/或与使得该电子设备200能与一个或多个其它计算设备进行通信的任何设备(例如网卡,调制解调器等等)通信。这种通信可以通过输入/输出(I/O)接口292进行。并且,电子设备200还可以通过网络适配器293与一个或者多个网络(例如局域网(LAN),广域网(WAN)和/或公共网络,例如因特网)通信。如图所示,网络适配器293通过总线230与电子设备200的其它模块通信。应当明白,尽管图中未示出,可以结合电子设备200使用其它硬件和/或软件模块,包括但不限于:微代码、设备驱动器、冗余处理单元、外部磁盘驱动阵列、RAID系统、磁带驱动器以及数据备份存储系统等。
处理器220通过运行存储在存储器210中的程序,从而执行各种功能应用以及数据处理。
需要说明的是,本公开的实施例的电子设备的实施过程和技术原理参见前述对本公开实施例的页面展示方法的解释说明,此处不再赘述。
本公开实施例提供的电子设备,可以执行如前所述的页面展示方法,通过与多媒体资源的参考色调相近邻近色及对比色对页面标签进行色彩渲染,使页面标签的色彩与多媒体资源的色彩相协调,提高了页面标签的美观程度和与多媒体资源展示画面的协调程度,便于用户获取页面标签上的信息。并且,通过页面标签中不同区域的颜色在邻近色及对比色之间动态切换,形成了动态的颜色渐变效果,造成视觉上的差异化,从而可以突出页面标签,吸引用户关注页面标签,提升了页面标签的关注度。
为了实现上述实施例,本公开还提出一种存储介质。
其中,该存储介质中的指令由电子设备的处理器执行时,使得电子设备能够执行以下步骤:响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;根据与目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示所述目标页面,在通过目标页面展示所述目标多媒体资源展示过程中,根据邻近色及对比色,对页面标签进行动态渲染展示,以使页面标签中不同区域的颜色在邻近色及对比色之间动态切换。
为了实现上述实施例,本公开还提出一种存储介质。
其中,该存储介质中的指令由电子设备的处理器执行时,使得电子设备能够执行以下步骤:响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;确定目标多媒体资源对应的参考色调;根据与目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;展示所述目标页面,在通过目标页面展示所述目标多媒体资源展示过程中,根据邻近色及对比色,对页面标签进行动态渲染展示,以使页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
本公开所有实施例均可以单独被执行,也可以与其他实施例相结合被执行,均视为本公开要求的保护范围。
本公开旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由下面的权利要求指出。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。

Claims (44)

  1. 一种页面展示方法,包括:
    响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;
    根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;
    展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
  2. 如权利要求1所述的方法,还包括:
    获取所述目标多媒体资源的主色调;
    根据所述目标多媒体资源的主色调,确定所述参考色调。
  3. 如权利要求2所述的方法,其中,所述获取所述目标多媒体资源的主色调,包括:
    将所述目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调分别通过对应的权重因子进行处理后求和,得到对应的色调,作为所述目标多媒体资源的主色调。
  4. 如权利要求2所述的方法,其中,所述获取所述目标多媒体资源的主色调,包括:
    将所述目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、及首个多媒体资源的主色调中的任意一个,确定为所述目标多媒体资源的主色调。
  5. 如权利要求1所述的方法,其中,所述根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色,包括:
    选取在所述参考色调的色度、饱和度、明亮度的第一方向、且属于第一设定范围的色调,作为邻近色;
    选取在所述参考色调的色度、饱和度、明亮度的第一方向、且属于第二设定范围的色调,作为对比色。
  6. 如权利要求1所述的方法,其中,所述根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色,包括:
    选取在所述参考色调的色度、饱和度、明亮度的第二方向、且属于第一设定范围的色调,作为邻近色;
    选取在所述参考色调的色度、饱和度、明亮度的第二方向、且属于第二设定范围的色调,作为对比色。
  7. 如权利要求1所述的方法,其中,所述根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,包括:
    利用所述邻近色及对比色,对所述页面标签进行双色动态渲染展示。
  8. 如权利要求1所述的方法,其中,所述根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,包括:
    将所述邻近色及对比色分别进行变换处理,以获取第一补充色及第二补充色;
    利用所述邻近色、对比色、第一补充色及第二补充色,对所述页面标签进行四色动态渲染展示。
  9. 如权利要求8所述的方法,其中,所述将所述邻近色及对比色分别进行变换处理,以获取第一补充色及第二补充色,包括:
    将所述邻近色的饱和度及明亮度分别调整至预设范围内,以获取第一补充色;
    将所述对比色的饱和度及明亮度分别调整至所述预设范围内,以获取第二补充色。
  10. 如权利要求1-9任一所述的方法,其中,所述根据所述邻近色及对比色,对所述页面标签进行动态渲染,包括:
    确定所述页面标签在任一时刻包括的N个彼此相交的区域,其中,N为大于或等于2的整数;
    在所述任一时刻,利用所述邻近色及对比色,对所述N个彼此相交的区域分别进行渲染。
  11. 如权利要求10所述的方法,其中,所述确定所述页面标签在任一时刻包括的N个彼此相交的区域,包括:
    确定所述页面标签在任一时刻包含的N条分割线的位置;
    将所述N条分割线分别与对应的所述页面标签边界线之间的区域,确定为所述页面标签在任一时刻包括的N个彼此相交的区域。
  12. 如权利要求1-9任一所述的方法,还包括:
    对所述页面标签进行模糊处理,并展示。
  13. 如权利要求1-9任一所述的方法,还包括:
    接收服务端发送的所述目标多媒体资源对应的参考色调,其中,所述参考色调为所述服务端根据目标多媒体资源的主色调确定的。
  14. 如权利要求13所述的方法,其中,所述根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,包括:
    获取所述服务端发送的对所述页面标签进行渲染的颜色数量;
    基于所述渲染模式,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示。
  15. 如权利要求14所述的方法,还包括:
    将终端的配置信息发送给所述服务端,以使所述服务端根据所述终端的配置信息,确定所述页面标签的渲染模式。
  16. 一种页面展示方法,其特征在于,包括:
    响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;
    确定所述目标多媒体资源对应的参考色调;
    根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;
    展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
  17. 如权利要求16所述的方法,其中,所述确定所述目标多媒体资源对应的参考色调,包括:
    获取所述目标多媒体资源的主色调;
    根据所述目标多媒体资源的主色调,确定所述目标多媒体资源对应的参考色调。
  18. 如权利要求17所述的方法,其中,所述获取所述目标多媒体资源的主色调,包括:
    将所述目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、和/或首个多媒体资源的主色调进行加权融合,以生成所述目标多媒体资源的主色调。
  19. 如权利要求16所述的方法,还包括:
    获取终端的配置信息;
    根据所述终端的配置信息,确定对所述页面标签进行渲染的颜色数量;
    向所述终端返回确定对所述页面标签进行渲染的颜色数量。
  20. 如权利要求19所述的方法,其中,所述根据所述配置信息,确定所述页面标签的渲染模式,包括:
    在所述终端的配置信息低于设定指标的情况下,确定对所述页面标签进行双色渲染;
    在所述终端的配置信息高于所述设定指标、或与所述设定指标相同的情况下,确定对所对所述页面标签进行四色渲染。
  21. 一种页面展示装置,其特征在于,包括:
    第一确定模块,被配置为响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;
    第二确定模块,被配置为根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;
    动态渲染展示模块,被配置为展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
  22. 如权利要求21所述的装置,还包括:
    获取模块,被配置为获取所述目标多媒体资源的主色调;
    第三确定模块,被配置为根据所述多目标多媒体资源的主色调,确定所述参考色调。
  23. 如权利要求22所述的装置,其中,所述获取模块,还被配置为:
    将所述目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、及首个子资源的主色调分别通过对应的权重因子进行处理后求和,得到对应的色调,作为所述目标多媒体资源的主色调。
  24. 如权利要求22所述的装置,其中,所述获取模块,还被配置为:
    将所述目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、及首个多媒体资源的主色调中的任意一个,确定为所述目标多媒体资源的主色调。
  25. 如权利要求21所述的装置,其中,所述第二确定模块,还包括:
    第一选取单元,被配置为选取在所述参考色调的色度、饱和度、明亮度的第一方向、且属于第一设定范围的色调,作为邻近色;
    第二选取单元,被配置为选取在所述参考色调的色度、饱和度、明亮度的第二方向、且属于第二设定范围的色调,作为对比色。
  26. 如权利要求21所述的装置,其中,所述第二确定模块,还包括:
    第三选取单元,被配置为选取在所述参考色调的色度、饱和度、明亮度的第二方向、且属于第一设定范围的色调,作为邻近色;
    第四选取单元,被配置为选取在所述参考色调的色度、饱和度、明亮度的第二方向、且属于第二设定范围的色调,作为对比色。
  27. 如权利要求21所述的装置,其中,所述动态渲染展示模块,还被配置为:
    利用所述邻近色及对比色,对所述页面标签进行双色动态渲染展示。
  28. 如权利要求21所述的装置,其中,所述动态渲染展示模块,还被配置为:
    将所述邻近色及对比色分别进行变换处理,以获取第一补充色及第二补充色;
    利用所述邻近色、对比色、第一补充色及第二补充色,对所述页面标签进行四色动态渲染展示。
  29. 如权利要求28所述的装置,其中,所述动态渲染展示模块,还包括:
    第一调整单元,被配置为将所述邻近色的饱和度及明亮度分别调整至预设范围内,以获取第一补充色;
    第二调整单元,被配置为将所述对比色的饱和度及明亮度分别调整至所述预设范围内,以获取第二补充色。
  30. 如权利要求21-29任一所述的装置,其中,所述动态渲染展示模块,还包括:
    第一确定单元,被配置为确定所述页面标签在任一时刻包括的N个彼此相交的区域, 其中,N为大于或等于2的整数;
    第一渲染单元,被配置为在所述任一时刻,利用所述邻近色及对比色,对所述N个彼此相交的区域分别进行渲染。
  31. 如权利要求30所述的装置,其中,所述第一确定单元,还被配置为:
    确定所述页面标签在任一时刻包含的N条分割线的位置;
    将所述N条分割线分别与对应的所述页面标签边界线之间的区域,确定为所述页面标签在任一时刻包括的N个彼此相交的区域。
  32. 如权利要求21-29任一所述的装置,还包括:
    模糊处理模块,被配置为对所述页面标签进行模糊处理,并展示。
  33. 如权利要求21-29任一所述的装置,还包括:
    接收模块,被配置为接收服务端发送的所述目标多媒体资源对应的参考色调,其中,所述参考色调为所述服务端根据目标多媒体资源的主色调确定的。
  34. 如权利要求33所述的装置,其中,所述动态渲染展示模块,还包括:
    第一获取单元,被配置为获取所述服务端发送的页面标签渲染模式;
    第二渲染单元,被配置为基于所述渲染模式,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示。
  35. 如权利要求34所述的装置,还包括:
    发送模块,被配置为将终端的配置信息发送给所述服务端,以使所述服务端根据所述终端的配置信息,确定所述页面标签的渲染模式。
  36. 一种页面展示装置,包括:
    第一确定模块,被配置为响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;
    第二确定模块,被配置为确定所述目标多媒体资源对应的参考色调;
    第三确定模块,被配置为根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;
    动态渲染展示模块,被配置为展示所述目标页面,在通过所述目标页面展示所述目标 多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
  37. 如权利要求36所述的装置,其中,所述第二确定模块,还包括:
    第一获取单元,被配置为获取所述目标多媒体资源的主色调;
    第一确定单元,被配置为根据所述目标多媒体资源的主色调,确定所述目标多媒体资源对应的参考色调。
  38. 如权利要求37所述的装置,其中,所述第一获取单元,还被配置为:
    将所述目标多媒体资源中的各个子资源的主色调、封面多媒体资源的主色调、和/或首个多媒体资源的主色调进行加权融合,以生成所述目标多媒体资源的主色调。
  39. 如权利要求36所述的装置,还包括:
    获取模块,被配置为获取终端的配置信息;
    第四确定模块,被配置为根据所述终端的配置信息,确定所述页面标签的渲染模式;
    返回模块,被配置为向所述终端返回所述页面标签的渲染模式。
  40. 如权利要求39所述的装置,其中,所述第四确定模块,还被配置为:
    在所述终端的配置信息低于设定指标的情况下,确定所述渲染模式为双色渲染;
    在所述终端的配置信息高于所述设定指标、或与所述设定指标相同的情况下,确定所述渲染模式为四色渲染。
  41. 一种电子设备,其特征在于,包括:
    处理器;
    用于存储所述处理器可执行指令的存储器;
    其中,所述处理器被配置为执行所述可执行指令,实现以下步骤:
    响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;
    根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;
    展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
  42. 一种电子设备,其特征在于,包括:
    处理器;
    用于存储所述处理器可执行指令的存储器;
    其中,所述处理器被配置为执行所述可执行指令,实现以下步骤:
    响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;
    确定所述目标多媒体资源对应的参考色调;
    根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;
    展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
  43. 一种存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得所述电子设备能够执行以下步骤:
    响应于所接收的页面展示指令,确定待展示的目标页面中包括的目标多媒体资源以及页面标签;
    根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;
    展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
  44. 一种存储介质,当所述存储介质中的指令由电子设备的处理器执行时,使得所述电子设备能够执行以下步骤:
    响应于所接收的页面加载请求,确定待加载的目标页面中包括的目标多媒体资源及页面标签;
    确定所述目标多媒体资源对应的参考色调;
    根据与所述目标多媒体资源对应的参考色调,确定对应的邻近色及对比色;
    展示所述目标页面,在通过所述目标页面展示所述目标多媒体资源展示过程中,根据所述邻近色及对比色,对所述页面标签进行动态渲染展示,以使所述页面标签中不同区域的颜色在所述邻近色及对比色之间动态切换。
PCT/CN2021/102868 2020-09-30 2021-06-28 页面展示方法及装置 WO2022068293A1 (zh)

Applications Claiming Priority (2)

Application Number Priority Date Filing Date Title
CN202011062615.9A CN112256366A (zh) 2020-09-30 2020-09-30 页面展示方法、装置及电子设备
CN202011062615.9 2020-09-30

Publications (1)

Publication Number Publication Date
WO2022068293A1 true WO2022068293A1 (zh) 2022-04-07

Family

ID=74233593

Family Applications (1)

Application Number Title Priority Date Filing Date
PCT/CN2021/102868 WO2022068293A1 (zh) 2020-09-30 2021-06-28 页面展示方法及装置

Country Status (2)

Country Link
CN (1) CN112256366A (zh)
WO (1) WO2022068293A1 (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN118377827A (zh) * 2024-05-29 2024-07-23 华能资本服务有限公司 一种用于数据调度的自动化集成展示系统

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112256366A (zh) * 2020-09-30 2021-01-22 北京达佳互联信息技术有限公司 页面展示方法、装置及电子设备
CN113360820B (zh) * 2021-05-29 2024-03-08 北京网聘信息技术有限公司 一种页面展示方法、系统、设备和存储介质
CN114356479B (zh) * 2021-12-27 2024-03-08 珠海豹趣科技有限公司 一种页面渲染方法及装置
CN114637899A (zh) * 2022-03-23 2022-06-17 北京达佳互联信息技术有限公司 业务标签的展示方法、装置、电子设备以及存储介质

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106406504A (zh) * 2015-07-27 2017-02-15 常州市武进区半导体照明应用技术研究院 人机交互界面的氛围渲染系统与方法
CN110858153A (zh) * 2018-08-22 2020-03-03 沈阳美行科技有限公司 一种控件自适应显示的方法和装置
CN111352623A (zh) * 2018-12-20 2020-06-30 阿里巴巴集团控股有限公司 页面生成方法及装置
CN112256366A (zh) * 2020-09-30 2021-01-22 北京达佳互联信息技术有限公司 页面展示方法、装置及电子设备

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106406504A (zh) * 2015-07-27 2017-02-15 常州市武进区半导体照明应用技术研究院 人机交互界面的氛围渲染系统与方法
CN110858153A (zh) * 2018-08-22 2020-03-03 沈阳美行科技有限公司 一种控件自适应显示的方法和装置
CN111352623A (zh) * 2018-12-20 2020-06-30 阿里巴巴集团控股有限公司 页面生成方法及装置
CN112256366A (zh) * 2020-09-30 2021-01-22 北京达佳互联信息技术有限公司 页面展示方法、装置及电子设备

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN118377827A (zh) * 2024-05-29 2024-07-23 华能资本服务有限公司 一种用于数据调度的自动化集成展示系统

Also Published As

Publication number Publication date
CN112256366A (zh) 2021-01-22

Similar Documents

Publication Publication Date Title
WO2022068293A1 (zh) 页面展示方法及装置
US9811894B2 (en) Image processing method and apparatus
WO2021169307A1 (zh) 人脸图像的试妆处理方法、装置、计算机设备和存储介质
WO2021135887A1 (zh) 页面配色的方法、装置、存储介质和芯片
CN109783178A (zh) 一种界面组件的颜色调整方法、装置、设备和介质
WO2023124722A1 (zh) 图像处理方法、装置、电子设备和计算机可读存储介质
WO2022095757A1 (zh) 图像渲染方法和装置
WO2020215861A1 (zh) 图片显示方法、图片显示装置、电子设备及存储介质
CN108737878B (zh) 用于结合视频呈现来修改用户界面颜色的方法和系统
CN107274351A (zh) 图像处理设备、图像处理系统和图像处理方法
US20240144976A1 (en) Video processing method, device, storage medium, and program product
CN103065338A (zh) 为背景图像中的前景图像提供阴影的方法和装置
JP2014146300A (ja) 画像処理装置及び画像処理プログラム
US12067645B2 (en) High-resolution controllable face aging with spatially-aware conditional GANs
EP4099162A1 (en) Method and apparatus for configuring theme color of terminal device, and terminal device
CN112102422B (zh) 图像处理方法及装置
CN112395030A (zh) 一种页面处理方法、装置、电子设置以及存储介质
CN110838154A (zh) 一种图片处理方法及装置
Ahn et al. Real-time adjustment of contrast saliency for improved information visibility in mobile augmented reality
CN113645476A (zh) 画面处理方法、装置、电子设备及存储介质
JP2024099753A (ja) 表示方法、装置及び記憶媒体
CN112541955B (zh) 图像处理方法、装置及设备
Yu et al. Color scheme adaptation to enhance user experience on smartphone displays leveraging ambient light
CN113450432A (zh) 图像处理装置、方法、系统和计算机可读介质
CN113538601A (zh) 图像处理方法、装置、计算机设备以及存储介质

Legal Events

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

Ref document number: 21873955

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: 21873955

Country of ref document: EP

Kind code of ref document: A1