CN111930462A

CN111930462A - PC (personal computer) end full page graying method and device

Info

Publication number: CN111930462A
Application number: CN202010811651.4A
Authority: CN
Inventors: 邓洪文; 镇超; 卞小香; 吴多
Original assignee: Industrial and Commercial Bank of China Ltd ICBC
Current assignee: Industrial and Commercial Bank of China Ltd ICBC
Priority date: 2020-08-13
Filing date: 2020-08-13
Publication date: 2020-11-13

Abstract

The invention provides a PC end full page graying method and a device, wherein the method comprises the following steps: acquiring graying switch parameters from an application database or a configuration file; judging whether the graying switch parameters meet preset conditions or not; if yes, judging the type of the page to be loaded; if the page to be loaded is the H5 page, graying the page to be loaded according to the browser type; if the page to be loaded is a common PC-side page, graying the page to be loaded by utilizing a Dom node attribute setting technology and a canvas technology, realizing full graying of the page, not affecting the performance of the system and preventing errors in graying of the system.

Description

PC (personal computer) end full page graying method and device

Technical Field

The invention relates to the technical field of artificial intelligence, in particular to a method and a device for graying a full page of a PC (personal computer) terminal.

Background

On some special days, the deceased people are burdened in a network mode by large PC end websites in China, and the gray scale display effect of the websites needs to be realized. At present, most of websites are relatively original in implementation modes, and no unified and efficient implementation method exists, for example, most of websites such as Taobao and Jingdong adopt the gray level of a home page and the gray level of an image to realize graying, most of websites of banks adopt business personnel to manually maintain and replace the home page image to be the gray level image to realize graying, and the problems of large maintenance workload, incapability of supporting full replacement of all functional pages of the website and the like exist.

Disclosure of Invention

The invention provides a method and a device for graying a full page at a PC (personal computer) end, electronic equipment and a computer-readable storage medium, which can at least partially solve the problems in the prior art.

In order to achieve the purpose, the invention adopts the following technical scheme:

a PC end full page graying method comprises the following steps:

acquiring graying switch parameters from an application database or a configuration file;

judging whether the graying switch parameters meet preset conditions or not;

if yes, judging the type of the page to be loaded;

if the page to be loaded is the H5 page, graying the page to be loaded according to the browser type;

if the page to be loaded is a common page at the PC end, graying the page to be loaded by utilizing a Dom node attribute setting technology and a canvas technology.

Further, graying the page to be loaded according to the browser type includes:

judging whether the browser supports a filter or not;

if so, graying the page by setting the cs filter of the top-level dom element of the page.

Further, graying the page by setting the cs filter of the top-level dom element of the page includes:

acquiring a top-level dom element of the page to be loaded;

and setting the cs filter attribute of the top-layer dom element as a preset gray level conversion parameter in a CSS filter mode.

Further, graying the page to be loaded according to the browser type further includes:

if the browser does not support the filter, graying the page to be loaded by using a Dom node attribute setting technology and a canvas technology.

Further, graying the page to be loaded by using the Dom node attribute setting technology and the canvas technology includes:

globally and recursively traversing to find out the css style Dom node of the color related to the page to be loaded, and reassigning the gray value parameter to the style attribute of the css style Dom node;

and finding out the picture of the page to be loaded, which relates to the color, through global recursive traversal, and re-rendering the picture by utilizing a canvas technology.

Further, the drawing and rendering the picture by using the canvas technology comprises:

configuring a painting brush in the canvas by setting the color saturation of a color filter;

and calling the configured canvas to re-render the picture.

In a second aspect, a PC-side full page graying apparatus is provided, which includes:

the graying switch parameter acquisition module is used for acquiring graying switch parameters from an application database or a configuration file;

the graying judgment module is used for judging whether the graying switch parameters meet preset conditions or not;

the page type judging module is used for judging the type of the page to be loaded if the graying switch parameters meet preset conditions;

the H5 page graying module is used for graying the page to be loaded according to the browser type if the page to be loaded is the H5 page;

and if the page to be loaded is the common page of the PC end, graying the page to be loaded by utilizing a Dom node attribute setting technology and a canvas technology.

Further, the H5 page graying module includes:

the browser type judging unit is used for judging whether the browser supports the filter or not;

and the dom element attribute setting unit is used for graying the page by setting the cs filter of the top-layer dom element of the page.

In a third aspect, an electronic device is provided, which includes a memory, a processor, and a computer program stored in the memory and executable on the processor, and when the processor executes the computer program, the processor implements the steps of the PC-side full page graying method.

In a fourth aspect, a computer-readable storage medium is provided, on which a computer program is stored, which, when being executed by a processor, implements the steps of the above-mentioned PC-side full-page graying method.

It should be noted that the PC-side full page graying method provided by the present invention may be used in the financial field, and may also be used in any field other than the financial field, such as a bank website, a shopping website, an enterprise website, a government affairs website, etc., and the application field is not limited in the embodiments of the present invention.

In order to make the aforementioned and other objects, features and advantages of the invention comprehensible, preferred embodiments accompanied with figures are described in detail below.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings needed to be used in the description of the embodiments or the prior art will be briefly introduced below, and it is obvious that the drawings in the following description are some embodiments of the present application, and it is obvious for those skilled in the art to obtain other drawings based on these drawings without creative efforts. In the drawings:

FIG. 1 is a first flowchart illustrating a method for graying a full page at a PC side according to an embodiment of the present invention;

fig. 2A shows the specific steps of step S400;

FIG. 2B illustrates the H5 page graying effect;

FIG. 2C shows the PC side ordinary page graying effect;

FIG. 3 shows the detailed steps of step S420 in FIG. 2A;

FIG. 4 shows specific steps of graying a page to be loaded by using a Dom node attribute setting technique and a canvas technique;

fig. 5 shows the specific steps of step S2 in fig. 4;

FIG. 6 is a flow chart illustrating an exemplary method for PC-side full page graying in an embodiment of the present invention;

FIG. 7 illustrates a process flow for graying an H5 page in an embodiment of the present invention;

FIG. 8 shows a process of graying a common page on the PC side according to an embodiment of the present invention;

FIG. 9 is a block diagram of a PC-side full page graying apparatus according to an embodiment of the present invention;

FIG. 10 shows a specific structure of the H5 page graying module;

fig. 11 is a block diagram of an electronic device according to an embodiment of the invention.

Detailed Description

In order to make the technical solutions better understood by those skilled in the art, the technical solutions in the embodiments of the present application will be clearly and completely described below with reference to the drawings in the embodiments of the present application, and it is obvious that the described embodiments are only partial embodiments of the present application, but not all embodiments. All other embodiments, which can be derived by a person skilled in the art from the embodiments given herein without making any creative effort, shall fall within the protection scope of the present application.

As will be appreciated by one skilled in the art, embodiments of the present invention may be provided as a method, system, or computer program product. Accordingly, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present invention may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

It should be noted that the terms "comprises" and "comprising," and any variations thereof, in the description and claims of this application and the above-described drawings, are intended to cover a non-exclusive inclusion, such that a process, method, system, article, or apparatus that comprises a list of steps or elements is not necessarily limited to those steps or elements expressly listed, but may include other steps or elements not expressly listed or inherent to such process, method, article, or apparatus.

It should be noted that the embodiments and features of the embodiments in the present application may be combined with each other without conflict. The present application will be described in detail below with reference to the embodiments with reference to the attached drawings.

The graying process is a process of converting a color image into a grayscale image. The color image is divided into three components of R, G and B, which respectively display various colors such as red, green and blue, and the graying is the process of making the components of R, G and B of the color image equal. The pixels with large gray values are brighter (the maximum pixel color value is 255, which is white), and conversely, darker (the minimum pixel color value is 0, which is black).

The principle of decolorizing gray images: when the three-color channels of the color RGB have the same value, i.e., R ═ G ═ B, the image is displayed in gray, and meanwhile, in order to ensure the brightness of the image, it is necessary to ensure that the result of R + G + B in the same channel is close to 1.

The invention provides a PC end full page graying method, which can realize the graying display of the whole PC end full page through a simple parameter or switch setting.

FIG. 1 is a flowchart illustrating a method for graying a full page at a PC side according to an embodiment of the present invention; as shown in fig. 1, the method may include the following:

step S100: acquiring graying switch parameters from an application database or a configuration file;

specifically, when a user logs in a website, the system automatically acquires the graying switch parameters from an application database or a configuration file so as to judge whether to perform graying processing on the page.

Step S200: judging whether the graying switch parameters meet preset conditions or not;

if yes, go to step S300; otherwise, the flow ends.

For example, if the graying switch parameter flag is yes, the system automatically enters a graying processing flow to perform overall graying processing on the page, and if the graying switch parameter flag is no, the graying flow is ended, the graying flow is kept to be opened as it is, and graying processing is not performed.

Step S300: and judging the type of the page to be loaded.

If the page to be loaded is the H5 page, executing step S400; if the page to be loaded is a common page of the PC terminal, executing the step S500.

Those skilled in the art can understand that, based on different technical architectures, the types of web pages developed are not unique, and the PC side pages include: two types of PC end common pages and H5 pages; and during graying, carrying out full graying on all pages to be loaded, and relating to a PC (personal computer) end technology stack (H5, JS, CSS, HTML) and the like. And all the pages of the PC end page after passing through the gray level processing system are displayed in a gray level mode comprehensively, so that the desired gray level effect is achieved.

The graying processing includes: the method comprises the steps of carrying out ordinary page graying processing and H5 page graying on a PC terminal, and respectively calling corresponding processing flows to carry out graying processing automatically according to page types, so that various grayed pages are displayed in real time. The effect of H5 after page graying is shown in fig. 2B, and the effect of PC-side ordinary page graying is shown in fig. 2C.

Step S400: and graying the page to be loaded according to the type of the browser.

Aiming at different types of browsers, due to different technical architectures, corresponding graying technologies are required to be adopted for processing.

Step S500: graying the page to be loaded by utilizing a Dom node attribute setting technology and a canvas technology.

By setting the graying switch parameters, graying is respectively carried out on different types of pages, full graying of the pages is realized, the system performance is not influenced, and errors are prevented when the system is grayed.

In an alternative embodiment, when the gray-scale control parameter satisfies the preset condition and the page to be loaded is the H5 page, the H5 page gray-scale common handler is called, specifically, referring to fig. 2A, this step S400 may include the following steps:

step S410: judging whether the browser supports a filter or not;

if yes, go to step S420; if not, go to step S430.

Specifically, the current browser type is obtained first, and whether the browser supports the filter is judged according to the browser type.

For example, IE10 and IE11 do not support a filter, and cannot directly achieve the effect of graying by setting the cs attribute; chrome, Safari, IE6 through IE9, etc. support the filter.

Step S420: graying the page by setting the cs filter of the top-layer dom element of the page.

Step S430: graying the page to be loaded by utilizing a Dom node attribute setting technology and a canvas technology.

By adopting the technical scheme, the page can be displayed in a gray scale mode under various different browser conditions.

In an alternative embodiment, referring to fig. 3, this step S420 may include the following:

step S421: acquiring a top-level dom element of the page to be loaded;

specifically, the cs filter attribute of the top-level dom element of the whole page is obtained.

Step S422: and setting the cs filter attribute of the top-layer dom element as a preset gray level conversion parameter in a CSS filter mode.

Specifically, the filter attribute of the top-level dom element cs filter is set to grayscale (100%), and when the value of the grayscale is set to 100%, the whole page is represented to be grayed out.

It is worth noting that the filter attribute applies a graphical effect such as blurring or color shifting to the element. Typically for adjusting the rendering of images, backgrounds and borders. The CSS standard contains some functions that have achieved a predefined effect. Wherein, the function of gradycale (amount) is to perform gray level conversion on the picture, and amount is the size of the conversion value, and may be number or percentage. When the value is 100%, the gradation is maximum. 0% is not different from the original. Values between 0% and 100% will cause the grey scale to change linearly. When an amuunt is empty, a 0 is automatically inserted.

In an alternative embodiment, referring to fig. 4, graying the page to be loaded by using the Dom node attribute setting technique and the canvas technique in step S430 and step S500 may include the following steps:

step S1: globally and recursively traversing to find out the css style Dom node of the color related to the page to be loaded, and reassigning the gray value parameter to the style attribute of the css style Dom node;

specifically, after page loading is completed, a Dom node related to a color is found out through global recursive traversal, and for a cs style, a gray value parameter is assigned to the style attribute of the Dom node again; the layout under this node will be grayed out.

Step S2: and finding out the picture of the page to be loaded, which relates to the color, through global recursive traversal, and re-rendering the picture by utilizing a canvas technology.

Specifically, after the page is loaded, the picture nodes related to the colors are found out through global recursive traversal, for the picture and the background picture, the grayed picture is redrawn after the grayed value of the picture is calculated through the Canvas API, and the grayed picture is assigned to the corresponding image img or background picture background-image to achieve the graying effect. All the nodes of the picture and the background picture are displayed in a gray scale.

It is worth to be noted that after the picture node is found, the picture is included under the picture node, and after the picture is grayed, the picture data is inserted back under the picture node. In addition, the background image is also a picture.

In an alternative embodiment, referring to fig. 5, this step S2 may include the following:

step S2 a: configuring a painting brush in the canvas by setting the color saturation of a color filter;

firstly, a system painting brush Paint object is created, wherein the painting brush can be used for calling an android system drawing API, and the system can be rendered.

Then, a color filter colormatrix x color filter object is created, a parameter value of color saturation of the color filter is set to 0, and when the saturation is 0, graying of a display image can be realized.

And then, according to the set saturation of the color filter, the brush transmits the color filter with the set parameter value into the brush through a bottom layer API of the system, and the brush can be used for gray level drawing.

And finally, creating a system Canvas, rewriting draw and dispatchDraw of the system Canvas, and calling the set painting brush Paint through the Canvas to realize redrawing and rendering of the picture layout.

Step S2 b: and calling the configured canvas to re-render the picture.

Specifically, a custom layout GrayFrameLayout class (a gray frame level) is created, a custom layout method is adopted to replace a system Activity root layout mode, the created canvas is called, and the page layout picture is drawn and rendered again, so that the page is displayed in a gray mode according to the setting of a new canvas, and the gray effect is achieved.

In order to make those skilled in the art better understand the present invention, the following examples illustrate the PC-side full page graying method provided in the embodiments of the present invention:

referring to fig. 6, the PC-side full page graying method includes:

step S101: logging in a website, and automatically reading a gray switch mark from a background;

step S102: whether graying is performed or not;

if yes, go to step S103: if not, ending.

Step S103: carrying out intelligent gray processing on the PC terminal;

step S104: and displaying all pages and pictures of the website in a gray scale manner.

Referring to fig. 7, the graying of the H5 page includes:

step D101: entering application of public gray processing;

step D102: whether the browser is IE10, IE 11;

if yes, go to step D103: if not, go to step D105.

Step D103: traversing color dom nodes and setting a pattern gray attribute;

step D104: traversing the picture nodes, and calculating the gray value to assign again;

step D105: acquiring the cs filter attribute of the top-layer dom element;

step D106: setting cs filter attribute graying;

step D107: all H5 pages were displayed grayed out.

Referring to fig. 8, when graying the PC-side normal page, the method includes:

step D201: entering application of public gray processing;

step D202: traversing color dom nodes and setting a pattern gray attribute;

step D203: traversing the picture nodes, and calculating the gray value to assign again;

step D204: all ordinary pages are displayed grayed.

Based on the same inventive concept, the embodiment of the present application further provides a PC-side full page graying apparatus, which can be used to implement the method described in the above embodiments, as described in the following embodiments. Because the principle of the PC-side full page graying device for solving the problem is similar to the method, the implementation of the PC-side full page graying device can refer to the implementation of the method, and repeated details are not repeated. As used hereinafter, the term "unit" or "module" may be a combination of software and/or hardware that implements a predetermined function. Although the means described in the embodiments below are preferably implemented in software, an implementation in hardware, or a combination of software and hardware is also possible and contemplated.

Fig. 9 is a block diagram of a PC-side full page graying apparatus according to an embodiment of the present invention. As shown in fig. 9, the PC-side full page graying apparatus specifically includes: the system comprises a graying switch parameter acquisition module 10, a graying judgment module 20, a page type judgment module 30, an H5 page graying module 40 and a PC-side ordinary page graying module 50.

The graying switch parameter acquisition module 10 acquires graying switch parameters from an application database or a configuration file;

the graying judgment module 20 judges whether the graying switch parameters meet preset conditions;

the page type judging module 30 judges the type of the page to be loaded if the graying switch parameter meets the preset condition;

if the page to be loaded is the H5 page, the H5 page graying module 40 grays the page to be loaded according to the browser type;

if the page to be loaded is the PC-side normal page, the PC-side normal page graying module 50 grays the page to be loaded by using the Dom node attribute setting technology and the canvas technology.

In an alternative embodiment, referring to fig. 10, the H5 page graying module includes: a browser type judging unit 41 and a dom element attribute setting unit 42.

The browser type determination unit 41 determines whether the browser supports the filter;

the dom element attribute setting unit 42 grays the page by setting the css filter of the top level dom element of the page.

The apparatuses, modules or units illustrated in the above embodiments may be implemented by a computer chip or an entity, or implemented by a product with certain functions. A typical implementation device is an electronic device, which may be, for example, a personal computer, a laptop computer, a cellular telephone, a camera phone, a smart phone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

In a typical example, the electronic device specifically includes a memory, a processor, and a computer program stored on the memory and executable on the processor, and the processor implements the steps of the PC-side full-page graying method when executing the program.

Referring now to FIG. 11, shown is a schematic diagram of an electronic device 600 suitable for use in implementing embodiments of the present application.

As shown in fig. 11, the electronic apparatus 600 includes a Central Processing Unit (CPU)601 that can perform various appropriate works and processes according to a program stored in a Read Only Memory (ROM)602 or a program loaded from a storage section 608 into a Random Access Memory (RAM)) 603. In the RAM603, various programs and data necessary for the operation of the system 600 are also stored. The CPU601, ROM602, and RAM603 are connected to each other via a bus 604. An input/output (I/O) interface 605 is also connected to bus 604.

The following components are connected to the I/O interface 605: an input portion 606 including a keyboard, a mouse, and the like; an output portion 607 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage section 608 including a hard disk and the like; and a communication section 609 including a network interface card such as a LAN card, a modem, or the like. The communication section 609 performs communication processing via a network such as the internet. The driver 610 is also connected to the I/O interface 605 as needed. A removable medium 611 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 610 as necessary, so that a computer program read out therefrom is mounted as necessary on the storage section 608.

In particular, according to an embodiment of the present invention, the processes described above with reference to the flowcharts may be implemented as computer software programs. For example, an embodiment of the present invention includes a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the above-described PC-side full-page graying method.

In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 609, and/or installed from the removable medium 611.

Computer-readable media, including both non-transitory and non-transitory, removable and non-removable media, may implement information storage by any method or technology. The information may be computer readable instructions, data structures, modules of a program, or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), Static Random Access Memory (SRAM), Dynamic Random Access Memory (DRAM), other types of Random Access Memory (RAM), Read Only Memory (ROM), Electrically Erasable Programmable Read Only Memory (EEPROM), flash memory or other memory technology, compact disc read only memory (CD-ROM), Digital Versatile Discs (DVD) or other optical storage, magnetic cassettes, magnetic tape magnetic disk storage or other magnetic storage devices, or any other non-transmission medium that can be used to store information that can be accessed by a computing device. As defined herein, a computer readable medium does not include a transitory computer readable medium such as a modulated data signal and a carrier wave.

For convenience of description, the above devices are described as being divided into various units by function, and are described separately. Of course, the functionality of the units may be implemented in one or more software and/or hardware when implementing the present application.

The present invention is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each flow and/or block of the flow diagrams and/or block diagrams, and combinations of flows and/or blocks in the flow diagrams and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be stored in a computer-readable memory that can direct a computer or other programmable data processing apparatus to function in a particular manner, such that the instructions stored in the computer-readable memory produce an article of manufacture including instruction means which implement the function specified in the flowchart flow or flows and/or block diagram block or blocks.

These computer program instructions may also be loaded onto a computer or other programmable data processing apparatus to cause a series of operational steps to be performed on the computer or other programmable apparatus to produce a computer implemented process such that the instructions which execute on the computer or other programmable apparatus provide steps for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or apparatus that comprises the element.

As will be appreciated by one skilled in the art, embodiments of the present application may be provided as a method, system, or computer program product. Accordingly, the present application may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present application may take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, and the like) having computer-usable program code embodied therein.

The application may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The application may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

The embodiments in the present specification are described in a progressive manner, and the same and similar parts among the embodiments are referred to each other, and each embodiment focuses on the differences from the other embodiments. In particular, for the system embodiment, since it is substantially similar to the method embodiment, the description is simple, and for the relevant points, reference may be made to the partial description of the method embodiment.

The above description is only an example of the present application and is not intended to limit the present application. Various modifications and changes may occur to those skilled in the art. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included in the scope of the claims of the present application.

Claims

1. A PC end full page graying method is characterized by comprising the following steps:

judging whether the graying switch parameters meet preset conditions or not;

if yes, judging the type of the page to be loaded;

2. The PC-side full page graying method according to claim 1, wherein graying the page to be loaded according to the browser type comprises:

judging whether the browser supports a filter or not;

3. The PC-side full page graying method according to claim 2, wherein graying the page by setting the cs filter of the top-level dom element of the page comprises:

acquiring a top-level dom element of the page to be loaded;

4. The PC-side full page graying method according to claim 2, wherein graying the page to be loaded according to the browser type further comprises:

5. The PC-side full page graying method according to claim 2 or 4, wherein graying the page to be loaded by using the Dom node attribute setting technology and the canvas technology comprises:

6. The PC-side full-page graying method according to claim 5, wherein the rendering of the picture by the canvas technology comprises:

and calling the configured canvas to re-render the picture.

7. A PC-side full page graying device is characterized by comprising:

8. The PC-side full page graying device according to claim 7, wherein said H5 page graying module comprises:

9. An electronic device comprising a memory, a processor and a computer program stored on the memory and executable on the processor, wherein the processor implements the steps of the PC-side full page graying method according to any one of claims 1 to 6 when executing the program.

10. A computer-readable storage medium, on which a computer program is stored, wherein the computer program, when executed by a processor, implements the steps of the PC-side full page graying method according to any one of claims 1 to 6.