Watermark dynamic rendering method, storage medium and computer equipment

Abstract

The invention discloses a watermark dynamic rendering method, a storage medium and computer equipment. The watermark dynamic rendering method comprises the following steps: generating a plurality of watermarks in a webpage; a mouse covering event responding to the watermark is triggered, and the watermark is hidden; the mouse removal event responding to the watermark is triggered, and the watermark is displayed again. Through the method, the webpage browsing experience of the user can be improved while the privacy of the webpage information is protected.

Description

Technical Field

[0001] The present application relates to the technical field of web pages, and in particular to a watermark dynamic rendering method, a storage medium and a computer device. Background Art

[0002] In existing web page technologies, web page watermarks are added to meet the needs of web page identification information, copyright protection, and security protection. Watermarks are usually set on the background of web pages, but watermark text or images that are too dense will affect the readability of the page. Watermark images or text are fixed after setting and cannot be adjusted according to different user interaction actions, which can easily cause fixed-position watermarks to cover key content and affect the user's browsing experience. Summary of the invention

[0003] The present application mainly provides a watermark dynamic rendering method, a storage medium and a computer device to solve the problem of poor user browsing experience caused by the obstruction of page watermarks.

[0004] To solve the above technical problems, a technical solution adopted in the present application is: to provide a watermark dynamic rendering method, comprising: generating multiple watermarks in a web page; in response to a mouse cover event of the watermark being triggered, hiding the watermark; in response to a mouse removal event of the watermark being triggered, redisplaying the watermark.

[0005] By monitoring the mouse interaction events on each watermark, the content of the watermark can be dynamically hidden or displayed, which not only protects the page information but also facilitates the user's reading, thereby improving the user's browsing experience.

[0006] In some embodiments, a mouse event listener is configured in the text node of each watermark, and the mouse event listener is used to listen to the mouse covering event and the mouse removing event.

[0007] In some embodiments, in response to the watermark's mouse cover event being triggered, hiding the watermark includes: in response to the watermark's mouse event listener listening to the mouse cover event, the compiler adds a hidden class to the watermark's text node to hide the watermark; in response to the watermark's mouse removal event being triggered, displaying the watermark includes: in response to the watermark's mouse event listener listening to the mouse removal event, the compiler removes the hidden class added in the watermark's text node to redisplay the watermark.

[0008] In some embodiments, the compiler is a JavaScript compiler, the hidden class belongs to a CSS class, and the text node belongs to an HTML format.

[0009] The mouse event listener is used to reflect the reading interest area of ​​the web page browser, and in response to the change of the mouse position, the hidden class is added or removed to achieve the hiding or display of the watermark. This simply realizes the dynamic rendering of the watermark on the web page, which is conducive to improving the customer's reading experience.

[0010] In some embodiments, generating a plurality of watermarks in a web page includes: generating a plurality of the watermarks in an array in the web page based on user information and web page information.

[0011] In some embodiments, the method of generating a plurality of watermarks in an array in the web page based on the user information and the web page information includes: based on the fact that the level of the rights in the user information is lower than a preset level, the compiler generates configuration properties of the watermark; the compiler generates a text node of the watermark based on the configuration properties of the watermark and adds it to the web page; based on the size of the text node and the size in the web page information, determining the number of rows and columns in which the watermark is distributed in the web page; and based on the number of rows and columns, generating a plurality of watermarks in an array in the web page.

[0012] Watermarks are dynamically generated through watermark configuration items, allowing watermark effects to be customized according to different design requirements.

[0013] In some embodiments, the compiler generates a text node of the watermark based on the configuration properties of the watermark and adds it to the web page, including: the compiler generates a text element of the watermark based on the configuration properties of the watermark; the compiler sets the text element of the watermark to ensure that the text element meets the requirements of the configuration properties; and rotates the set text element through the rotation property of the cascading style sheet to generate the text node of the watermark.

[0014] Adding watermarks to pages in the form of text nodes simplifies the graphic processing scheme of watermarks, making them easier to implement and maintain. Cascading style sheets are a widely used technology in modern Web development, making it easier to implement and maintain watermark generation programs, which helps reduce development and maintenance costs.

[0015] In some embodiments, the watermark configuration items include: tilt angle, watermark color, transparency, tilt angle, font size, font, horizontal distance, vertical distance and display level.

[0016] In order to solve the above technical problems, another technical solution adopted by the present application is: providing a storage medium on which program data is stored, and when the program data is executed by a processor, the steps of the watermark dynamic rendering method as described above are implemented.

[0017] The beneficial effects of the storage medium refer to the beneficial effects of the watermark dynamic rendering method mentioned above, which will not be repeated here.

[0018] The present application also provides a computer device, including a processor and a memory connected to each other, wherein the memory stores a computer program, and when the processor executes the computer program, the steps of the watermark dynamic rendering method as described above are implemented.

[0019] The beneficial effects of the computer device refer to the beneficial effects of the watermark dynamic rendering method mentioned above, which will not be repeated here.

[0020] The beneficial effects of the present application are as follows: Different from the prior art, the present application discloses a watermark dynamic rendering method, storage medium and computer device. By generating multiple watermarks in a web page, and responding to the watermark mouse cover event being triggered, the watermark is hidden, so that the user can browse the content of the area of ​​interest without obstacles, while maintaining the security of web page information in other areas. In response to the watermark mouse removal event being triggered, the watermark is redisplayed, and when the user finishes browsing the area and moves the mouse away, the watermark content will be redisplayed to protect the page information and avoid sensitive information leakage. The watermark dynamic rendering method provided by the present application not only protects the web page content, but also takes into account the user's interactive experience and visual comfort, greatly improving the user's browsing experience. BRIEF DESCRIPTION OF THE DRAWINGS

[0021] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings required for use in the embodiments or the prior art descriptions are briefly introduced below. Obviously, the drawings described below are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative work, among which:

[0022] Figure 1 It is a flow chart of an embodiment of a watermark dynamic rendering method provided by the present application;

[0023] Figure 2 Yes Figure 1 A schematic flow chart of an embodiment of step 100 in the method shown;

[0024] Figure 3 Yes Figure 2 A schematic diagram of a flow chart of an embodiment of step 120 in the method shown;

[0025] Figure 4 Yes Figure 1 A schematic flow chart of an embodiment of steps 200 and 300 in the method shown;

[0026] Figure 5 It is a structural schematic diagram of an embodiment of a storage medium provided by the present application;

[0027] Figure 6 It is a structural diagram of an embodiment of a computer device provided by the present application. DETAILED DESCRIPTION

[0028] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0029] The terms "first", "second", "third" in the embodiments of the present application are only used for descriptive purposes, and cannot be understood as indicating or implying relative importance or implicitly indicating the number of indicated technical features. Thus, the features defined as "first", "second", "third" can expressly or implicitly include at least one of the features. In the description of the present application, the meaning of "multiple" is at least two, such as two, three, etc., unless otherwise clearly and specifically defined. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device comprising a series of steps or units is not limited to the listed steps or units, but optionally also includes steps or units that are not listed, or optionally also includes other steps or units inherent to these processes, methods, products or devices.

[0030] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0031] See also Figure 1 , Figure 1 : is a flow chart of an embodiment of a watermark dynamic rendering method provided by the present application, and the watermark dynamic rendering method comprises:

[0032] Step 100: Generate multiple watermarks in the web page.

[0033] Generating multiple watermarks in a web page is a technology that embeds watermark information into the content of a web page, mainly used to protect the copyright of the web page and prevent illegal copying. Generating multiple watermarks in a web page is a technology involving HTML (HyperText MarkupLanguage Document) and Cascading Style Sheets (CSS). This method overlays semi-transparent text or images on the background or content of a web page to protect the content from being easily copied or tampered with, improve the aesthetics of the page, or mark copyright logos, etc.

[0034] The web page may be a whole web page or a specific page container.

[0035] See also Figure 2 Further, step 100 includes generating a plurality of watermarks in an array in a web page based on user information and web page information, and specifically includes:

[0036] Step 110: Based on the fact that the level of the rights in the user information is lower than the preset level, the compiler generates configuration attributes of the watermark.

[0037] Build a server with a database to store user information, including the user's authority level, in digital form, character form, or other comparable forms. When the user successfully logs in to the web page, the compiler will send a request to the server through AJAX (Asynchronous JavaScript and XML) requests or other methods to obtain relevant information about the user. After receiving the request, the server will process and return the corresponding data, which will be captured by the compiler and stored in variables; this information may include user name, user ID, authority level, etc.

[0038] One or more preset levels are set in the system to determine whether a user has sufficient rights to access certain content or functions. In the compiler or application code, write logic to determine whether the current user's right level is lower than the preset level, that is, retrieve the right level from the user information and compare it with the preset level.

[0039] If the user's rights level is lower than the preset level, then the watermark configuration attributes are generated according to the preset rules or configurations. These attributes may include the text, position, size, transparency, color, etc. of the watermark. The generated watermark configuration attributes are applied to the content or function that needs to be protected to ensure that the generation and application of the watermark will not leak sensitive web page information.

[0040] Specifically, the configuration attributes of the watermark include: tilt angle, watermark color, transparency, tilt angle, font size, font, horizontal distance, vertical distance and display level.

[0041] The compiler sets the appearance and behavior of the watermark based on preset or dynamically generated configuration items. These configuration items can include the watermark's color (such as red, blue), transparency (such as 0.5 for semi-transparent), tilt angle (such as 45 degrees), font size (such as 16), font type (such as Arial), horizontal distance (such as 100), vertical distance (such as 50), and display level (such as z-index: 10).

[0042] By modifying the configuration properties of the watermark, users can enter any text as the watermark content as needed. The watermark can be set to be displayed in data sets, report creation and preview, report viewing, PDF output, PNG image, Word document, etc., and the rotation angle of the watermark can be set to achieve different visual effects; the watermark size can also be adjusted as needed to adapt to different pages and files; the watermark transparency can be adjusted to better integrate with the page content to avoid affecting reading; the watermark can be displayed globally or on a specific cloud, application or document; users can create new watermarks, edit existing watermarks or delete watermarks that are no longer needed as needed.

[0043] Step 120: The compiler generates a text node of the watermark based on the configuration attributes of the watermark and adds it to the web page.

[0044] In this embodiment, the watermark is added as a DOM (Document Object Model) node, which includes a DOM element. For the configuration attributes of the DOM element, such as text, position, transparency, etc., a function can be written to generate the DOM element of the watermark based on these configuration attributes.

[0045] Based on the configuration properties of the watermark, a DOM node with corresponding parameters is generated, and the parameter information of the DOM node is ensured to conform to the configuration properties of the watermark such as font, font size, rotation angle, etc. Then the DOM node is added to the web page as a text node of the watermark to form a web page watermark.

[0046] Further, see Figure 3 , step 120 comprises:

[0047] Step 121: The compiler generates a text element of the watermark based on the configuration attributes of the watermark.

[0048] In Web development, it is sometimes necessary to embed a watermark in a web page to prevent the content from being used without authorization. Specifically, a watermark can be dynamically generated in a web page through a JavaScript compiler and DOM operations.

[0049] Step 122: The compiler creates a or The DOM element of the tag and set the style attributes of the element to meet the requirements of the configuration items, such as color, transparency, font size, font type, etc., to ensure that this DOM element meets the requirements of the configuration attributes.

[0050] Step 123: Rotate the set text element through the rotation attribute of the cascading style sheet to generate a text node of the watermark.

[0051] Get the rotation angle specified in the configuration properties, call the rotation property transform of the cascading style sheet to rotate the DOM element according to the rotation angle to achieve the tilt effect of the DOM element, and complete the rotation of the DOM element as the final text node of the watermark.

[0052] Specifically, the size of the text element before rotation and the size of the text element after rotation are respectively obtained to determine the size of the text node.

[0053] The size of a single watermark DOM node is calculated according to the width and height before and after rotation, that is, the width and height of a single watermark DOM node are used as the size of the text node to calculate the number of watermark rows and columns that the web page can accommodate.

[0054] Developers are allowed to set various properties of the watermark through the compiler, such as color, transparency, tilt angle, etc., so that the watermark effect can be customized according to different design needs and security requirements.

[0055] Step 130: Determine the number of rows and columns in which the watermark is distributed in the web page based on the size of the text node and the size in the web page information.

[0056] Get the width and height of the web page. Based on the width and height of the watermark, the horizontal spacing and vertical spacing, and the width and height of the container, calculate the number of rows n and columns m of the watermark that can be placed to determine the number of rows and columns in which the watermark is distributed on the web page.

[0057] Step 140: Generate multiple watermarks in an array in the web page based on the number of rows and columns.

[0058] A nested loop is used to generate n*m ​​watermark DOM nodes. According to the calculated number of rows and columns, each watermark node is added to the container at the specified position and spacing to form a watermark covering the entire web page.

[0059] By determining the watermark layout based on the size of the text node and the size in the web page information, the watermark rendering method of the present application is applicable to various web page layouts and sizes, whether it is a full-screen web page or a specific web page container, it can be adapted by adjusting the configuration items.

[0060] Step 200: In response to a watermark mouse cover event being triggered, the watermark is hidden.

[0061] When creating watermark DOM nodes, add a unique identifier such as a data attribute to them, or directly use an existing node reference. Add a mouse interaction mechanism to each watermark DOM node and dynamically hide the watermark based on the mouse state.

[0062] Specifically, a mouse event listener is configured in the text node of each watermark, and the mouse event listener is used to listen to mouse covering events and mouse removing events.

[0063] Further, see Figure 4 , step 200 further comprises:

[0064] Step 210: In response to the mouse event listener of the watermark listening to the mouse covering event, the compiler adds a hidden class to the text node of the watermark to hide the watermark.

[0065] When the mouse cover event listener of the DOM node detects that the mouse is at the position of the DOM node, a mouse cover event occurs. In response to the watermark mouse event listener detecting the mouse cover event, a CSS hidden class is called to add to the DOM node to hide the text content of the watermark.

[0066] When a user hovers over a specific watermark, only that watermark will be hidden without affecting the watermark display in other areas. This ensures that users can focus on the content area they are interested in while keeping other parts safe.

[0067] Step 300: In response to a watermark mouse removal event being triggered, the watermark is redisplayed.

[0068] Add a mouse interaction mechanism to each watermark DOM node to dynamically display the watermark according to the mouse state.

[0069] See also Figure 4 , step 300 further comprises:

[0070] Step 310: In response to the mouse event listener of the watermark listening to the mouse removal event, the compiler removes the hidden class added to the text node of the watermark to redisplay the watermark.

[0071] When the mouse removal event listener of the DOM node detects that the mouse leaves the position of the DOM node, a mouse removal event occurs. In response to the watermark mouse event listener detecting the mouse removal event, the CSS hidden class covering the DOM node is removed and the text content of the watermark is redisplayed.

[0072] By dynamically adjusting the visibility of the watermark during user operations, the risk of sensitive information leakage is effectively reduced. Even if users try to take screenshots or copy page content, the presence of the watermark will protect copyright and sensitive information to a certain extent.

[0073] The watermark in this application can be dynamically displayed or hidden according to the user's mouse movement. This interactivity is not available in the prior art. It allows users to view web page content without being disturbed by watermarks, improving the user experience. Since watermarks can be displayed or hidden as needed, they will not continuously interfere with the user's reading and understanding of the web page content. This helps to improve the overall readability and user satisfaction of the web page.

[0074] In the above embodiment, the compiler is a JavaScript compiler, the hidden class belongs to the CSS class, and the text node belongs to the HTML format.

[0075] Compared with other watermarking schemes that may require complex graphics processing or third-party library support, this scheme mainly relies on HTML, CSS, and JavaScript, which are widely used technologies in modern Web development and are easy to implement and maintain.

[0076] See also Figure 5 , Figure 5 It is a structural diagram of an embodiment of the storage medium provided by the present application.

[0077] The storage medium 300 stores program data 310. When the program data 310 is executed by the processor, the following is achieved: Figure 1 The steps of the watermark dynamic rendering method are described.

[0078] The program data 310 is stored in a storage medium 300, and includes a number of instructions for enabling a network device (such as a router, a personal computer, a server, or other network device) or a processor to execute all or part of the steps of the method described in each embodiment of the present application.

[0079] Optionally, the storage medium 300 may be a U disk, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk, an optical disk, or other medium that can store program data.

[0080] See also Figure 6 , Figure 6 It is a structural schematic diagram of an embodiment of a computer device provided by the present application.

[0081] The computer device 400 includes a processor 420 and a memory 410 which are connected to each other. The memory 410 stores a computer program. When the processor 420 executes the computer program, the steps of the watermark dynamic rendering method described above are implemented.

[0082] Different from the prior art, this application provides a watermark dynamic rendering method, storage medium and computer device, which monitors the dynamic movement of the mouse on the web page and displays or hides the watermark content accordingly to optimize the customer's browsing experience. At the same time, a JavaScript-based watermark setting method is adopted to simplify the development process, reduce maintenance costs, and avoid problems such as poor compatibility and high complexity. By dynamically generating configuration items, the watermark can be compatible with different web page layouts and sizes, which is more flexible.

[0083] Each embodiment in this specification is described in a progressive manner, and the same or similar parts between the embodiments can be referred to each other, and each embodiment focuses on the differences from other embodiments. In particular, for the storage medium embodiment and the computer device embodiment, since they are basically similar to the method embodiment, the description is relatively simple, and the relevant parts can be referred to the partial description of the method embodiment.

[0084] The present application can be used in many general or special computing system environments or configurations, such as personal computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, network PCs, minicomputers, and distributed computing environments including any of the above systems or devices.

[0085] In the several embodiments provided in this application, it should be understood that the disclosed methods and devices can be implemented in other ways. For example, the device embodiments described above are only illustrative, for example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not performed.

[0086] 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 present embodiment.

[0087] In addition, each functional unit in each embodiment of the present application 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.

[0088] The above descriptions are merely embodiments of the present application and are not intended to limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A watermark dynamic rendering method, characterized in that: include: Generate multiple watermarks in web pages; In response to a mouse covering event of the watermark being triggered, hiding the watermark; In response to a mouse removal event of the watermark being triggered, the watermark is redisplayed.

2. The watermark dynamic rendering method according to claim 1, characterized in that: A mouse event listener is configured in the text node of each watermark, and the mouse event listener is used to listen to the mouse covering event and the mouse removing event.

3. The watermark dynamic rendering method according to claim 2, characterized in that: The step of hiding the watermark in response to a mouse covering event of the watermark being triggered comprises: In response to the mouse event listener of the watermark listening to the mouse covering event, the compiler adds a hidden class to the text node of the watermark to hide the watermark; The step of displaying the watermark in response to a mouse removal event of the watermark being triggered comprises: In response to the mouse event listener of the watermark listening to the mouse removal event, the compiler removes the hidden class added to the text node of the watermark to redisplay the watermark.

4. The watermark dynamic rendering method according to claim 3, characterized in that: The compiler is a JavaScript compiler, the hidden class belongs to the CSS class, and the text node belongs to the HTML format.

5. The watermark dynamic rendering method according to claim 1, characterized in that: The generating of multiple watermarks in the webpage includes: A plurality of watermarks are generated in an array in the web page based on user information and web page information.

6. The watermark dynamic rendering method according to claim 5, characterized in that: The step of generating a plurality of watermarks in an array in the web page based on the user information and the web page information comprises: Based on the fact that the level of the right item in the user information is lower than a preset level, the compiler generates configuration attributes of the watermark; The compiler generates a text node of the watermark based on the configuration attributes of the watermark and adds the text node to the webpage; Determine the number of rows and columns in which the watermark is distributed in the web page based on the size of the text node and the size in the web page information; A plurality of the watermarks are generated in an array in the web page based on the number of rows and columns.

7. The watermark dynamic rendering method according to claim 6, characterized in that: The compiler generates a text node of the watermark based on the configuration attributes of the watermark and adds the text node to the webpage, including: The compiler generates text elements of the watermark based on configuration attributes of the watermark; The compiler sets the text element of the watermark to ensure that the text element meets the requirements of the configuration attributes; The set text element is rotated through the rotation attribute of the cascading style sheet to generate the text node of the watermark.

8. The watermark dynamic rendering method according to claim 6, characterized in that: The configuration attributes of the watermark include: tilt angle, watermark color, transparency, tilt angle, font size, font, horizontal distance, vertical distance and display level.

9. A storage medium having program data stored thereon, characterized in that: When the program data is executed by a processor, the steps of the watermark dynamic rendering method according to any one of claims 1 to 8 are implemented.

10. A computer device, characterized in that: The method comprises a processor and a memory connected to each other, wherein the memory stores a computer program, and when the processor executes the computer program, the steps of the watermark dynamic rendering method according to any one of claims 1 to 8 are implemented.

Images