CN115587272A - Front-end page color adjusting method, device, system and medium - Google Patents

Front-end page color adjusting method, device, system and medium Download PDF

Info

Publication number
CN115587272A
CN115587272A CN202211294621.6A CN202211294621A CN115587272A CN 115587272 A CN115587272 A CN 115587272A CN 202211294621 A CN202211294621 A CN 202211294621A CN 115587272 A CN115587272 A CN 115587272A
Authority
CN
China
Prior art keywords
picture
color
target
adjusted
theme
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202211294621.6A
Other languages
Chinese (zh)
Inventor
马风阳
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Agricultural Bank of China
Original Assignee
Agricultural Bank of China
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Agricultural Bank of China filed Critical Agricultural Bank of China
Priority to CN202211294621.6A priority Critical patent/CN115587272A/en
Publication of CN115587272A publication Critical patent/CN115587272A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
    • G06F16/9566—URL specific, e.g. using aliases, detecting broken or misspelled links
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T7/00—Image analysis
    • G06T7/90—Determination of colour characteristics

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • General Engineering & Computer Science (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Image Processing (AREA)

Abstract

The embodiment of the invention discloses a front-end page color adjusting method, a device, a system and a medium, wherein the method comprises the following steps: when the front-end theme change is detected, acquiring a theme color identifier of a target change theme; acquiring a picture to be adjusted in an original front-end page, and determining a target picture color parameter of the picture to be adjusted according to the theme color identifier; for each picture to be adjusted, adjusting a color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture; and generating a target front-end page based on the target adjustment page picture, displaying the target front-end page, and performing self-adaptive unified adjustment on the colors of the pictures in the pages when theme change is detected without developing color editing on each page, thereby avoiding code redundancy, simplifying the color adjustment development difficulty of the front-end page, and improving the development efficiency.

Description

Front-end page color adjusting method, device, system and medium
Technical Field
The embodiment of the invention relates to the technical field of computers, in particular to a front-end page color adjusting method, device, system and medium.
Background
In the current common background management system, the function of changing theme colors is always provided to meet the use experience of users with different aesthetic feelings, and moreover, in order to achieve a better visual effect, a large number of multi-color Scalable Vector Graphics (SVG) pictures are used on the front-end page. When the user changes the theme color, the color of the SVG picture needs to be automatically changed to be close to the color or color system. However, the SVG pictures are dispersed in each page of each module of the system at present, and in the prior art, each page developer needs to develop and maintain independently, which wastes time and labor, and the workload is huge during later modification and easily causes bugs.
Disclosure of Invention
The embodiment of the invention provides a front-end page color adjusting method, device, system and medium, which are used for simplifying the color adjusting development difficulty of a front-end page and improving the development efficiency.
In a first aspect, an embodiment of the present invention provides a front-end page color adjusting method, including:
when the front-end theme change is detected, acquiring a theme color identifier of a target change theme;
acquiring a picture to be adjusted in an original front-end page, and determining a target picture color parameter of the picture to be adjusted according to the theme color identifier;
for each picture to be adjusted, adjusting a color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture;
and generating a target front-end page based on the target adjustment page picture, and displaying the target front-end page.
Optionally, further, the obtaining of the to-be-adjusted picture in each original front-end page includes:
and taking the picture in the scalable vector graphics format in each original front-end page as the picture to be adjusted.
Optionally, further, the determining, according to the theme color identifier, a target picture color parameter of the picture to be adjusted includes:
and acquiring a target color parameter association relation corresponding to the picture to be adjusted, and taking the picture color parameter corresponding to the theme color identifier in the target color parameter association relation as the target picture color parameter.
Optionally, further, the obtaining of the target color parameter association relationship corresponding to the picture to be adjusted includes:
and acquiring the association relation of the target color parameters according to the picture identification of the picture to be adjusted.
Optionally, further, the adjusting the color replacement operator of the picture to be adjusted based on the color parameter of the target picture to obtain a target adjustment page picture includes:
and determining the index of the picture to be adjusted, and adjusting the color replacement operator in the uniform resource locator of the picture to be adjusted to the color parameter of the target picture based on the index to obtain the target adjustment page picture.
Optionally, further, the method further includes:
responding to the detected color parameter editing instruction, and acquiring color parameter editing information associated with the color parameter editing instruction;
determining the color parameter association relation to be edited associated with the color parameter editing information;
and adjusting the color parameter association relation to be edited based on the color parameter editing information to obtain the edited color parameter association relation.
Optionally, further, the method further includes:
the method comprises the steps of obtaining a color adjusting picture in a front-end page, and setting a variable color parameter in the color adjusting picture as a color replacing operator.
In a second aspect, an embodiment of the present invention further provides a front-end page color adjusting apparatus, including:
the theme color identification module is used for acquiring the theme color identification of the target replacement theme when the front-end theme is detected to be replaced;
the image color parameter module is used for acquiring an image to be adjusted in an original front-end page and determining a target image color parameter of the image to be adjusted according to the theme color identifier;
the picture color adjusting module is used for adjusting the color replacement operator of the picture to be adjusted based on the target picture color parameter aiming at each picture to be adjusted to obtain a target adjustment page picture;
and the front-end page generating module is used for generating a target front-end page based on the target adjustment page picture and displaying the target front-end page.
In a third aspect, an embodiment of the present invention further provides a front-end page color adjusting apparatus, including:
one or more processors;
storage means for storing one or more programs;
a display for displaying an image;
when executed by one or more processors, cause the one or more processors to implement a front-end page color adjustment method as provided by any of the embodiments of the invention.
In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program is configured to implement the front-end page color adjusting method provided in any embodiment of the present invention when executed by a processor.
According to the embodiment of the invention, when the front-end theme is detected to be changed, the theme color identification of the target change theme is acquired; acquiring a picture to be adjusted in an original front-end page, and determining a target picture color parameter of the picture to be adjusted according to the theme color identifier; for each picture to be adjusted, adjusting a color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture; and generating a target front-end page based on the target adjustment page picture, displaying the target front-end page, and adaptively and uniformly adjusting the color of the picture in the page when the theme change is detected without developing color editing in each page, thereby avoiding code redundancy, simplifying the color adjustment development difficulty of the front-end page, and improving the development efficiency.
Drawings
Fig. 1 is a schematic flowchart of a front-end page color adjusting method according to an embodiment of the present invention;
FIG. 2 is a schematic flow chart of a front-end page color adjustment method according to a second embodiment of the present invention;
fig. 3 is a schematic structural diagram of a front-end page color adjustment apparatus according to a third embodiment of the present invention;
fig. 4 is a schematic structural diagram of a computer device according to a fourth embodiment of the present invention.
Detailed Description
The present invention will be described in further detail with reference to the accompanying drawings and examples. It is to be understood that the specific embodiments described herein are merely illustrative of the invention and are not limiting of the invention. It should be further noted that, for the convenience of description, only some of the structures related to the present invention are shown in the drawings, not all of the structures.
Example one
Fig. 1 is a schematic flowchart of a front-end page color adjusting method according to an embodiment of the present invention. The embodiment can be applied to the situation when the color of the picture in the front-end page is adjusted when the theme color is changed in the application program. The method may be performed by a front-end page adjusting apparatus, which may be implemented in software and/or hardware, for example, and may be configured in an electronic device. As shown in fig. 1, the method includes:
and S110, when the front-end theme is detected to be replaced, acquiring the theme color identification of the target replacement theme.
The current application development is broadly divided into front-end and back-end. The front end is mainly used for page display and user interaction, and the back end is mainly used for algorithm logic and database storage. The front end in the embodiment of the invention can be understood as a display end of the background management system and can comprise a webpage end and a mobile end.
The application program is usually provided with a function of changing the theme or changing the color of the theme so as to meet the use requirements of different users. The page display forms of the front-end page are also rich, such as WebGL3D animation, iconfont icons, SVG vector diagrams and the like. In order to change the theme, the picture display of the front page is adjusted accordingly. The embodiment provides a logic capable of uniformly adjusting all pictures in a front-end page, and color adjustment of all pictures can be realized only by providing necessary adjustment parameters.
In this embodiment, whether the front-end theme is replaced or not may be determined by detecting a theme replacement instruction initiated by a user. Illustratively, when a user needs to replace a theme, the front-end page color adjustment device may detect a theme replacement instruction triggered by the user by selecting the theme to be replaced as a target replacement theme and triggering the theme replacement instruction, and determine that front-end theme replacement is detected when the theme replacement instruction triggered by the user is detected. When the front-end theme change is detected, the target change theme can be determined according to the theme identification carried in the theme change instruction, and the theme color identification of the target change theme is obtained.
In one embodiment, the corresponding relationship between the theme and the color identifier may be stored, and after the target replacement theme is determined, the color identifier corresponding to the target replacement theme is used as the theme color identifier of the target replacement theme.
S120, obtaining a picture to be adjusted in an original front-end page, and determining a target picture color parameter of the picture to be adjusted according to the theme color identifier.
In this embodiment, the original front page may be understood as a front page before theme change. It will be appreciated that the number of front pages in an application is typically multiple, and thus the number of original front pages is one or more. And when the number of the original front-end pages is multiple, acquiring the pictures needing color adjustment in all the original front-end pages as the pictures to be adjusted. Optionally, the obtaining of the to-be-adjusted picture in each original front-end page includes: and taking the picture in the scalable vector graphics format in each original front-end page as the picture to be adjusted. The method can take pictures in a scalable vector graphics format (SVG) in all original front-end pages as pictures to be adjusted, and the SVG pictures can ensure that the picture quality is not lost, namely, not distorted, under the condition of changing the size. SVG vector graphics describe images with points, lines and various shapes, each of which supports fill colors, and are called multi-color SVG vector graphics. Moreover, the SVG is not only an image format, but also an XML (extensible markup language, similar to HTML) based language, which means that it inherits the cross-platform and extensibility of XML and also gives its programmable property, i.e. a developer can directly edit its constituent elements, including its color, and utilize the programmable characteristic of the picture in the scalable vector graphics format to realize the uniform adjustment of all the pictures to be adjusted.
It can be understood that, in order to ensure the display effect of the front page, the color of the picture in the front page is generally consistent with the theme color of the application program. Based on the above, the target color of the picture to be adjusted can be determined according to the theme color of the target replacement theme. Optionally, the determining the target picture color parameter of the picture to be adjusted according to the theme color identifier includes: and acquiring a target color parameter association relation corresponding to the picture to be adjusted, and taking the picture color parameter corresponding to the theme color identifier in the target color parameter association relation as the target picture color parameter. The corresponding relation between the theme color identifier and the picture color parameter can be preset, and the target picture color parameter corresponding to the theme color identifier is determined according to the preset corresponding relation.
When the number of the pictures to be adjusted in the front-end page is multiple, the colors of different pictures to be adjusted may be inconsistent, or a certain picture to be adjusted contains different colors. On the basis, the picture color parameters of the picture to be adjusted under different theme colors can be set for each picture to be adjusted, and the corresponding relation among the picture to be adjusted, the theme colors and the picture color parameters is established based on the picture color parameters of the picture to be adjusted under different theme colors. When determining the target picture color parameter of the picture to be adjusted, firstly, acquiring a color parameter association relation corresponding to the picture to be adjusted as a target color parameter association relation, and taking the picture color parameter corresponding to the subject color identifier in the target color parameter association relation as the target picture color parameter. The picture color parameter may be an image matrix of the picture to be adjusted, and a value of each element in the matrix represents a pixel value at a position corresponding to the element in the picture to be adjusted.
On the basis of the above scheme, the obtaining of the target color parameter association relationship corresponding to the picture to be adjusted includes: and acquiring the association relation of the target color parameters according to the picture identification of the picture to be adjusted. Optionally, a picture identifier of each picture may be set, and the color parameter association relationship corresponding to the picture identifier is stored based on the picture identifier. And for each picture to be adjusted, acquiring a color parameter association relationship corresponding to the picture identification according to the picture identification of the picture to be adjusted as a target color parameter association relationship of the picture to be adjusted. Storing the corresponding color parameter association relationship based on the picture identification can enable the color parameter association relationship to be refined to each picture, so that color adjustment based on the target color association relationship of each picture to be adjusted is more suitable for each picture.
Alternatively, the picture identification and color parameter association relationship may be stored in the form of a key-value pair. And taking the picture identifier as k, and storing the color parameter association relation as value. The color parameter association relationship may be a correspondence between the theme color identifier and the picture color parameter.
S130, aiming at each picture to be adjusted, adjusting the color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture.
In this embodiment, by using the programmable characteristic of the SVG picture, the color replacement operator of the picture to be adjusted is adjusted based on the target picture color parameter, the color replacement operator of the picture to be adjusted is adjusted to a value corresponding to the target picture color parameter, and the adjusted picture is obtained and used as the target adjustment page picture.
Optionally, the adjusting the color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture includes: and determining the index of the picture to be adjusted, and adjusting the color replacement operator in the uniform resource locator of the picture to be adjusted to the color parameter of the target picture based on the index to obtain the target adjustment page picture. Exemplarily, the color replacement operator may be @ number (number > = 0) @, when the color of the picture is adjusted, the variable color set of the picture to be adjusted is traversed through the traverser, the current index number is obtained, the color replacement operator in the URL of the picture to be adjusted is replaced by the corresponding color in the variable color set according to the index number, and after the traversal is finished, all the color replacement operators in the URL of the picture to be adjusted are replaced by the numerical value corresponding to the color parameter of the target picture, so that the target adjustment page picture is obtained.
On the basis of the scheme, the method further comprises the following steps: the method comprises the steps of obtaining a color adjusting picture in a front-end page, and setting a variable color parameter in the color adjusting picture as a color replacing operator. In order to be able to be adjusted in a programmed manner during the picture color adjustment. In this embodiment, all variable colors in the front page are replaced with color replacement operators, so that color adjustment is implemented based on the color replacement operators. And the uniform automatic adjustment of the variable color is realized through the setting of the color replacement operator.
And S140, generating a target front-end page based on the target adjustment page picture, and displaying the target front-end page.
And executing the operation aiming at each picture to be adjusted to obtain a target adjustment page picture corresponding to each picture to be adjusted, replacing all the pictures to be adjusted in the front end page with the target front end page corresponding to the picture to be adjusted in each front end page, and taking the replaced front end page as the target front end page. Optionally, base64 code may be generated for presentation based on the replaced page. Base64 is a method for representing any binary system by 64 characters, and can directly display pictures in img picture tags of a webpage by using HTML (hypertext markup language).
It should be noted that the front-end page color adjusting method provided in the embodiment of the present invention may be implemented based on front-end framework programming, for example, may be implemented based on real, vue, regular, svelte, and other frameworks, which is not limited herein. Preferably, the framework Vue is adopted for implementation, vue is designed to be applied layer by layer from bottom to top, and a core library only concerns the view layer, so that the framework is not only easy to master, but also convenient to integrate with a third party library or an existing project, and is one of the most commonly used frameworks for front-end development at present.
According to the embodiment of the invention, when the front-end theme is detected to be changed, the theme color identification of the target change theme is acquired; acquiring a picture to be adjusted in an original front-end page, and determining a target picture color parameter of the picture to be adjusted according to the theme color identifier; for each picture to be adjusted, adjusting a color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture; and generating a target front-end page based on the target adjustment page picture, displaying the target front-end page, and performing self-adaptive unified adjustment on the colors of the pictures in the pages when theme change is detected without developing color editing on each page, thereby avoiding code redundancy, simplifying the color adjustment development difficulty of the front-end page, and improving the development efficiency.
On the basis of the scheme, the method further comprises the following steps: responding to the detected color parameter editing instruction, and acquiring color parameter editing information associated with the color parameter editing instruction; determining the color parameter association relation to be edited associated with the color parameter editing information; and adjusting the association relationship of the color parameters to be edited based on the color parameter editing information to obtain the edited association relationship of the color parameters. Optionally, all adjustable pictures are maintained in a unified manner by editing the color parameter association relationship, and when a picture is added, modified or deleted or a theme color is added, only the color parameter association relationship needs to be adjusted without changing other files. The modification of the color adjustment can be realized only by adjusting the incidence relation table, and the complexity of the color modification and adjustment is simplified.
Example two
Fig. 2 is a schematic flowchart of a front-end page color adjusting method according to a second embodiment of the present invention. Based on the above solution, the present embodiment provides a preferred embodiment by taking the implementation of color adjustment of SVG pictures in front pages based on the Vue frame as an example.
The embodiment of the invention provides a method and a device for automatically modifying colors of multi-color SVG (scalable vector graphics) in a theme change scene based on a Vue front-end frame, wherein the device centrally and uniformly maintains all multi-color SVG pictures and processes all adaptation logics through a plurality of unit modules such as a packaging component establishing unit, a parameter definition analyzing unit, a theme color adaptation unit, a color replacement unit and the like, a user can realize the theme display of the multi-color SVG on a front-end page only by providing necessary parameters without relation to code details, and the working efficiency is greatly improved. The structure and the flow of the device for automatically modifying the color of the multicolor SVG under the theme change scene by the Vue front-end frame are schematically shown in FIG. 2.
Referring to fig. 2, the apparatus provided in this embodiment includes:
1. component building unit
Components are an important concept in Vue, being an abstraction that allows large applications to be built using small, stand-alone, and often reusable components. In theory any type of application interface can be abstracted as a component tree. For example, a user entry interface, a button, a time selector, and a text entry box can be understood as a component, and a plurality of components together form an entry page.
The component establishing unit is mainly responsible for establishing the multicolor SVG component based on a Vue framework so as to encapsulate a data maintenance unit, a parameter definition analysis unit, a theme color adaptation unit, a color replacement unit and a display and interaction unit.
2. Data maintenance unit
The data maintenance unit provides data sources for the parameter definition analysis unit and the color replacement unit, is mainly responsible for maintaining all multi-color SVG pictures, stores all multi-color SVG picture URLs and multi-color SVG names, themes and variable color set corresponding relations in a key-value key value pair mapping table mode, and a user can obtain the URLs of the SVG and variable color sets under different themes only by providing the multi-color SVG names. And when the multi-color SVG and the theme color are required to be added, modified and deleted, only the data of the mapping table needs to be updated and maintained.
3. Theme color adaptation unit
The theme color adaptation unit dynamically monitors the change of the theme color of the current system by means of a Vue frame global state manager, provides a theme color operator, and can trigger the function operation of a subsequent unit module by means of the unit when the theme color changes.
4. Parameter definition parsing unit
The parameter definition analysis unit is responsible for defining control parameters and analyzing the control parameters transmitted by the user, and the URL link and the variable color set of the SVG picture required to be obtained by the user are obtained by combining the data provided by the data maintenance unit and the theme color operator provided by the theme color adaptation unit, so that the color replacement unit can replace the color.
5. Color replacement unit
And the color replacing unit dynamically replaces all colors in the multicolor SVG according to the SVG picture URL link and the variable color set provided by the parameter definition analyzing unit by defining a color replacing operator.
1) Defining a color replacement operator: @ number (number > = 0) @, number being a number greater than or equal to 0. In the data maintenance unit, all variable colors in the multicolor SVG are replaced by a color replacement operator in advance;
2) Traversing a target SVG variable color set through a traversing device to obtain a current index number;
3) Replacing a color replacement operator in the SVG picture URL with a corresponding color in the variable color set according to the index number;
4) After traversing is finished, all color replacing operators in the target SVG picture URL are replaced by target colors;
5) And generating Base64 codes for the display and the interactive unit to display.
6. Presentation and interaction unit
The color-changing SVG picture display device is used for processing and displaying the multicolor SVG pictures with the replaced colors.
7. Component global registration unit
The component global registration unit registers the multicolor SVG component as a global component based on the Vue framework, and when used by other front-end developers, the multicolor SVG component can be directly used without registration references.
The embodiment of the invention maintains the multicolor SVG in a centralized and unified way, and has low maintenance cost and high expandability; all multicolor SVG vector diagrams are maintained in a structured mode, when SVG is newly added, modified and deleted or theme colors are added, only codes of the device need to be operated, other files do not need to be changed, and development efficiency and cooperation efficiency are greatly improved; through the global registration unit of the device, a front-end developer can directly use the device without being quoted, can display the multicolor SVG pictures only by transmitting necessary parameters, and can change colors along with the switching of theme colors, thereby avoiding code redundancy and improving usability; the theme color adaptation unit of the device dynamically monitors the theme color change of the system, and when the theme color change occurs, the flow of the parameter definition analysis unit and the color replacement unit is automatically triggered, so that the automatic adaptation of the multicolor SVG picture is realized.
EXAMPLE III
Fig. 3 is a schematic structural diagram of a front-end page color adjustment apparatus according to a third embodiment of the present invention. The front-end page color adjusting device can be implemented in software and/or hardware, for example, the front-end page color adjusting device can be configured in a computer device. As shown in fig. 3, the apparatus includes a theme color identification module 310, a picture color parameter module 320, a picture color adjustment module 330, and a front-end page generation module 340, wherein:
the theme color identification module 310 is configured to obtain a theme color identification of a target replacement theme when a front-end theme is detected to be replaced;
the image color parameter module 320 is configured to obtain an image to be adjusted in an original front-end page, and determine a target image color parameter of the image to be adjusted according to the theme color identifier;
the picture color adjusting module 330 is configured to adjust, for each picture to be adjusted, a color replacement operator of the picture to be adjusted based on the target picture color parameter, so as to obtain a target adjustment page picture;
the front-end page generating module 340 is configured to generate a target front-end page based on the target adjustment page picture, and display the target front-end page.
According to the embodiment of the invention, when the front-end theme is detected to be changed, the theme color identification of the target change theme is acquired; acquiring a picture to be adjusted in an original front-end page, and determining a target picture color parameter of the picture to be adjusted according to the theme color identifier; for each picture to be adjusted, adjusting a color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture; and generating a target front-end page based on the target adjustment page picture, displaying the target front-end page, and adaptively and uniformly adjusting the color of the picture in the page when the theme change is detected, so that the color adjustment development difficulty of the front-end page is simplified, and the development efficiency is improved.
Optionally, on the basis of the above scheme, the picture color parameter module 320 is specifically configured to:
and taking the picture in the scalable vector graphics format in each original front-end page as the picture to be adjusted.
Optionally, on the basis of the above scheme, the picture color parameter module 320 is specifically configured to:
and acquiring a target color parameter association relation corresponding to the picture to be adjusted, and taking the picture color parameter corresponding to the theme color identifier in the target color parameter association relation as the target picture color parameter.
Optionally, on the basis of the above scheme, the picture color parameter module 320 is specifically configured to:
and acquiring the association relation of the target color parameters according to the picture identification of the picture to be adjusted.
Optionally, on the basis of the above scheme, the picture color adjusting module 330 is specifically configured to:
and determining the index of the picture to be adjusted, and adjusting the color replacement operator in the uniform resource locator of the picture to be adjusted into the color parameter of the target picture based on the index to obtain the target adjustment page picture.
Optionally, on the basis of the above scheme, the apparatus further includes a color parameter editing module, configured to:
responding to the detected color parameter editing instruction, and acquiring color parameter editing information associated with the color parameter editing instruction;
determining the color parameter association relation to be edited associated with the color parameter editing information;
and adjusting the color parameter association relation to be edited based on the color parameter editing information to obtain the edited color parameter association relation.
Optionally, on the basis of the above scheme, the apparatus further includes a replacement operator setting module, configured to:
the method comprises the steps of obtaining a color adjusting picture in a front-end page, and setting a variable color parameter in the color adjusting picture as a color replacing operator.
The front-end page color adjusting device provided by the embodiment of the invention can execute the front-end page color adjusting method provided by any embodiment of the invention, and has corresponding functional modules and beneficial effects of the executing method.
Example four
Fig. 4 is a schematic structural diagram of a computer device according to a fourth embodiment of the present invention. FIG. 4 illustrates a block diagram of an exemplary computer device 412 suitable for use in implementing embodiments of the present invention. The computer device 412 shown in FIG. 4 is only one example and should not impose any limitations on the functionality or scope of use of embodiments of the present invention.
As shown in FIG. 4, computer device 412 is in the form of a general purpose computing device. Components of computer device 412 may include, but are not limited to: one or more processors 416, a system memory 428, and a bus 418 that couples the various system components (including the system memory 428 and the processors 416).
Bus 418 represents one or more of any of several types of bus structures, including a memory bus or memory controller, a peripheral bus, an accelerated graphics port, and processor 416, or a local bus using any of a variety of bus architectures. By way of example, such architectures include, but are not limited to, industry Standard Architecture (ISA) bus, micro-channel architecture (MAC) bus, enhanced ISA bus, video Electronics Standards Association (VESA) local bus, and Peripheral Component Interconnect (PCI) bus.
Computer device 412 typically includes a variety of computer system readable media. Such media can be any available media that is accessible by computer device 412 and includes both volatile and nonvolatile media, removable and non-removable media.
The system memory 428 may include computer system readable media in the form of volatile memory, such as Random Access Memory (RAM) 430 and/or cache memory 432. The computer device 412 may further include other removable/non-removable, volatile/nonvolatile computer system storage media. By way of example only, storage 434 may be used to read from and write to non-removable, nonvolatile magnetic media (not shown in FIG. 4, and commonly referred to as a "hard drive"). Although not shown in FIG. 4, a magnetic disk drive for reading from and writing to a removable, nonvolatile magnetic disk (e.g., a "floppy disk") and an optical disk drive for reading from or writing to a removable, nonvolatile optical disk (e.g., a CD-ROM, DVD-ROM, or other optical media) may be provided. In these cases, each drive may be connected to bus 418 by one or more data media interfaces. Memory 428 can include at least one program product having a set (e.g., at least one) of program modules that are configured to carry out the functions of embodiments of the invention.
A program/utility 440 having a set (at least one) of program modules 442 may be stored, for instance, in memory 428, such program modules 442 including, but not limited to, an operating system, one or more application programs, other program modules, and program data, each of which examples or some combination thereof may comprise an implementation of a network environment. Program modules 442 generally perform the functions and/or methodologies of embodiments of the present invention as described herein.
The computer device 412 may also communicate with one or more external devices 414 (e.g., keyboard, pointing device, display 424, etc.), with one or more devices that enable a user to interact with the computer device 412, and/or with any devices (e.g., network card, modem, etc.) that enable the computer device 412 to communicate with one or more other computing devices. Such communication may occur via input/output (I/O) interfaces 422. Also, computer device 412 may communicate with one or more networks (e.g., a Local Area Network (LAN), a Wide Area Network (WAN) and/or a public network, such as the Internet) through network adapter 420. As shown, network adapter 420 communicates with the other modules of computer device 412 over bus 418. It should be appreciated that although not shown in the figures, other hardware and/or software modules may be used in conjunction with the computer device 412, including but not limited to: microcode, device drivers, redundant processing units, external disk drive arrays, RAID systems, tape drives, and data backup storage systems, among others.
The processor 416 executes various functional applications and data processing by executing programs stored in the system memory 428, for example, implementing a front-end page color adjustment method provided by an embodiment of the present invention, the method including:
when the front-end theme is detected to be changed, acquiring a theme color identifier of a target change theme;
acquiring a picture to be adjusted in an original front-end page, and determining a target picture color parameter of the picture to be adjusted according to the theme color identifier;
for each picture to be adjusted, adjusting a color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture;
and generating a target front-end page based on the target adjustment page picture, and displaying the target front-end page.
Of course, those skilled in the art will understand that the processor may also implement the technical solution of the front-end page color adjusting method provided by any embodiment of the present invention.
EXAMPLE five
An embodiment of the present invention further provides a computer-readable storage medium, on which a computer program is stored, where the computer program is executed by a processor to implement the method for adjusting a front-end page color provided in an embodiment of the present invention, where the method includes:
when the front-end theme change is detected, acquiring a theme color identifier of a target change theme;
acquiring a picture to be adjusted in an original front-end page, and determining a target picture color parameter of the picture to be adjusted according to the theme color identifier;
for each picture to be adjusted, adjusting a color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture;
and generating a target front-end page based on the target adjustment page picture, and displaying the target front-end page.
Of course, the computer program stored on the computer-readable storage medium provided by the embodiments of the present invention is not limited to the above method operations, and may also perform operations related to the front-end page color adjusting method provided by any embodiments of the present invention.
Computer storage media for embodiments of the invention may employ any combination of one or more computer-readable media. The computer readable medium may be a computer readable signal medium or a computer readable storage medium. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the context of this document, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device.
A computer readable signal medium may include a propagated data signal with computer readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take any of a variety of forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device.
Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wireless, wireline, optical fiber cable, RF, etc., or any suitable combination of the foregoing.
Computer program code for carrying out operations for aspects of the present invention may be written in any combination of one or more programming languages, including an object oriented programming language such as Java, smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
It is to be noted that the foregoing is only illustrative of the preferred embodiments of the present invention and the technical principles employed. It will be understood by those skilled in the art that the present invention is not limited to the particular embodiments illustrated herein, but is capable of various obvious changes, rearrangements and substitutions as will now become apparent to those skilled in the art without departing from the scope of the invention. Therefore, although the present invention has been described in some detail by the above embodiments, the invention is not limited to the above embodiments, and may include other equivalent embodiments without departing from the spirit of the invention, and the scope of the invention is determined by the scope of the appended claims.

Claims (10)

1. A front end page color adjustment method, comprising:
when the front-end theme change is detected, acquiring a theme color identifier of a target change theme;
acquiring a picture to be adjusted in an original front-end page, and determining a target picture color parameter of the picture to be adjusted according to the theme color identifier;
for each picture to be adjusted, adjusting a color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjustment page picture;
and generating a target front-end page based on the target adjustment page picture, and displaying the target front-end page.
2. The method according to claim 1, wherein the obtaining the picture to be adjusted in each original front-end page comprises:
and taking the picture in the scalable vector graphics format in each original front-end page as the picture to be adjusted.
3. The method according to claim 1, wherein the determining the target picture color parameter of the picture to be adjusted according to the theme color identifier comprises:
and acquiring a target color parameter association relation corresponding to the picture to be adjusted, and taking the picture color parameter corresponding to the theme color identifier in the target color parameter association relation as the target picture color parameter.
4. The method according to claim 3, wherein the obtaining of the target color parameter association relationship corresponding to the picture to be adjusted comprises:
and acquiring the association relation of the target color parameters according to the picture identification of the picture to be adjusted.
5. The method according to claim 1, wherein the adjusting the color replacement operator of the picture to be adjusted based on the target picture color parameter to obtain a target adjusted page picture comprises:
and determining the index of the picture to be adjusted, and adjusting the color replacement operator in the uniform resource locator of the picture to be adjusted to the color parameter of the target picture based on the index to obtain the target adjustment page picture.
6. The method of claim 3, further comprising:
responding to the detected color parameter editing instruction, and acquiring color parameter editing information associated with the color parameter editing instruction;
determining the color parameter association relation to be edited associated with the color parameter editing information;
and adjusting the color parameter association relation to be edited based on the color parameter editing information to obtain the edited color parameter association relation.
7. The method of claim 1, further comprising:
the method comprises the steps of obtaining a color adjusting picture in a front-end page, and setting a variable color parameter in the color adjusting picture as a color replacing operator.
8. A front-end page color adjustment apparatus, comprising:
the theme color identification module is used for acquiring the theme color identification of the target replacement theme when the front-end theme is detected to be replaced;
the image color parameter module is used for acquiring an image to be adjusted in an original front-end page and determining a target image color parameter of the image to be adjusted according to the theme color identifier;
the picture color adjusting module is used for adjusting the color replacement operator of the picture to be adjusted based on the target picture color parameter aiming at each picture to be adjusted to obtain a target adjustment page picture;
and the front-end page generating module is used for generating a target front-end page based on the target adjustment page picture and displaying the target front-end page.
9. An electronic device, characterized in that the device comprises:
one or more processors;
storage means for storing one or more programs;
a display for displaying an image;
the one or more programs, when executed by the one or more processors, cause the one or more processors to implement the front end page color adjustment method of any of claims 1-7.
10. A computer-readable storage medium, on which a computer program is stored, which program, when being executed by a processor, is adapted to carry out the front-end page color adjustment method according to any one of claims 1 to 7.
CN202211294621.6A 2022-10-21 2022-10-21 Front-end page color adjusting method, device, system and medium Pending CN115587272A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202211294621.6A CN115587272A (en) 2022-10-21 2022-10-21 Front-end page color adjusting method, device, system and medium

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202211294621.6A CN115587272A (en) 2022-10-21 2022-10-21 Front-end page color adjusting method, device, system and medium

Publications (1)

Publication Number Publication Date
CN115587272A true CN115587272A (en) 2023-01-10

Family

ID=84780116

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202211294621.6A Pending CN115587272A (en) 2022-10-21 2022-10-21 Front-end page color adjusting method, device, system and medium

Country Status (1)

Country Link
CN (1) CN115587272A (en)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116048516A (en) * 2023-03-29 2023-05-02 苏州瑞云智服信息科技有限公司 Theme color variable using method based on Vue frame

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN116048516A (en) * 2023-03-29 2023-05-02 苏州瑞云智服信息科技有限公司 Theme color variable using method based on Vue frame
CN116048516B (en) * 2023-03-29 2023-06-02 苏州瑞云智服信息科技有限公司 Theme color variable using method based on Vue frame

Similar Documents

Publication Publication Date Title
US9910651B2 (en) System for developing, testing, deploying, and managing applications in real-time
US20140026057A1 (en) Providing access to a remote application via a web client
US10521243B2 (en) Pre/post deployment customization
US9122763B2 (en) Consistent web application presentation
CN110633436B (en) Visual and user-defined panoramic editing method, system, storage medium and equipment
CN112860247B (en) Custom generation method, device, equipment and medium of model component
US20200356469A1 (en) Test automation systems and methods using logical identifiers
JP2023537767A (en) Image processing method and apparatus, and computer-readable storage medium
WO2023082654A1 (en) Method, apparatus and device for generating service interaction diagram, and storage medium
CN115587272A (en) Front-end page color adjusting method, device, system and medium
CN108121449A (en) The newer virtual interactive interface management system based on motion sensing control of editable
CN114706584A (en) Data visualization display manufacturing system
KR101552914B1 (en) Web server application framework web application processing method using the framework and computer readable medium processing the method
CN117093386B (en) Page screenshot method, device, computer equipment and storage medium
US8397154B2 (en) Remotely controlling a browser program
CN114756228A (en) Page processing method, device, equipment and storage medium
JP5393242B2 (en) Data providing method and intermediate server device
CN113590564B (en) Data storage method, device, electronic equipment and storage medium
CN114860205A (en) Application extension system, method and device of low-code development platform
CN114327709A (en) Control page generation method and device, intelligent device and storage medium
KR101728786B1 (en) Component-based dynamic image display system and method using the svg file format
CN117251231B (en) Animation resource processing method, device and system and electronic equipment
CN111694723B (en) Method for editing nodes and components when product runs under H5 and storage medium
CN113806596B (en) Operation data management method and related device
CN113918194A (en) Page component display method and device, electronic equipment and storage medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination