Tamper-proof watermark rendering method and device based on vue framework
Through the tamper-proof watermark rendering method based on the vue framework, the watermark text is dynamically generated and updated in real time, solving the problem that watermarks are prone to tampering or deletion, achieving higher security and effectiveness.
Patent Information
- Application Number
- CN202411601951.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-11
- Publication Date
- 2025-03-28
AI Technical Summary
The prior art is difficult to prevent watermarks from being tampered with or deleted, resulting in poor protection of original content.
The tamper-proof watermark rendering method based on the vue framework is adopted. By obtaining the current time information and user information, watermark text is dynamically generated, and the data binding mechanism of Vue components is used to bind the watermark status with the SVG attributes, and the watermark parameters are updated in real time to enhance their security.
Real-time generation and update of watermarks is realized, the security and effectiveness of watermarks are improved, and the misappropriates prevent the watermark from being tampered with or deleted by censoring elements and other means.
Smart Images
Figure CN119722426A_ABST
Abstract
Description
Technical Field
[0001] The present application belongs to the field of watermark rendering technology, and in particular, relates to a tamper-proof watermark rendering method and device based on a Vue framework. Background Art
[0002] With the widespread dissemination of the Internet and digital content, the protection of original content and the prevention of theft have become an important issue. As a technology for copyright protection and content authentication, watermarking has been widely used in many fields and scenarios. For example, in scenarios such as picture social platforms, photography websites, and personal albums, watermarks are widely used to protect the copyright and originality of pictures. Watermarks can contain the author's name, logo, copyright information, or other specific content to indicate the ownership and source of the picture and reduce the risk of theft or unauthorized use by others. In important documents such as legal documents, certificates, and contracts, watermarks can be used to authenticate the authenticity and integrity of the document. Watermarks can include information such as the date, number, and confidentiality level of the document to support legal evidence collection and prevent forgery. In video and audio content, watermarks can be used for copyright protection, source tracking, and content authentication. By embedding watermarks in video or audio streams, the distribution of pirated or unauthorized content can be tracked and provide a legal basis.
[0003] In front-end development, using watermarks is a common way to protect original content. Watermarks can add some specific logos to web pages or pictures to reduce the risk of theft. However, the watermark itself may be tampered with or deleted, so it is necessary to implement some anti-watermark mechanisms on the front end to increase the effectiveness and security of the watermark. Summary of the invention
[0004] In view of this, the present application aims to propose a tamper-proof watermark rendering method and device based on the Vue framework to solve the problem of tampering or deletion of watermarks by pirates.
[0005] To achieve the above purpose, the technical solution of this application is implemented as follows: In the first aspect, the present application provides an anti-tampering watermark rendering method based on the Vue framework, comprising: Obtain current time information and user information, and perform text splicing on the time information and the user information through the Generate Dynamic Text function to dynamically generate a watermark text; Combine multiple graphic elements and text elements in an SVG container to create a complex and recognizable watermark pattern, use the data binding mechanism of the Vue component, and bind the state of the watermark to the SVG attribute; Update watermark parameters in real time during the life cycle of the Vue component, monitor user interaction events in real time, and update watermark properties according to the interaction event processing function; Apply the updated watermark attributes to the SVG element and render it on the page to generate a new watermark pattern.
[0006] In the second aspect, based on the same inventive concept, the present application also provides an anti-tampering watermark rendering device based on the vue framework, including: The information acquisition module is configured to acquire current time information and user information, and perform text splicing on the time information and the user information through the Generate DynamicText function to dynamically generate a watermark text; A data binding module is configured to combine multiple graphic elements and text elements in an SVG container to create a watermark pattern with complex recognition, using the data binding mechanism of the Vue component and binding the state of the watermark to the SVG attribute; The property update module is configured to update the watermark parameters in real time during the life cycle of the Vue component, monitor the user's interaction events in real time, and update the watermark properties according to the interaction event processing function; The watermark rendering module is configured to apply the updated watermark attribute to the SVG element and render a new watermark pattern on the page.
[0007] In a third aspect, based on the same inventive concept, the present application also provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in the first aspect is implemented.
[0008] In a fourth aspect, based on the same inventive concept, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in the first aspect.
[0009] Compared with the prior art, the anti-tampering watermark rendering method and device based on the Vue framework described in this application has the following beneficial effects: The tamper-proof watermark rendering method and device based on the Vue framework described in the present application can customize the text, and set the display angle, text font size and text color of the text; the watermark can be generated in real time, and each time the component is loaded, the watermark can be dynamically generated according to the needs, without the need to process or save the watermark image in advance. Various shapes, texts and images can be drawn on the web page, so various unique watermark effects can be achieved; developers can freely design the watermark style, position, transparency and other parameters according to needs to achieve the best visual effect and improve the security of the watermark. The watermark content rendered based on this method cannot be directly copied or modified, which can prevent the thief from tampering with or deleting the watermark by reviewing elements and the like. BRIEF DESCRIPTION OF THE DRAWINGS
[0010] The drawings constituting a part of the present application are used to provide a further understanding of the present application. The illustrative embodiments and descriptions of the present application are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings: Figure 1 This is a flow chart of an anti-tampering watermark rendering method based on a Vue framework described in an embodiment of the present application; Figure 2 This is a schematic diagram of the structure of an anti-tampering watermark rendering device based on a vue framework described in an embodiment of the present application; Figure 3 This is a schematic diagram of the hardware structure of the electronic device described in the embodiment of the present application. DETAILED DESCRIPTION
[0011] In order to make the objectives, technical solutions and advantages of the present application more clearly understood, the present application is further described in detail below in combination with specific embodiments and with reference to the accompanying drawings.
[0012] It should be noted that, unless otherwise defined, the technical terms or scientific terms used in the embodiments of the present application should be the usual meanings understood by people with ordinary skills in the field to which the present application belongs. The "first", "second" and similar words used in the embodiments of the present application do not represent any order, quantity or importance, but are only used to distinguish different components. "Including" or "comprising" and similar words mean that the elements or objects appearing in front of the word cover the elements or objects listed after the word and their equivalents, without excluding other elements or objects. "Connect" or "connected" and similar words are not limited to physical or mechanical connections, but can include electrical connections, whether direct or indirect. "Up", "down", "left", "right" and the like are only used to indicate relative positional relationships. When the absolute position of the described object changes, the relative positional relationship may also change accordingly.
[0013] The embodiments of the present application are described in detail below with reference to the accompanying drawings.
[0014] See also Figure 1 As shown, this embodiment provides an anti-tampering watermark rendering method based on the Vue framework, which specifically includes the following steps: Step S101, obtaining current time information and user information, and concatenating the time information and user information through the Generate Dynamic Text function to dynamically generate a watermark text; Specifically, in this embodiment, a custom Generate Dynamic Text function is used to generate watermark text according to the input dynamic data. The Generate Dynamic Text function is usually called in a component lifecycle hook, such as created or mounted, and may be called again when some data changes to ensure the update of the watermark text.
[0015] In some implementations, the current time information is obtained using the JavaScript Date object, and time-based text is generated by formatting the date and time, and combined with the user's personal information to obtain a watermark text with dynamic properties, wherein the personal information includes a user name, ID, or a string that uniquely identifies the user.
[0016] Specifically, in this embodiment, the function calls the JavaScript built-in Date object to obtain the current time information. Through the date object, information such as year, month, day, hour, minute, and second can be accessed. This information can be used to create a timestamp or a formatted time string as part of the watermark text.
[0017] The function processes user information, including the user's name, user ID, or any other string that can uniquely identify the user. User information helps ensure the uniqueness of the watermark text, making each user's watermark different.
[0018] After obtaining the current time and user information, the function will perform text splicing. It should be noted that the splicing rules can be designed according to specific needs. For example, the time information can be displayed in the form of year-month-day and combined with the user's name or ID to generate a string such as "2023-03-15 User123's watermark".
[0019] This step, as the basis for watermark text generation, can ensure the uniqueness of the watermark and its relevance to the current time. By combining the current time information and user information to generate the watermark text, it serves as a key step to ensure the personalization of the watermark.
[0020] Step S102: Combine multiple graphic elements and text elements in an SVG container to create a watermark pattern with complex recognition, use the data binding mechanism of the Vue component, and bind the state of the watermark to the SVG attribute.
[0021] Specifically, in this embodiment, multiple graphic elements and text elements are combined into a complex watermark pattern, which increases the complexity and recognition of the watermark. At the same time, the data binding mechanism of the Vue component is utilized to apply the responsiveness of Vue to the key step of the watermark component, thereby ensuring the dynamic update of the watermark.
[0022] In some implementations, in a Vue component, by <svg>The tag creates an SVG container, which contains all the graphic elements and text elements of the watermark; Through the event handler of the Vue component, an SVG graphics configuration array is generated according to the component data, and the generated SVG image configuration array is bound to the SVG element in the template.
[0023] Specifically, in this embodiment, the watermark is drawn in SVG format, and the dynamic effect is achieved by using the data binding mechanism of Vue, which can be explained by the following steps: Use in Vue component template <svg>The tag is used to define the SVG container, which will be the parent element of all watermark graphics. In the data function of the Vue component, the properties of the graphics, such as width, height, color, etc., are defined. These properties will be used to create SVG graphics and can be bound to the properties in the template through Vue's data binding.
[0024] Use Vue's instructions or event handlers to dynamically generate SVG paths and graphic elements based on the component's data, bind the generated SVG graphic configuration array to the SVG element in the template, and Vue will automatically update these elements. When the component's responsive data changes, Vue will re-render the SVG elements and animations based on the data, thereby achieving a dynamic watermark effect.
[0025] Step S103: updating watermark parameters in real time during the life cycle of the Vue component, monitoring user interaction events in real time, and updating watermark properties according to the interaction event processing function; Specifically, in this embodiment, data changes are monitored during the life cycle of the component, and watermark parameters are updated according to user interaction or other factors.
[0026] In some implementations, a listener for responsive data is set in a lifecycle hook of a Vue component to update watermark parameters; Listen to user interaction events in the Vue component, define event processing functions for the listened events, and update watermark properties according to the specific behavior type of the event.
[0027] Specifically, in this embodiment, in the life cycle hooks of the Vue component (such as mounted, updated, etc.), the watermark parameters (such as text content, font size, color, rotation angle, etc.) are updated. Through Vue's responsive data system, changes in external data sources (such as API responses) are monitored, and the watermark is updated in real time when the data is updated.
[0028] In order to respond to user interaction, @mouseover, @click and other instructions are used in the template to monitor user interaction events, such as mouseover, click, etc. For each monitored interaction event, an event processing function is defined for each interaction event, which will update the properties of the watermark according to the interaction type, such as changing transparency, rotation angle, text content, etc.
[0029] It should be noted that an event handling function (also called an event listener or event handler) is a function that responds to user interaction events and is executed when a specific event occurs.
[0030] In Vue components, event handling functions are usually used with event listener instructions in the template, such as @click, @mouseover, @keydown, etc. These instructions bind user interaction events to methods inside the component. When the user performs an action (such as clicking a button), the bound method will be called and the corresponding logic will be executed.
[0031] Step S104: Apply the updated watermark attribute to the SVG element, and render it on the page to generate a new watermark pattern.
[0032] Specifically, in this embodiment, inside the SVG element, the data attributes are bound to the SVG element through Vue's instructions. When the watermark attributes change, Vue automatically triggers the component to re-render. Vue updates the DOM and applies the new attributes to the SVG element, thereby rendering a new watermark pattern on the page.
[0033] The method described in this embodiment can customize the text and set the display angle, font size and color of the text; watermarks can be generated in real time, and each time a component is loaded, a watermark can be dynamically generated according to demand without the need to process or save the watermark image in advance. Various shapes, texts and images can be drawn on the web page, so various unique watermark effects can be achieved; developers can freely design parameters such as the style, position and transparency of the watermark according to demand to achieve the best visual effect and improve the security of the watermark. The watermark content rendered based on this method cannot be directly copied or modified, which can prevent the thief from tampering with or deleting the watermark by reviewing elements and the like.
[0034] It should be noted that the above describes some embodiments of the present application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in an order different from that in the above embodiments and still achieve the desired results. In addition, the processes depicted in the accompanying drawings do not necessarily require the specific order or continuous order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.
[0035] Based on the same inventive concept, corresponding to any of the above-mentioned embodiment methods, the embodiment of the present application also provides an anti-tampering watermark rendering device based on the vue framework.
[0036] like Figure 2 As shown, the anti-tampering watermark rendering device based on the vue framework includes: The information acquisition module 11 is configured to acquire current time information and user information, and concatenate the time information and the user information through the GenerateDynamic Text function to dynamically generate a watermark text; A data binding module 12 is configured to combine multiple graphic elements and text elements in an SVG container to create a watermark pattern with complex recognition, using a data binding mechanism of a Vue component, and binding the state of the watermark to an SVG attribute; The property update module 13 is configured to update the watermark parameters in real time during the life cycle of the Vue component, monitor the user's interaction events in real time, and update the watermark properties according to the interaction event processing function; The watermark rendering module 14 is configured to apply the updated watermark attribute to the SVG element and render and generate a new watermark pattern on the page.
[0037] For the convenience of description, the above devices are described in terms of functions and are divided into various modules. Of course, when implementing the embodiments of the present application, the functions of each module can be implemented in the same or multiple software and / or hardware.
[0038] The device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.
[0039] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments and methods, an embodiment of the present application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein when the processor executes the program, the method described in any of the above embodiments is implemented.
[0040] Figure 3 A more specific schematic diagram of the hardware structure of an electronic device provided in this embodiment is shown, and the device may include: a processor 1010, a memory 1020, an input / output interface 1030, a communication interface 1040, and a bus 1050. The processor 1010, the memory 1020, the input / output interface 1030, and the communication interface 1040 are connected to each other through the bus 1050 in the device.
[0041] The processor 1010 can be implemented by a general-purpose CPU (Central Processing Unit), a microprocessor, an application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in the embodiments of this specification.
[0042] The memory 1020 may be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 1020 may store an operating system and other application programs. When the technical solutions provided in the embodiments of this specification are implemented by software or firmware, the relevant program codes are stored in the memory 1020 and are called and executed by the processor 1010.
[0043] The input / output interface 1030 is used to connect the input / output module to realize information input and output. The input / output module can be configured in the device as a component (not shown in the figure), or it can be externally connected to the device to provide corresponding functions. The input device may include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output device may include a display, a speaker, a vibrator, an indicator light, etc.
[0044] The communication interface 1040 is used to connect a communication module (not shown) to realize communication interaction between the device and other devices. The communication module can realize communication through wired means (such as USB, network cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).
[0045] The bus 1050 includes a path that transmits information between the various components of the device (eg, the processor 1010 , the memory 1020 , the input / output interface 1030 , and the communication interface 1040 ).
[0046] It should be noted that, although the above device only shows the processor 1010, the memory 1020, the input / output interface 1030, the communication interface 1040 and the bus 1050, in the specific implementation process, the device may also include other components necessary for normal operation. In addition, it can be understood by those skilled in the art that the above device may also only include the components necessary for implementing the embodiments of the present specification, and does not necessarily include all the components shown in the figure.
[0047] The electronic device of the above embodiment is used to implement the corresponding method in any of the above embodiments, and has the beneficial effects of the corresponding method embodiment, which will not be described in detail here.
[0048] Based on the same inventive concept, corresponding to any of the above-mentioned embodiments, the present application also provides a non-transitory computer-readable storage medium, wherein the non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to enable the computer to execute the method described in any of the above embodiments.
[0049] The computer-readable medium of this embodiment includes permanent and non-permanent, removable and non-removable media, and information storage can be implemented by any method or technology. Information can be computer-readable instructions, data structures, modules of programs, 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, read-only compact disk read-only memory (CD-ROM), digital versatile disk (DVD) or other optical storage, magnetic cassettes, tape disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device.
[0050] The computer instructions stored in the storage medium of the above embodiments are used to enable the computer to execute the method described in any of the above embodiments, and have the beneficial effects of the corresponding method embodiments, which will not be repeated here.
[0051] A person skilled in the art should understand that the discussion of any of the above embodiments is merely illustrative and is not intended to imply that the scope of the present application (including the claims) is limited to these examples. In line with the concept of the present application, the technical features in the above embodiments or different embodiments may be combined, the steps may be implemented in any order, and there are many other variations of the different aspects of the embodiments of the present application as described above, which are not provided in detail for the sake of simplicity.
[0052] In addition, to simplify the description and discussion, and in order not to make the embodiments of the present application difficult to understand, the known power / ground connections to the integrated circuit (IC) chip and other components may or may not be shown in the provided drawings. In addition, the device may be shown in the form of a block diagram to avoid making the embodiments of the present application difficult to understand, and this also takes into account the fact that the details of the implementation of these block diagram devices are highly dependent on the platform on which the embodiments of the present application are to be implemented (that is, these details should be fully within the scope of understanding of those skilled in the art). Where specific details (e.g., circuits) are set forth to describe exemplary embodiments of the present application, it is obvious to those skilled in the art that the embodiments of the present application can be implemented without these specific details or with changes in these specific details. Therefore, these descriptions should be considered illustrative rather than restrictive.
[0053] Although the present application has been described in conjunction with specific embodiments of the present application, many alternatives, modifications and variations of these embodiments will be apparent to those skilled in the art from the foregoing description. For example, other memory architectures (e.g., dynamic RAM (DRAM)) may use the discussed embodiments.
[0054] The embodiments of the present application are intended to cover all such substitutions, modifications and variations that fall within the broad scope of the appended claims. Therefore, any omissions, modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the embodiments of the present application should be included in the scope of protection of the present application.< / svg> < / svg>
Claims
1. A tamper-proof watermark rendering method based on the Vue framework, characterized in that: include: Obtain current time information and user information, and perform text splicing on the time information and the user information through the Generate Dynamic Text function to dynamically generate a watermark text; Combine multiple graphic elements and text elements in an SVG container to create a complex and recognizable watermark pattern, use the data binding mechanism of the Vue component, and bind the state of the watermark to the SVG attribute; Update watermark parameters in real time during the life cycle of the Vue component, monitor user interaction events in real time, and update watermark properties according to the interaction event processing function; Apply the updated watermark attributes to the SVG element and render it on the page to generate a new watermark pattern.
2. The method according to claim 1, characterized in that The acquiring of time information and user information, and text concatenation of the time information and the user information through a Generate Dynamic Text function to dynamically generate a watermark text, includes: The current time information is obtained by using the JavaScript Date object, and a time-based text is generated by formatting the date and time. The watermark text with dynamic properties is obtained by combining the user's personal information, wherein the personal information includes a user name, ID, or a string that uniquely identifies the user.
3. The method according to claim 1, characterized in that The method combines multiple graphic elements and text elements in an SVG container to create a watermark pattern with complex recognition, utilizes the data binding mechanism of the Vue component, and binds the state of the watermark to the SVG attribute, including: In the Vue component, through <svg> The tag creates an SVG container, which contains all the graphic elements and text elements of the watermark;< / svg> Through the event handler of the Vue component, an SVG graphics configuration array is generated according to the component data, and the generated SVG image configuration array is bound to the SVG element in the template.
4. The method according to claim 1, characterized in that The watermark parameters are updated in real time during the life cycle of the Vue component, and the user's interaction events are monitored in real time, and the watermark properties are updated according to the interaction event processing function, including: Set up a responsive data listener in the lifecycle hook of the Vue component to update the watermark parameters; Listen to user interaction events in the Vue component, define event processing functions for the listened events, and update watermark properties according to the specific behavior type of the event.
5. The method according to claim 1, characterized in that The step of applying the updated watermark attribute to the SVG element and rendering the new watermark pattern on the page includes: Inside the SVG element, the data attributes are bound to the SVG element through Vue's instructions. When the watermark attributes change, Vue automatically triggers the component to re-render. Vue updates the DOM, applies the new attributes to the SVG element, and then renders the new watermark pattern on the page.
6. A tamper-proof watermark rendering device based on the vue framework, characterized in that: include: The information acquisition module is configured to acquire current time information and user information, and perform text splicing on the time information and the user information through the Generate Dynamic Text function to dynamically generate a watermark text; A data binding module is configured to combine multiple graphic elements and text elements in an SVG container to create a watermark pattern with complex recognition, using the data binding mechanism of the Vue component and binding the state of the watermark to the SVG attribute; The property update module is configured to update the watermark parameters in real time during the life cycle of the Vue component, monitor the user's interaction events in real time, and update the watermark properties according to the interaction event processing function; The watermark rendering module is configured to apply the updated watermark attribute to the SVG element and render a new watermark pattern on the page.
7. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the program, the method according to any one of claims 1 to 5 is implemented.
8. A non-transitory computer-readable storage medium, characterized in that: in, The non-transitory computer-readable storage medium stores computer instructions, and the computer instructions are used to cause a computer to execute the method according to any one of claims 1 to 5.