Display method, system, electronic device and storage medium
By receiving reference pictures uploaded by users and generating matching themes on the server, the problem of fixed and single report template style in the existing technology is solved, and the display of personalized reports is realized, which significantly improves the user experience.
Patent Information
- Application Number
- CN202411479354.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2024-10-23
- Publication Date
- 2025-04-11
- Estimated Expiration
- 2044-10-23
AI Technical Summary
The beautified reports in the existing technology cannot meet users' needs for diversification and personalization due to the fixed and single template style, resulting in poor user experience.
By receiving the reference picture uploaded by the user for color matching, determine the corresponding theme color and theme style, and generate matching themes on the server, send them to the client for rendering, displaying the final personalized report.
It realizes accurate acquisition of personalized themes that match users based on the reference pictures provided by users, significantly improving the user experience and meeting users' needs for diversified and personalized needs.
Smart Images

Figure CN119006680B_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of image processing technology, and in particular to a display method, system, electronic device and storage medium. Background Art
[0002] In the field of data analysis, generating beautiful and easy-to-read reports helps improve the efficiency of data analysis. In order to improve the efficiency of report beautification, the related technology usually encapsulates static style configuration parameters into various types of report themes for users to choose from.
[0003] The report theme includes, for example, theme color, text style, chart style, page settings, material pictures, etc. The system overwrites the style configuration of the current report according to the report theme selected by the user to achieve a beautified effect. However, the report beautified by the above method cannot meet the user's needs for diversification and personalization due to the fixed and single template style, resulting in a poor user experience. Summary of the invention
[0004] In view of the above problems, the present application provides a display method, system, electronic device and storage medium to at least solve the technical problem in the related art that the beautified reports cannot meet the user's diverse and personalized needs due to the fixed and single template style, resulting in poor user experience.
[0005] According to a first aspect of an embodiment of the present application, a display method is provided, the method comprising: receiving a reference image uploaded by a user for color matching; using a theme color and / or theme style corresponding to the reference image to determine a theme of a target page to be rendered; sending the reference image to a server; receiving the theme sent by the server, rendering the theme on the target page to obtain a rendered page, and displaying the rendered page.
[0006] According to a second aspect of an embodiment of the present application, a display method is provided, the method comprising: receiving a reference image sent by a client, obtaining a theme color and a theme style corresponding to the reference image, and generating a theme matching the theme color and / or theme style; sending the theme to the client so that the client receives the theme, rendering the theme on a target page to obtain a rendered page, and displaying the rendered page.
[0007] According to a third aspect of an embodiment of the present application, a display device is provided, comprising: a receiving unit for receiving a reference image uploaded by a user for color matching; a theme color and / or theme style corresponding to the reference image is used to determine a theme of a target page to be rendered; a sending unit for sending the reference image to a server; a rendering and display unit for receiving the theme sent by the server, rendering the theme on the target page to obtain a rendered page, and displaying the rendered page.
[0008] According to a fourth aspect of an embodiment of the present application, a display device is provided, comprising: a first receiving and generating unit, used to receive a reference image sent by a client, obtain a theme color and a theme style corresponding to the reference image, and generate a theme matching the theme color and / or theme style; a first sending unit, used to send the theme to the client, so that the client receives the theme, renders the theme on a target page to obtain a rendered page, and displays the rendered page.
[0009] According to a fifth aspect of an embodiment of the present application, a display system is provided, including a client and a server; the server is used to receive a reference image sent by the client, obtain a theme color and a theme style corresponding to the reference image, generate a theme matching the theme color and / or theme style, and send the theme to the client; the client is used to receive a reference image uploaded by a user for color matching, send the reference image to the server, receive the theme sent by the server, render the theme on a target page to obtain a rendered page, and display the rendered page.
[0010] According to the sixth aspect of the embodiments of the present application, an electronic device is also provided, including a memory, a processor, and a computer program stored on the memory and executable on the processor, wherein the processor runs the computer program to implement the display method of the first aspect above, or execute the display method of the second aspect above.
[0011] According to the seventh aspect of the embodiments of the present application, a computer-readable storage medium is also provided, in which a computer program is stored, wherein the computer program is configured to execute the display method of the first aspect or the display method of the second aspect when running.
[0012] According to an eighth aspect of the embodiments of the present application, a computer program product includes a computer program, and the computer program is executed by a processor to perform the display method of the first aspect or the display method of the second aspect.
[0013] In an embodiment of the present application, a reference image for color matching uploaded by a user is received; the reference image is sent to a server, the server obtains a theme color and a theme style corresponding to the reference image, and generates a theme matching the theme color and / or theme style; the server sends the theme to a client, renders the theme on a target page to obtain a rendered page, and displays the rendered page. Compared with the fixed-style, single report template beautified in the prior art, the present application can accurately obtain a theme that matches the personalized needs of the user based on the reference image provided by the user, significantly improving the user experience, and solving the technical problem that the beautified report in the related art cannot meet the user's diverse and personalized needs due to the fixed and single template style, resulting in a poor user experience. BRIEF DESCRIPTION OF THE DRAWINGS
[0014] Various other advantages and benefits will become apparent to those of ordinary skill in the art by reading the detailed description of the preferred embodiments below. The accompanying drawings are only for the purpose of illustrating the preferred embodiments and are not to be considered as limiting the present application. Moreover, the same reference numerals are used throughout the drawings to represent the same components. In the drawings:
[0015] Figure 1 is a schematic diagram of an application environment according to an optional display method in an embodiment of the present application;
[0016] Figure 2 is a schematic diagram of an application environment according to another optional display method in an embodiment of the present application;
[0017] Figure 3 is a flowchart of an optional display method according to an embodiment of the present application;
[0018] Figure 4 is a schematic diagram of a client interface of an optional display method according to an embodiment of the present application;
[0019] Figure 5 is a schematic diagram of a client interface of another optional display method according to an embodiment of the present application;
[0020] Figure 6 is a schematic diagram of a client interface of another optional display method according to an embodiment of the present application;
[0021] Figure 7 is a schematic diagram of a client interface of another optional display method according to an embodiment of the present application;
[0022] Figure 8 is a flowchart of another optional display method according to an embodiment of the present application;
[0023] Fig. 9is a schematic diagram of extracting a theme color according to an optional display method of an embodiment of the present application;
[0024] Fig.10 Schematic diagram of theme color extraction according to another optional display method of an embodiment of the present application
[0025] Fig.11 is a schematic diagram of a color constraint range of another optional display method according to an embodiment of the present application;
[0026] Fig.12 is a schematic diagram of color system acquisition of an optional display method according to an embodiment of the present application;
[0027] Fig.13 is a schematic diagram of color system acquisition of another optional display method according to an embodiment of the present application;
[0028] Fig.14 A schematic diagram of color system acquisition according to another optional display method according to an embodiment of the present application;
[0029] Fig.15 is a schematic diagram of color migration of another optional display method according to an embodiment of the present application;
[0030] Fig.16 is a schematic diagram of the structure of a display device provided in an embodiment of the present application;
[0031] Fig.17 is a schematic diagram of the structure of another display device provided in an embodiment of the present application;
[0032] Fig.18 is a structural schematic diagram of a display system provided in an embodiment of the present application;
[0033] Fig.19 is a structural schematic diagram of an electronic device provided in an embodiment of the present application;
[0034] Fig. 20 is a schematic diagram of the structure of another electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION
[0035] In order to enable those skilled in the art to better understand the scheme of the present invention, the technical scheme in the embodiments of the present invention will be clearly and completely described below in conjunction with the drawings in the embodiments of the present invention. Obviously, the described embodiments are only embodiments of a part of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of the present invention.
[0036] It should be noted that the terms "first", "second", etc. in the specification and claims of the present invention and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present invention described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units that are clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0037] As an optional implementation, the display method in the embodiment of the present application can be applied to, but not limited to, Figure 1 In the application environment shown. The application environment may include but is not limited to: a terminal 102 for human-computer interaction with a user, a network 110, and a server 112. A report display client is running in the terminal 102. The terminal 102 includes a display 108, a processor 106, and a memory 104. The display 108 is used to present a reference image uploaded by a user for color matching, and a theme corresponding to the reference image. The processor 106 is used to receive a reference image uploaded by a user and send the reference image to the server 112. In addition, the server 112 includes a database 114 and a processing engine 116, and the database 114 is used to store reference images and themes corresponding to the reference images. The processing engine 116 is used to receive a reference image sent by the terminal 102, receive a reference image sent by a report display client, obtain a theme color and theme style corresponding to the reference image, generate a theme matching the theme color and / or theme style; send the theme to the client so that the report display client receives the theme, renders the theme on the target page to obtain a rendered page, and displays the rendered page.
[0038] The specific process is as follows: Assume that Figure 1The terminal 102 shown runs a report display client, and the terminal 102 executes steps S102-S104 to receive a reference image uploaded by a user for color matching; the reference image is sent to the server 112, so that the server 112 obtains the theme color and theme style corresponding to the reference image, and generates a theme that matches the theme color and / or theme style. The server 112 executes steps S106-S112 to receive the reference image sent by the client, obtain the theme color and theme style corresponding to the reference image, and generate a theme that matches the theme color and / or theme style; the theme is sent to the terminal 102, so that the report display client receives the theme, renders the theme on the target page to obtain a rendered page, and displays the rendered page; the terminal 102 executes step S114 to receive the theme sent by the server 112, renders the theme on the target page to obtain a rendered page, and displays the rendered page.
[0039] In one or more embodiments, the above display method of the present application can be applied to Figure 2 In the application environment shown. Figure 2 As shown, human-computer interaction can be performed between user 202 and user device 204. User device 204 includes memory 206 and processor 208. In this embodiment, user device 204 can refer to but not be limited to executing the operations performed by the above terminal 102, rendering a theme matching the reference image on the target page to obtain a rendered page, and displaying the rendered page.
[0040] Optionally, the terminal 102 and the user device 204 include but are not limited to mobile phones, laptops, tablet computers, PDAs, MIDs (Mobile Internet Devices), desktop computers, smart TVs, etc. The application client with color theme display function in the embodiment of the present application includes but is not limited to video clients, instant messaging clients, browser clients, etc. The above network may include but is not limited to: wired network, wireless network, wherein the wired network includes: local area network, metropolitan area network and wide area network, and the wireless network includes: Bluetooth, WIFI and other networks that realize wireless communication. The above service end 112 can be a single server, or a server cluster composed of multiple servers, or a cloud server, and the above cloud server includes but is not limited to a private cloud server or a public cloud server. The above is only an example, and no limitation is made to this in this embodiment.
[0041] For non-professional designers, converting data into beautiful and easy-to-read reports is often a challenging task. The conventional report beautification process requires familiarity with design principles, color matching, image processing and other knowledge, and consumes a lot of time and energy. In order to improve the efficiency of report beautification in related technologies, static style configuration parameters are usually encapsulated into various types of report themes for users to choose from. The above report themes include, for example, theme colors, text styles, chart styles, page settings, material pictures, etc. The system overwrites the style configuration of the current report according to the report theme selected by the user to achieve a beautification effect. However, the reports beautified using the above method cannot meet users' needs for diversity and personalization due to their fixed and single template styles, resulting in poor user experience.
[0042] In order to solve the above technical problems, as an optional implementation method, Figure 3 As shown, the embodiment of the present application provides a display method, which is applied to a client and includes the following steps:
[0043] S302, receiving a reference image uploaded by a user for color matching; the theme color and / or theme style corresponding to the reference image is used to determine the theme of the target page to be rendered;
[0044] Specifically, the client in the embodiment of the present application includes but is not limited to a report display client, or various application clients for displaying color themes. The following embodiment is described by taking the report display client as an example. Figure 4 As shown, Figure 4 The client page in the display has a sales analysis report. Figure 4 The Upload Reference Picture button in the is used to upload a reference picture for the theme color matching of the sales analysis report. In one example, when the user clicks the Upload Reference Picture button, Figure 5 As shown, the client can receive the reference image 502 uploaded by the user and display it on the display page of the client.
[0045] S304: Send the reference image to the server.
[0046] Specifically, when the user clicks the Upload Reference Picture button, Figure 5 As shown, the client receives the reference image 502 uploaded by the user, and the client sends the reference image 502 to the server, and the server obtains the theme color and theme style corresponding to the reference image, and generates a theme matching the theme color and / or theme style. The theme color here can be one or more colors obtained from the reference image 502, and the theme style can be, for example, the appearance design and layout of the report, such as fonts, colors, and chart styles.
[0047] In the embodiment of the present application, the subject corresponding to the reference image can be obtained by directly sending the reference image to the server after the user clicks the reference image upload button; in another implementation, the embodiment of the application can also display the reference image on the client page, and then obtain the subject corresponding to the reference image by inputting the user's needs; Figure 5 As shown: the user's needs: refer to this picture to beautify the report; the client will synchronously send the reference picture 502 and the user's needs to the server.
[0048] S306, receiving the theme sent by the server, rendering the theme on a target page to obtain a rendered page, and displaying the rendered page.
[0049] Specifically, after the client sends the reference image uploaded by the user to the server, the server obtains the theme color and theme style corresponding to the reference image, generates a theme matching the theme color and / or theme style, and then sends the theme to the client. Figure 6 As shown, the subject is rendered on the target page of the client to obtain a rendered page 602, and the rendered page 602 is displayed.
[0050] In an embodiment of the present application, a reference image for color matching uploaded by a user is received; the reference image is sent to a server, the server obtains a theme color and a theme style corresponding to the reference image, and generates a theme matching the theme color and / or theme style; the server sends the theme to a client, renders the theme on a target page to obtain a rendered page, and displays the rendered page. Compared with the fixed-style, single report template beautified in the prior art, the present application can accurately obtain a theme that matches the personalized needs of the user based on the reference image provided by the user, significantly improving the user experience, and solving the technical problem that the beautified report in the related art cannot meet the user's diverse and personalized needs due to the fixed and single template style, resulting in a poor user experience.
[0051] In one or more embodiments, the display method further includes:
[0052] Based on the style adjustment option selected by the user, displaying the style column corresponding to the style adjustment option on the style adjustment page;
[0053] In response to a target option selected by a user from the style column, the target option being an option indicating a theme style and / or theme color, sending an identifier of the target option to the server; the identifier of the target option is used to determine a target theme;
[0054] The target theme sent by the server is received, and the target theme is rendered on the target page, so that the current theme displayed on the target page is switched to the target theme.
[0055] Specifically, in the embodiments of the present application, Figure 7 As shown, in order to further meet the diverse theme needs of users and improve user experience, users can also make real-time adjustments to the themes generated by the system. When the user selects a style adjustment option on the client, the style column corresponding to the style adjustment option is displayed on the style adjustment page. The style column includes, for example, but is not limited to, style intentions, which include multiple theme styles for users to choose from. The style column also includes theme color options, such as style color schemes.
[0056] When the user selects the corresponding style and theme color on the client, the client sends the identifiers of the style and theme color to the server in response to the style and theme color selected by the user from the style column, and the server generates a target theme matching the target option based on the target option; after the client receives the target theme sent by the server, it re-renders the target page according to the target theme, thereby switching the current theme displayed on the target page to the target theme.
[0057] In one or more embodiments, the style column includes a preset theme style set and / or a preset theme color, and in response to a target option selected by a user from the style column, sending the target option to the server includes:
[0058] According to the target theme style selected by the user from the theme style set, sending the style identifier corresponding to the target theme style to the server; and / or,
[0059] According to the target theme color selected by the user from the preset theme colors, a color identifier corresponding to the target theme color is sent to the server.
[0060] Specifically, in the embodiments of the present application, Figure 7 As shown, when the user needs to make real-time adjustments to the current theme, he selects the style adjustment option, and a theme style set will be displayed in the client, which includes, for example, simple style, technological style, light style, and lively style. In one example, for example, the user only needs to adjust the style intention, switching the current style from simple style to technological style, and according to the target theme style (technological style) selected by the user from the theme style set, the style identifier corresponding to the technological style is sent to the server, so that the server generates a target theme matching the technological style according to the technological style identifier, and then sends it to the client, and the client switches the current simple style theme to the technological style.
[0061] like Figure 7As shown, in one example, for example, the user only needs to adjust the theme color and switch the current theme color to another theme color. The user can select the Delete All button to delete the current theme color 702. When the user chooses to preview or publish on the current page, the target page is presented as the original report page. When the user clicks the plus button and selects the corresponding theme color, according to the target theme color selected by the user from the preset theme colors, the color identifier corresponding to the target theme color is sent to the server, so that the server generates a target theme matching the target theme color according to the color identifier. The server generates a target theme matching the target theme color according to the target theme color identifier, and then sends it to the client. The theme color of the target theme can be displayed in the theme adjustment window of the client. When the user chooses to preview or publish, the target page to be rendered is re-rendered, and the client can switch the current theme color to the target theme color.
[0062] In another example, when the user adjusts the theme style and the theme color at the same time, the style identifier of the target theme style and the color identifier corresponding to the target theme color are sent to the server. The server generates a target theme that matches the target theme style and the target theme color, and then sends it to the client. The client switches the current theme to the target theme.
[0063] In one or more embodiments, the style column includes a plurality of color systems, each color system is a set of a plurality of derivative colors generated according to the theme color, and sending the target option to the server according to the target option selected by the user from the style column includes:
[0064] According to the target color system selected by the user from the multiple color systems, a color system identifier corresponding to the target color system is sent to the server; the color system identifier is used to determine the target theme.
[0065] Specifically, in the embodiments of the present application, Figure 7 As shown, the style column includes multiple color systems, each color system is a collection of multiple derivative colors generated from the theme color, and the color system including the theme color and multiple derivative colors of the theme color can provide color basis for various display elements of the report. After the user selects the target color system 704 from the multiple color systems in the color system selection module, the color system identifier corresponding to the target color system 704 is sent to the server, and the server generates a target theme matching the target color system according to the color system identifier, and various display elements in the target theme (such as chart style, chart icon) can obtain corresponding colors from each color in the target color system.
[0066] In one or more embodiments, the display further comprises: displaying a reference image reset option in the client based on the style adjustment option selected by the user;
[0067] In response to a reference image reset option selected by the user, the target theme color displayed in the client is deleted.
[0068] Specifically, in the embodiments of the present application, Figure 7 As shown, when the user needs to adjust the current theme and obtain a new theme corresponding to the reference image, the user clicks the reference image reset button in the style color module to delete the target theme color displayed in the client, or clicks the delete all button to delete the target theme color 702 displayed in the client. After deleting the target theme color, when the user selects preview or publish on the current page, the target page is presented as the original report page.
[0069] In one or more embodiments, the style column includes a preset chart display style, and sending the target option to the server according to the target option selected by the user from the style column further includes:
[0070] According to the target display style selected by the user from the preset chart display styles, the style identifier corresponding to the target display style is sent to the server; the style identifier is used to determine the target theme.
[0071] Specifically, in an embodiment of the present application, the chart display style here can be, for example, the shape or color of various charts. When the user wants to adjust the chart display style corresponding to the current theme, the client sends the style identifier corresponding to the target display style to the server according to the target display style selected by the user from the preset chart display styles. The server generates a target theme matching the style identifier based on the style identifier, and then sends the target theme to the client, renders the target theme on the target page of the client to obtain a rendered page, and displays the rendered page.
[0072] As an optional implementation, Figure 8 As shown, the embodiment of the present application also provides a display method, which is applied to the server and includes the following steps:
[0073] S802, receiving a reference image sent by a client, obtaining a theme color and a theme style corresponding to the reference image, and generating a theme matching the theme color and / or theme style.
[0074] Specifically, combined Figure 4 and Figure 5As shown, when the user clicks the reference image upload button on the client, the client receives the reference image 502 uploaded by the user, and the client sends the reference image 502 to the server, and the server obtains the theme color and theme style corresponding to the reference image, and generates a theme that matches the theme color and / or theme style. The theme color here can be one or more colors obtained from the reference image 502, and the theme style can be, for example, the appearance design and layout of the report, such as fonts, colors, and chart styles.
[0075] In the embodiment of the present application, the subject corresponding to the reference image can be obtained by directly sending the reference image to the server after the user clicks the reference image upload button; in another implementation, the embodiment of the application can also display the reference image on the client page, and then obtain the subject corresponding to the reference image by inputting the user's needs; Figure 5 As shown: the user's needs: refer to this picture to beautify the report; the client will synchronously send the reference picture 502 and the user's needs to the server, and the server will obtain the theme color and theme style corresponding to the reference picture, and generate a theme that matches the theme color and / or theme style.
[0076] In one example, if Fig. 9 As shown, when the user uploads reference image 902 to the client, and the client sends reference image 902 to the server, the server obtains the theme colors corresponding to the reference image 902, including two theme colors, a first color with a color value of #36DFE4, and a second color with a color value of #3D5FB6, and then generates a theme that matches the two theme colors.
[0077] S804, sending the theme to the client, so that the client receives the theme, renders the theme on a target page to obtain a rendered page, and displays the rendered page.
[0078] Specifically, the server obtains the theme color and theme style corresponding to the reference image, generates a theme matching the theme color and / or theme style, and then sends the theme to the client, such as Figure 6 As shown, the subject is rendered on the target page of the client to obtain a rendered page 602, and the rendered page 602 is displayed.
[0079] In an embodiment of the present application, a server is used to obtain a reference image uploaded by a user for color matching, and obtain a theme color and a theme style corresponding to the reference image, and generate a theme that matches the theme color and / or theme style; the server sends the theme to a client, renders the theme on a target page to obtain a rendered page, and displays the rendered page; compared to the fixed style and single report template after beautification in the prior art, the present application can accurately obtain a theme that matches the personalized needs of the user based on the reference image provided by the user, significantly improving the user experience, and solving the technical problem that the beautified report in the related art cannot meet the user's diversified and personalized needs due to the fixed and single template style, resulting in a poor user experience.
[0080] In one or more embodiments, obtaining the theme color corresponding to the reference image includes:
[0081] Acquire a color value corresponding to each pixel in the reference image, cluster the color values corresponding to each pixel, and obtain a clustered color cluster;
[0082] sorting the color clusters based on the proportion of the number of pixels of each color cluster in the reference image;
[0083] Determine the main color corresponding to the reference image according to the sorting result and the number of preset theme colors;
[0084] A correction color corresponding to the primary color is obtained, and the correction color is used as the theme color. The correction color is a color obtained by adjusting the brightness and / or saturation corresponding to the primary color.
[0085] Specifically, Fig.10 As shown, the color value corresponding to each pixel in the reference image including the image content of the number 21 is obtained, the color value corresponding to the each pixel is clustered, and the clustered color clusters are obtained, including a white cluster, a red cluster, a green cluster, and color clusters of other colors; the number of pixels of the white cluster accounts for 40% of the reference image, the red cluster accounts for 30% of the reference image, the green cluster accounts for 20% of the reference image, and the color clusters of other colors account for 10% of the reference image. Based on the proportion of the number of pixels of each color cluster in the reference image, the color clusters are sorted; assuming that the user sets the number of theme colors to 2, red and green can be used to determine the main colors corresponding to the reference image; the correction color corresponding to the main color is obtained, and the correction color is used as the theme color. The correction color is a color obtained by adjusting the brightness and / or saturation corresponding to the main color.
[0086] In one or more embodiments, obtaining a correction color corresponding to the primary color includes:
[0087] Based on each color component of the primary color in the current color space, mapping the primary color to a first color space to obtain a first color component corresponding to the primary color in the first color space;
[0088] Projecting the first color component into a second color space to obtain a second color component corresponding to the primary color in the second color space;
[0089] Adjusting each second color component to its corresponding component constraint interval to obtain a second target color component;
[0090] Projecting the second target color component into the first color space to obtain a first target color component;
[0091] Mapping the first target color component to the current color space to obtain a target color component of the primary color in the current color space;
[0092] A correction color corresponding to the primary color is determined based on the target color component.
[0093] Specifically, the current color space is the RGB (Red, Green, Blue) color space, the first color space can be the OKLCH (Lightness-Chromacity-Hue) color space, and the second color space can be the HSB (Hue-Saturation-Brightness) color space. Assuming that the color components of the determined primary color in the current color space are R1, G1, and B1, respectively, the primary color is mapped to the OKLCH color space to obtain the OKLCH color components, brightness component L1, chromaticity component C1, and hue component H1 corresponding to the primary color in the OKLCH color space; the (L1, C1, H1) is projected to the HSB color space to obtain the second color components (H2, S2, B2) corresponding to the primary color in the HSB color space; (H2, S2, B2) are adjusted to their respective corresponding component constraint intervals to obtain the second target color components (H2', S2', B2'). Fig.11 As shown, the lightness of the color corresponding to the hue of 100 is set in the range of [45, 70], and the saturation is set in the range of [40, 100].
[0094] Then, (H2', S2', B2') is projected to the OKLCH color space to obtain the first target color component (L2, C2, H3); the (L2, C2, H3) is mapped to the RGB color space to obtain the target color component (R2, G2, B3) of the primary color in the RGB color space; and the correction color corresponding to the primary color is determined based on the (R2, G2, B3).
[0095] In one or more embodiments, obtaining the theme style corresponding to the reference image includes: obtaining style feature information from the reference image based on a preset image style recognition model, and determining the theme style corresponding to the reference image according to the style feature information.
[0096] Specifically, the style feature information here includes, for example, the content information of the image and the language information of the graphic, etc. The image style recognition model preset in this application is a prediction model obtained by training themes of different style types, and the style feature information is obtained from the reference image based on the image style recognition model. According to the style feature information, the theme style corresponding to the reference image can be accurately determined. The style of the above theme can be, for example, simple style, technological style, light style, lively style, etc.
[0097] In one or more embodiments, generating a theme matching the theme color and theme style includes:
[0098] Determine a style color set corresponding to the theme style, wherein each color in the style color set is a color obtained by adjusting the brightness and / or saturation corresponding to each color;
[0099] Based on a preset color matching rule, at least one set of style colors is selected from a style color set according to the main color corresponding to the reference image as a color system corresponding to the theme;
[0100] A theme matching the theme color and theme style is generated based on the color system.
[0101] Specifically, in the embodiment of the present application, assuming that the picture selected by the user is of a technological style, a style color set corresponding to the technological style is determined, and each color in the style color set is a color obtained by adjusting the brightness and / or saturation corresponding to each color; Figure 7 As shown, based on the preset color matching rules, at least one set of style colors is selected from the style color set (color system set) according to the main color corresponding to the reference image as the color system corresponding to the theme; Fig.12 As shown, multiple color systems corresponding to the main color can be obtained, for example, a 01 progressive color palette of the progressive color system corresponding to the main color, a 02 adjacent color palette of the adjacent color system corresponding to the main color, a 03 classified color palette of the progressive color system, and a 04 neutral color palette of the neutral color system; a theme matching the theme color and the picture style is generated based on the color system. It should be noted that each color in the style color set is a color obtained by adjusting the brightness and / or saturation corresponding to each color, such as Fig.11As shown in the figure, the applicable range of saturation and lightness is set for each hue, and the input color is corrected to the applicable range to avoid the generation of single colors such as green, cyan, and yellow that are easily overbright / oversaturated. For example, the lightness of the color corresponding to the hue of 100 is set in the range of [45, 70], and the saturation is set in the range of [40, 100].
[0102] In one or more embodiments, the preset color matching rule includes at least one of the following:
[0103] In the color system corresponding to the theme, the difference between the hues of two adjacent colors is greater than or equal to a first threshold;
[0104] The hue of each color in any color system corresponding to the theme is distributed within a preset hue range;
[0105] In any color system corresponding to the theme, the difference in saturation between two colors with similar hues is greater than or equal to a second threshold;
[0106] In any color system corresponding to the theme, a difference in brightness between two colors with similar hues is greater than or equal to a third threshold.
[0107] Specifically, in the embodiment of the present application, in the color system corresponding to the theme, the difference between the hues of two adjacent colors is greater than or equal to a first threshold, that is, the hues of two adjacent colors must have a certain degree of distinction, which can effectively ensure the recognition of colors. The first threshold can be 30, for example. All colors in any color system are distributed in a certain hue range, such as Fig.13 As shown, the hue interval is, for example, within the range of [0, 120] degrees, so that the contrast between the two colors can be avoided to be too strong, thereby ensuring the harmony between the colors. Fig.14 As shown, similar colors need to have certain differences in saturation and brightness to ensure color recognition. The value range of the second threshold and the third threshold can be, for example, [25, 35]. In one example, taking the second threshold and the third threshold as 30, the difference in saturation and brightness of two colors with similar hues is greater than 30.
[0108] In one or more embodiments, the theme includes a display element gallery, and generating a theme matching the theme color and theme style includes:
[0109] Determine a display element gallery corresponding to the to-be-displayed content that matches the theme style, and a reference primary color corresponding to the display element gallery;
[0110] The color difference between the reference primary color and the theme color is obtained, and each display element image in the display element image library is adjusted based on the color difference to obtain a target display element image library matching the theme color.
[0111] Specifically, in the embodiment of the present application, the display element gallery corresponding to each style corresponds to a base primary color, and each display element, such as each pixel in the modified image corresponding to the icon style, has a corresponding mapping relationship with the base primary color, that is, a corresponding mapping color difference. The color difference between the base primary color and the theme color is obtained, and the display element images in the display element gallery are adjusted to the target display element with the theme color as the base primary color according to the color difference, so as to obtain the target display element gallery matching the theme color. Fig.15 As shown, the color value of the determined theme color is #FF7C1F, and based on the color difference between the reference primary color and #FF7C1F, the display element images in the display element library (reference image material) are adjusted to obtain a target display element library matching the theme color, that is, the image material after color migration. The above-mentioned report background image and chart card background image, etc.
[0112] In one or more embodiments, the display method further includes:
[0113] Receive the identifier of the target option sent by the client, generate a target theme matching the target option according to the identifier of the target option, wherein the target option is an option indicating a theme style and / or theme color contained in a style column in the client; and send the target theme to the client.
[0114] In one or more embodiments, the style column includes a preset theme style set and / or a preset theme color, and the step of generating an adjustment color theme matching the target option according to the identifier of the target option includes:
[0115] Receiving a style identifier corresponding to a target theme style sent by a client, and generating a target theme matching the target theme style according to the style identifier; the target theme style is any theme style in a preset theme style set; and / or,
[0116] A color identifier corresponding to a target theme color sent by a client is received, and a target theme matching the target theme color is generated according to the color identifier; the target theme color is any color among preset theme colors.
[0117] Specifically, in the embodiments of the present application, Figure 7As shown, when the user needs to make real-time adjustments to the current theme, he selects the style adjustment option, and a theme style set will be displayed in the client, which includes, for example, simple style, technological style, light style, and lively style. In one example, for example, the user only needs to adjust the style intention, switching the current style from simple style to technological style, and according to the target theme style (technological style) selected by the user from the theme style set, the style identifier corresponding to the technological style is sent to the server, and the server generates a target theme matching the technological style according to the technological style identifier, and then sends it to the client, and the client switches the current simple style theme to the technological style.
[0118] like Figure 7 As shown, in one example, for example, the user only needs to adjust the theme color and switch the current theme color to another theme color. The user can select the Delete All button to delete the current theme color 702, click the plus button and select the corresponding theme color. According to the target theme color selected by the user from the preset theme colors, the color identifier corresponding to the target theme color is sent to the server, and the server generates a target theme matching the target theme color according to the color identifier. The server generates a target theme matching the target theme color according to the target theme color identifier, and then sends it to the client, and the client switches the current theme color to the target theme color.
[0119] In one or more embodiments, the theme includes a display element gallery, generating a theme matching the theme color and / or theme style, sending the theme to the client so that the client receives the theme, rendering the theme on a target page to obtain a rendered page, and displaying the rendered page include:
[0120] Determine a display element library corresponding to the report display content matching the theme style, and a base primary color corresponding to the display element library; the display element library includes at least one of a report background image and a chart card background image;
[0121] The color difference between the reference primary color and the theme color is obtained, and each display element image in the display element image library is adjusted based on the color difference to obtain a target display element image library matching the theme color.
[0122] The target display element library is sent to the client, so that the client receives the target display element library, renders the display element library on a report page to obtain a rendering page, and displays the rendering page.
[0123] Specifically, in the embodiment of the present application, the display element gallery corresponding to each style corresponds to a base primary color, and each display element, such as each pixel in the modified image corresponding to the icon style, has a corresponding mapping relationship with the base primary color, that is, a corresponding mapping color difference. The color difference between the base primary color and the theme color is obtained, and the display element images in the display element gallery are adjusted to the target display element with the theme color as the base primary color according to the color difference, so as to obtain the target display element gallery matching the theme color. Fig.15 As shown, the color value of the determined theme color is #FF7C1F. Based on the color difference between the base primary color and #FF7C1F, the display element images in the display element library (base image material) are adjusted to obtain a target display element library that matches the theme color, that is, an image material after color migration. The above-mentioned report background image and chart card background image, etc. The server sends the target display element library to the client, and the client receives the target display element library, renders the display element library on the report page to obtain a rendering page, and displays the rendering page.
[0124] Based on the above embodiment, as an optional implementation manner, the embodiment of the present application further provides a display method, the method comprising:
[0125] 1. The user uploads a reference image to the display system. The image color extraction engine on the display system server uses a color recognition algorithm to analyze the reference image, identify and extract the dominant color (theme color) in the reference image, and based on design experience, correct its brightness, saturation and other color parameters to a range suitable for visual color matching. These colors will serve as the basis for subsequent report color matching.
[0126] 2. The server uses the image style recognition engine to match the style of the reference image uploaded by the user. The engine includes image processing and machine learning algorithms to identify specific style features in the image, such as business style, technology style, modern style, etc.
[0127] 3. The server automatically creates a set of coordinated colors based on the extracted main colors and the matched styles through built-in color matching rules. This color scheme will be used in charts and reports on the client side to ensure color uniformity and professionalism.
[0128] 4. The server maps the identified primary color to a basic modification library, which contains a variety of modification images that match the style, such as report background images, chart card background images, etc., and generates a modification image that matches the report style.
[0129] 5. The client of the display system applies the generated chart colors, style modifiers, and corresponding stylized configurations to the actual report. These elements work together to make the generated report both unified and visually attractive.
[0130] 6. Users can make subtle adjustments to the beautification effect of the report through the client's interactive interface, such as changing the main color, switching styles, etc., to meet the user's personalized needs.
[0131] Compared with the prior art, the above-mentioned technical solution of the present application has the following beneficial technical effects: the present application can accurately obtain themes that match the personalized needs of the user based on the reference pictures provided by the user, thereby significantly improving the user experience.
[0132] It should be noted that, for the above-mentioned method embodiments, for the sake of simplicity, they are all described as a series of action combinations, but those skilled in the art should know that the present invention is not limited by the described action sequence, because according to the present invention, certain steps can be performed in other sequences or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present invention.
[0133] According to another aspect of the embodiments of the present application, a display device for implementing the above display method is also provided, which is applied to a client. Fig.16 As shown, the device comprises:
[0134] The receiving unit 1602 is used to receive a reference image uploaded by a user for color matching; the theme color and / or theme style corresponding to the reference image is used to determine the theme of the target page to be rendered;
[0135] The sending unit 1604 is used to send the reference image to the server;
[0136] The rendering and displaying unit 1606 is used to receive the theme sent by the server, render the theme on the target page to obtain a rendered page, and display the rendered page.
[0137] In one or more embodiments, the display device further includes:
[0138] An adjustment display unit, configured to display a style column corresponding to a style adjustment option selected by a user on a style adjustment page;
[0139] a determination sending unit, configured to send an identifier of the target option to the server in response to a target option selected by a user from the style column, the target option being an option indicating a theme style and / or theme color; the identifier of the target option is used to determine a target theme;
[0140] The receiving switching unit is used to receive the target theme sent by the server, and render the target theme on the target page so that the current theme displayed on the target page is switched to the target theme.
[0141] In one or more embodiments, the style column includes a preset theme style set and / or a preset theme color, and the determining and sending unit includes:
[0142] A first determination and sending module is used to send a style identifier corresponding to a target theme style selected by a user from the theme style set to a server; and / or,
[0143] The second determination and sending module is used to send a color identifier corresponding to the target theme color to the server according to the target theme color selected by the user from the preset theme colors.
[0144] In one or more embodiments, the style column includes multiple color systems, each color system is a set of multiple derivative colors generated according to the theme color, and the determining and sending unit includes:
[0145] The third determination and sending module is used to send the color system identifier corresponding to the target color system selected by the user from the multiple color systems to the server; the color system identifier is used to determine the target theme.
[0146] In one or more embodiments, the display device further includes:
[0147] A display unit, configured to display a reference image reset option in the client based on the style adjustment option selected by the user;
[0148] The deleting unit is used to delete the target theme color displayed in the client in response to the reference image reset option selected by the user.
[0149] In one or more embodiments, the style column includes a preset chart display style, and the determining and sending unit further includes:
[0150] The fourth determination and sending module is used to send the style identifier corresponding to the target display style to the server according to the target display style selected by the user from the preset chart display styles; the style identifier is used to determine the target theme.
[0151] According to another aspect of the embodiment of the present application, a display device for implementing the above display method is also provided, which is applied to a server. Fig.17 As shown, the device comprises:
[0152] The first receiving and generating unit 1702 is configured to receive a reference image sent by a client, obtain a theme color and a theme style corresponding to the reference image, and generate a theme matching the theme color and / or theme style;
[0153] The first sending unit 1704 is configured to send the theme to the client, so that the client receives the theme, renders the theme on a target page to obtain a rendered page, and displays the rendered page.
[0154] In one or more embodiments, the first receiving and generating unit 1702 includes:
[0155] A clustering module, used to obtain the color value corresponding to each pixel in the reference image, cluster the color values corresponding to each pixel, and obtain a clustered color cluster;
[0156] A sorting module, used for sorting the color clusters based on the proportion of the number of pixels of each color cluster in the reference image;
[0157] A first determination module, used to determine the main color corresponding to the reference image according to the sorting result and the number of preset theme colors;
[0158] The acquisition module is used to acquire a correction color corresponding to the primary color, and use the correction color as the theme color. The correction color is a color obtained by adjusting the brightness and / or saturation corresponding to the primary color.
[0159] In one or more embodiments, the acquisition module includes:
[0160] A first mapping subunit, configured to map the primary color to a first color space based on each color component of the primary color in the current color space, to obtain a first color component corresponding to the primary color in the first color space;
[0161] A first projection subunit, configured to project the first color component into a second color space to obtain a second color component corresponding to the primary color in the second color space;
[0162] An adjustment subunit, used for adjusting each second color component to its corresponding component constraint interval to obtain a second target color component;
[0163] A second projection subunit, configured to project the second target color component into a first color space to obtain a first target color component;
[0164] A second mapping subunit is used to map the first target color component to the current color space to obtain a target color component of the primary color in the current color space;
[0165] A determination subunit is used to determine a correction color corresponding to the primary color based on the target color component.
[0166] In one or more embodiments, the first receiving and generating unit 1702 includes:
[0167] A second determination module is used to determine a style color set corresponding to the theme style, where each color in the style color set is a color obtained by adjusting the brightness and / or saturation corresponding to each color;
[0168] A selection module, configured to select at least one set of style colors from a style color set as a color system corresponding to the theme based on a preset color matching rule and according to a main color corresponding to the reference image;
[0169] A generation module is used to generate a theme matching the theme color and the picture style based on the color system.
[0170] In one or more embodiments, the preset color matching rule includes at least one of the following:
[0171] In the color system corresponding to the theme, the difference between the hues of two adjacent colors is greater than or equal to a first threshold;
[0172] The hue of each color in any color system corresponding to the theme is distributed within a preset hue range;
[0173] In any color system corresponding to the theme, the difference in saturation between two colors with similar hues is greater than or equal to a second threshold;
[0174] In any color system corresponding to the theme, a difference in brightness between two colors with similar hues is greater than or equal to a third threshold.
[0175] In one or more embodiments, the theme includes a display element gallery, and the first receiving and generating unit 1702 includes:
[0176] A third determination module is used to determine a display element library corresponding to the to-be-displayed content matching the theme style, and a reference primary color corresponding to the display element library;
[0177] The acquisition and adjustment module is used to acquire the color difference between the reference primary color and the theme color, and adjust each display element image in the display element image library based on the color difference to obtain a target display element image library matching the theme color.
[0178] In one or more embodiments, the display device further includes:
[0179] a second receiving and generating unit, configured to receive an identifier of a target option sent by the client, and generate a target theme matching the target option according to the identifier of the target option, wherein the target option is an option indicating a theme style and / or theme color contained in a style column in the client;
[0180] The second sending unit is used to send the target topic to the client.
[0181] In one or more embodiments, the second receiving and generating unit includes:
[0182] A first receiving and generating module is configured to receive a style identifier corresponding to a target theme style sent by a client, and generate a target theme matching the target theme style according to the style identifier; the target theme style is any theme style in a preset theme style set; and / or,
[0183] The second receiving and generating module is used to receive a color identifier corresponding to a target theme color sent by a client, and generate a target theme matching the target theme color according to the color identifier; the target theme color is any color among preset theme colors.
[0184] According to another aspect of the embodiments of the present application, a display system for implementing the above display method is also provided. Fig.18 As shown, the system includes a client and a server;
[0185] The server is used to receive a reference image sent by a client, obtain a theme color and a theme style corresponding to the reference image, generate a theme matching the theme color and / or theme style; and send the theme to the client;
[0186] The client is used to receive a reference image for color matching uploaded by a user; send the reference image to a server; receive the theme sent by the server, render the theme on a target page to obtain a rendered page, and display the rendered page.
[0187] According to another aspect of the embodiment of the present application, a display system for implementing the above display method is also provided, the system comprising a server and a terminal;
[0188] The server is used to receive a reference image sent by the client for color matching of the report theme, obtain a theme color and theme style corresponding to the reference image, generate a theme matching the theme color and / or theme style; and send the theme to the client;
[0189] The client is used to receive the reference image uploaded by the user; send the reference image to the server; receive the theme sent by the server, render the theme on the report page to obtain a rendering page, and display the rendering page.
[0190] In one or more embodiments, the server is also used to determine a display element library corresponding to the report display content matching the image style, and a base primary color corresponding to the display element library; obtain the color difference between the base primary color and the theme color, and adjust each display element image in the display element library based on the color difference to obtain a target display element library matching the theme color; the display element library includes at least one of a report background image and a chart card background image.
[0191] According to another aspect of the embodiment of the present application, an electronic device for implementing the above display method is also provided. The electronic device may be Figure 1 The terminal or server shown in the figure. This embodiment is described by taking the electronic device as a terminal as an example. Fig.19 As shown, the electronic device includes a memory 1902 and a processor 1904. The memory 1902 stores a computer program, and the processor 1904 is configured to execute the steps in any of the above method embodiments through the computer program.
[0192] Optionally, in this embodiment, the electronic device may be at least one network device among a plurality of network devices of a computer network.
[0193] Optionally, in this embodiment, the processor may be configured to perform the following steps through a computer program:
[0194] S11, receiving a reference image uploaded by a user for color matching; the theme color and / or theme style corresponding to the reference image is used to determine the theme of the target page to be rendered;
[0195] S12, sending the reference image to a server;
[0196] S13, receiving the theme sent by the server, rendering the theme on the target page to obtain a rendered page, and displaying the rendered page.
[0197] Among them, the memory 1902 can be used to store software programs and modules, such as program instructions / modules corresponding to the display method and device in the embodiment of the present application. The processor 1904 executes various functional applications and data processing by running the software programs and modules stored in the memory 1902, that is, realizing the above-mentioned display method. The memory 1902 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 1902 may further include a memory remotely arranged relative to the processor 1904, and these remote memories can be connected to the terminal via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and a combination thereof. Among them, the memory 1902 can be specifically used, but not limited to, for storing report themes.
[0198] As an example, 19 Fig.19 As shown, the memory 1902 may include, but is not limited to, the receiving unit 1602, the sending unit 1604, and the rendering display unit 1606 in the display device. In addition, it may also include, but is not limited to, other module units in the display device, which will not be repeated in this example.
[0199] Optionally, the transmission device 1906 is used to receive or send data via a network. Specific examples of the network may include a wired network and a wireless network. In one example, the transmission device 1906 includes a network adapter (Network Interface Controller, NIC), which can be connected to other network devices and routers via a network cable so as to communicate with the Internet or a local area network. In one example, the transmission device 1906 is a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.
[0200] In addition, the electronic device mentioned above further includes: a connection bus 1908, which is used to connect various module components in the electronic device mentioned above.
[0201] According to another aspect of the embodiment of the present application, an electronic device for implementing the above display method is also provided. The electronic device may be Figure 1 The terminal or server shown in FIG. This embodiment is described by taking the electronic device as the server as an example. Fig. 20 As shown, the electronic device includes a memory 2002 and a processor 2004. The memory 2002 stores a computer program. The processor 2004 is configured to execute the steps in any of the above method embodiments through the computer program.
[0202] Optionally, in this embodiment, the electronic device may be at least one network device among a plurality of network devices of a computer network.
[0203] Optionally, in this embodiment, the processor may be configured to perform the following steps through a computer program:
[0204] S21, receiving a reference image sent by a client, obtaining a theme color and a theme style corresponding to the reference image, and generating a theme matching the theme color and / or theme style;
[0205] S22, sending the theme to the client, so that the client receives the theme, renders the theme on a target page to obtain a rendered page, and displays the rendered page.
[0206] Among them, the memory 2002 can be used to store software programs and modules, such as program instructions / modules corresponding to the display method and device in the embodiment of the present application, and the processor 2004 executes various functional applications and data processing by running the software programs and modules stored in the memory 2002, that is, realizing the above-mentioned display method. The memory 2002 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some examples, the memory 2002 may further include a memory remotely arranged relative to the processor 2004, and these remote memories may be connected to the terminal via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof. Among them, the memory 2002 can be specifically, but not limited to, used to store report themes.
[0207] As an example, if 20 Fig. 20 As shown, the memory 2002 may include but is not limited to the first receiving and generating unit 1702 and the first sending unit 1704 in the display device. In addition, it may also include but is not limited to other module units in the display device, which will not be described in detail in this example.
[0208] Optionally, the transmission device 2006 is used to receive or send data via a network. Specific examples of the network may include a wired network and a wireless network. In one example, the transmission device 2006 includes a network adapter (Network Interface Controller, NIC), which can be connected to other network devices and routers via a network cable so as to communicate with the Internet or a local area network. In one example, the transmission device 2006 is a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.
[0209] In addition, the electronic device mentioned above further includes: a connection bus 2008, which is used to connect various module components in the electronic device mentioned above.
[0210] In other embodiments, the electronic device may be a node in a distributed system, wherein the distributed system may be a blockchain system, and the blockchain system may be a distributed system formed by connecting the multiple nodes through network communication. The nodes may form a peer-to-peer (P2P) network, and any form of computing device, such as a server, terminal, or other electronic device, may become a node in the blockchain system by joining the peer-to-peer network.
[0211] In one or more embodiments, the present application also provides a computer program product or computer program, which includes computer instructions stored in a computer-readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device performs the above-mentioned meeting minutes generation method. Wherein, the computer program is configured to execute the steps of any of the above-mentioned method embodiments when running.
[0212] Optionally, in this embodiment, the computer-readable storage medium may be configured to store a computer program for performing the following steps:
[0213] S11, receiving a reference image uploaded by a user for color matching; the theme color and / or theme style corresponding to the reference image is used to determine the theme of the target page to be rendered;
[0214] S12, sending the reference image to a server;
[0215] S13, receiving the theme sent by the server, rendering the theme on the target page to obtain a rendered page, and displaying the rendered page. Or a computer program for performing the following steps:
[0216] S21, receiving a reference image sent by a client, obtaining a theme color and a theme style corresponding to the reference image, and generating a theme matching the theme color and / or theme style;
[0217] S22, sending the theme to the client, so that the client receives the theme, renders the theme on a target page to obtain a rendered page, and displays the rendered page.
[0218] Optionally, in this embodiment, a person of ordinary skill in the art may understand that all or part of the steps in the various methods of the above embodiments may be completed by instructing hardware related to the terminal device through a program, and the program may be stored in a computer-readable storage medium, and the storage medium may include: a flash drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.
[0219] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.
[0220] If the integrated units in the above embodiments are implemented in the form of software functional units and sold or used as independent products, they can be stored in the above computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for enabling one or more computer devices (which can be personal computers, servers or network devices, etc.) to execute all or part of the steps of the methods of various embodiments of the present invention.
[0221] In the above embodiments of the present invention, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, reference can be made to the relevant descriptions of other embodiments.
[0222] In the several embodiments provided in the present application, it should be understood that the disclosed client can be implemented in other ways. Among them, the device embodiments described above are only schematic, for example, the division of units is only a logical function division, and there may be other division methods in actual implementation, for example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.
[0223] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
[0224] In addition, each functional unit in each embodiment of the present invention may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.
[0225] The above are only preferred embodiments of the present invention. It should be pointed out that, for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present invention. These improvements and modifications should also be regarded as the scope of protection of the present invention.
[0226] The user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with the relevant laws, regulations and standards of relevant countries and regions, and provide corresponding operation entrances for users to choose to authorize or refuse.
Claims
1. A display method, characterized in that: Applied to a client, the method comprises: Receive a reference image uploaded by a user for color matching of a report theme; the theme color and / or theme style corresponding to the reference image is used to determine the theme of a target page to be rendered; wherein the theme color acquisition method includes: acquiring the color value corresponding to each pixel in the reference image, clustering the color values corresponding to each pixel, and obtaining a clustered color cluster; sorting each color cluster based on the proportion of the number of pixels in each color cluster in the reference image; determining the primary color corresponding to the reference image based on the sorting result and the preset number of theme colors; mapping the primary color to a first color space based on each color component of the primary color in the current color space, and obtaining to the first color component corresponding to the primary color in the first color space; project the first color component to the second color space to obtain the second color component corresponding to the primary color in the second color space; adjust each second color component to the corresponding component constraint interval to obtain a second target color component; project the second target color component to the first color space to obtain a first target color component; map the first target color component to the current color space to obtain the target color component of the primary color in the current color space; determine the correction color corresponding to the primary color based on the target color component, and use the correction color as the theme color; Sending the reference image to a server; The subject sent by the server is received, the subject is rendered on the target page to obtain a rendered page, and the rendered page is displayed; the target page includes a report page.
2. The method according to claim 1, characterized in that The method further comprises: Based on the style adjustment option selected by the user, displaying the style column corresponding to the style adjustment option on the style adjustment page; In response to a target option selected by a user from the style column, the target option being an option indicating a theme style and / or theme color, sending an identifier of the target option to the server; the identifier of the target option is used to determine a target theme; The target theme sent by the server is received, and the target theme is rendered on the target page, so that the current theme displayed on the target page is switched to the target theme.
3. The method according to claim 2, characterized in that The style column includes a preset theme style set and / or a preset theme color, and in response to a target option selected by a user from the style column, sending the target option to the server includes: According to the target theme style selected by the user from the theme style set, sending the style identifier corresponding to the target theme style to the server; and / or, According to the target theme color selected by the user from the preset theme colors, a color identifier corresponding to the target theme color is sent to the server.
4. The method according to claim 2, characterized in that: The style column includes a plurality of color systems, each color system is a set of a plurality of derivative colors generated according to the theme color, and according to a target option selected by a user from the style column, an identifier of the target option is sent to the server, including: According to the target color system selected by the user from the multiple color systems, a color system identifier corresponding to the target color system is sent to the server; the color system identifier is used to determine the target theme.
5. The method according to any one of claims 1 to 4, characterized in that The method further comprises: Based on the style adjustment option selected by the user, displaying a reference image reset option in the client; In response to a reference image reset option selected by the user, the target theme color displayed in the client is deleted.
6. The method according to claim 2, characterized in that The style column includes a preset chart display style. According to the target option selected by the user from the style column, the identifier of the target option is sent to the server, so that the server generates a target theme matching the target option according to the target option, including: According to the target display style selected by the user from the preset chart display styles, the style identifier corresponding to the target display style is sent to the server; the style identifier is used to determine the target theme.
7. A display method, characterized in that: Applied to the server, the method includes: Receive a reference image sent by a client, obtain a theme color and a theme style corresponding to the reference image, and generate a theme that matches the theme color and / or theme style; Sending the subject to the client so that the client receives the subject, rendering the subject on a target page to obtain a rendered page, and displaying the rendered page; Wherein, obtaining the theme color corresponding to the reference image includes: Acquire a color value corresponding to each pixel in the reference image, cluster the color values corresponding to each pixel, and obtain a clustered color cluster; sorting the color clusters based on the proportion of the number of pixels of each color cluster in the reference image; Determine the main color corresponding to the reference image according to the sorting result and the number of preset theme colors; Based on each color component of the primary color in the current color space, mapping the primary color to a first color space to obtain a first color component corresponding to the primary color in the first color space; Projecting the first color component into a second color space to obtain a second color component corresponding to the primary color in the second color space; Adjusting each second color component to its corresponding component constraint interval to obtain a second target color component; Projecting the second target color component into the first color space to obtain a first target color component; Mapping the first target color component to the current color space to obtain a target color component of the primary color in the current color space; A correction color corresponding to the primary color is determined based on the target color component, and the correction color is used as the theme color.
8. The method according to claim 7, characterized in that The generating of a theme matching the theme color and theme style comprises: Determine a style color set corresponding to the theme style, wherein each color in the style color set is a color obtained by adjusting the brightness and / or saturation corresponding to each color; Based on a preset color matching rule, at least one set of style colors is selected from a style color set according to the main color corresponding to the reference image as a color system corresponding to the theme; A theme matching the theme color and theme style is generated based on the color system.
9. The method according to claim 8, characterized in that The preset color matching rules include at least one of the following: In the color system corresponding to the theme, the difference between the hues of two adjacent colors is greater than or equal to a first threshold; The hue of each color in any color system corresponding to the theme is distributed within a preset hue range; In any color system corresponding to the theme, the difference in saturation between two colors with similar hues is greater than or equal to a second threshold; In any color system corresponding to the theme, a difference in brightness between two colors with similar hues is greater than or equal to a third threshold.
10. The method according to claim 7, characterized in that The theme includes a display element gallery, and generating a theme matching the theme color and theme style includes: Determine a display element gallery corresponding to the to-be-displayed content that matches the theme style, and a reference primary color corresponding to the display element gallery; The color difference between the reference primary color and the theme color is obtained, and each display element image in the display element image library is adjusted based on the color difference to obtain a target display element image library matching the theme color.
11. The method according to claim 7, characterized in that The method further comprises: Receiving an identifier of a target option sent by the client, and generating a target theme matching the target option according to the identifier of the target option, wherein the target option is an option indicating a theme style and / or theme color contained in a style column in the client; The target topic is sent to the client.
12. The method according to claim 11, characterized in that The style column includes a preset theme style set and / or a preset theme color, and generates a target theme matching the target option according to the identifier of the target option, including: Receiving a style identifier corresponding to a target theme style sent by the client, and generating a target theme matching the target theme style according to the style identifier; the target theme style is any theme style in a preset theme style set; and / or, A color identifier corresponding to a target theme color sent by the client is received, and a target theme matching the target theme color is generated according to the color identifier; the target theme color is any color among preset theme colors.
13. The method according to claim 7, characterized in that The theme includes a display element gallery, generating a theme matching the theme color and / or theme style, sending the theme to the client so that the client receives the theme, rendering the theme on a target page to obtain a rendered page, and displaying the rendered page, including: Determine a display element library corresponding to the report display content matching the theme style, and a base primary color corresponding to the display element library; the display element library includes at least one of a report background image and a chart card background image; Obtaining the color difference between the reference primary color and the theme color, adjusting each display element image in the display element library based on the color difference, and obtaining a target display element library that matches the theme color; The target display element library is sent to the client, so that the client receives the target display element library, renders the display element library on a report page to obtain a rendering page, and displays the rendering page.
14. A display system, characterized in that: Including client and server; The server is used to receive a reference image sent by the client for color matching of the report theme, obtain the theme color and theme style corresponding to the reference image, generate a theme matching the theme color and / or theme style; send the theme to the client; wherein obtaining the theme color corresponding to the reference image includes: obtaining the color value corresponding to each pixel in the reference image, clustering the color value corresponding to each pixel to obtain the clustered color cluster; sorting the color clusters based on the proportion of the number of pixels in each color cluster in the reference image; determining the primary color corresponding to the reference image based on the sorting result and the preset number of theme colors; and sorting the primary color based on the color values of the primary color in the current color space. component, mapping the primary color to a first color space to obtain a first color component corresponding to the primary color in the first color space; projecting the first color component to a second color space to obtain a second color component corresponding to the primary color in the second color space; adjusting each second color component to a corresponding component constraint interval to obtain a second target color component; projecting the second target color component to the first color space to obtain a first target color component; mapping the first target color component to the current color space to obtain a target color component of the primary color in the current color space; determining a correction color corresponding to the primary color based on the target color component, and using the correction color as the theme color; The client is used to receive the reference image uploaded by the user; send the reference image to the server; receive the theme sent by the server, render the theme on the report page to obtain a rendering page, and display the rendering page.
15. The display system according to claim 14, characterized in that: The server is also used to determine a display element library corresponding to the report display content matching the theme style, and a base primary color corresponding to the display element library; obtain the color difference between the base primary color and the theme color, and adjust each display element image in the display element library based on the color difference to obtain a target display element library matching the theme color; the display element library includes at least one of a report background image and a chart card background image.
16. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: The processor executes the computer program to implement the method according to any one of claims 1 to 6, or 7 to 13.
17. A computer-readable storage medium having a computer program stored thereon, characterized in that: The program is executed by a processor to implement the method according to any one of claims 1 to 6, or 7 to 13.
18. A computer program product comprising a computer program, characterized in that The computer program is executed by a processor to implement the method according to any one of claims 1 to 6, or 7 to 13.
Citation Information
Patent Citations
Color correction method and color correction device
CN101094307A
Automobile electronic interior trim style theme switching method and device
CN114693809A
Display processing method and device, storage medium and electronic equipment
CN117492618A