A web front-end based adaptive video watermarking method

Abstract

This invention discloses an adaptive video watermarking method based on a web front-end. It establishes a standardized percentage coordinate system based on the effective area of ​​the video. The core steps include: obtaining the preview canvas size and device pixel ratio (DPR); performing rendering accuracy compensation calculations to generate vectorized logical components; real-time sensing of transparency; triggering adaptive visualization enhancement based on background brightness and contrast when a threshold is met; capturing interaction commands; updating proportional parameters in real-time based on bidirectional mapping and performing boundary clamping correction; and responding to save commands by performing atomic attribute stripping to restore the original visual attributes and generate a structured configuration information flow. This invention, through DPR compensation and threshold-aware visualization, solves engineering pain points such as geometric distortion across heterogeneous resolutions, difficulty in interacting with highly transparent watermarks, and blurred cross-platform display, significantly improving watermark positioning accuracy, editing interaction efficiency, and cross-platform visual consistency.

Description

Technical Field

[0001] This invention relates to the fields of video processing and web front-end development technology, specifically to an adaptive video watermarking method based on a web front-end. Background Technology

[0002] Web front-end video watermarking technology refers to the technical means of superimposing specific identifiers (such as text, rectangles, or images) onto video frames to achieve copyright protection, brand promotion, or information identification. With the diversification of display terminals and the widespread adoption of video applications, video resolutions exhibit significant differences, ranging from standard definition and near-high definition to ultra-high definition (such as 1080P and 4K). Achieving adaptive watermark display in heterogeneous resolution environments has become a core technical requirement in the front-end development field.

[0003] Currently, the main solutions for web front-end video watermarking technology are as follows:

[0004] 1. Fixed pixel coordinate positioning method: This method uses fixed pixel physical coordinates (px) and physical width and height in the video frame for positioning. While simple to implement, the relative position and proportion of the screen occupied by the watermark can change drastically at different resolutions.

[0005] 2. CSS Positioning Method: This method uses absolute or relative positioning in CSS to place watermark elements. While it supports some percentage values, it typically lacks complete interactive editing logic and struggles to support complex dynamic transformations.

[0006] 3. Canvas Drawing Method: This method draws the watermark directly on the video frame using the Canvas API. However, it typically relies on fixed pixel coordinates for calculation and lacks cross-resolution adaptability.

[0007] The above solution works well in scenarios with fixed resolution, but when the same watermark configuration is applied to videos with heterogeneous resolutions (such as video transcoding or cross-device playback), the relative position of the watermark will shift or the proportion will be distorted because the watermark is highly dependent on fixed physical pixels, which will make it impossible to maintain the consistency of the visual effect.

[0008] Specifically, existing technologies have revealed the following technical shortcomings in practical applications:

[0009] 1. Poor cross-resolution adaptability and shape distortion: Traditional positioning schemes rely heavily on physical pixels. When the video resolution changes (e.g., from 1920×1080 to 720×480), the watermark position will shift non-proportionally. Especially when the aspect ratio changes drastically (e.g., from 16:9 to 4:3), due to the lack of geometric deformation compensation, the watermark often stretches with the coordinate axis, resulting in obvious shape distortion.

[0010] 2. Inconsistent rendering clarity across devices: The web front-end operating environment is complex, and the device pixel ratio (DPR) varies greatly between different terminals (such as ordinary screens and Retina high-resolution screens). Existing percentage-based solutions do not consider sub-pixel alignment when rendering Canvas, often resulting in rendering accuracy issues such as blurred edges and outward appearance of watermarks on screens with different PPIs.

[0011] 3. Difficulty in editing high-transparency watermarks: In scenarios requiring high-transparency watermarks, the watermark is almost invisible in editing mode due to the lack of a visual enhancement mechanism, making it difficult for users to make precise adjustments.

[0012] 4. Interactive auxiliary information contaminates configuration data: To solve visibility problems, existing visual editing tools often add auxiliary layers to components. However, due to the lack of an atomic attribute stripping mechanism, these temporary auxiliary borders or background colors are very easy to remain and be written back to persistent configuration data, resulting in impure data in the production environment.

[0013] 5. Interactive editing and data disconnect and risk of exceeding boundaries: There is a lack of a unified and reversible mapping algorithm, and there is a lack of rigorous boundary correction logic when performing complex interactions such as scaling and rotation, which can easily cause the watermarked part of the image to exceed the video boundary.

[0014] In summary, how to build an adaptive system that integrates scaling, rendering accuracy compensation, geometric fidelity, and atomic property control in a web front-end environment is a technical problem that urgently needs to be solved. Summary of the Invention

[0015] The purpose of this invention is to provide an adaptive video watermarking method based on a web front-end, aiming to overcome the shortcomings of existing technologies, such as positional offset due to high dependence on pixel coordinates, shape stretching distortion when aspect ratios change, blurred rendering edges on heterogeneous screens, and the invisibility of highly transparent watermarks during editing, as well as the pollution of production data by auxiliary information. This method achieves watermark clarity alignment and adaptive positioning on screens with different PPIs by constructing a standardized percentage coordinate system based on the effective content area of ​​the video and introducing rendering accuracy compensation calculation based on device pixel ratio (DPR). Combined with an auxiliary enhancement mechanism based on transparency threshold triggering and possessing brightness adaptive capabilities, accurate visual editing is achieved without changing the original attributes. Simultaneously, a bidirectional coordinate transformation algorithm with shape fidelity compensation and dynamic correction rules are established to ensure accurate synchronization between interactive behavior and configuration data, and atomic attribute stripping is performed during the saving stage to remove auxiliary interference information. Ultimately, this improves the adaptive accuracy, rendering quality, editing efficiency, and data purity of web front-end watermarking processing.

[0016] To achieve the above objectives, this invention provides an adaptive video watermarking method based on a web front-end, the method comprising:

[0017] A standardized two-dimensional percentage coordinate system based on the effective content area of ​​the video is established, wherein the geometric attributes of the watermark are all represented by proportional parameters relative to the size of the effective content area of ​​the video, and the proportional parameters include horizontal proportional parameters, vertical proportional parameters, width proportional parameters and height proportional parameters;

[0018] In response to a visual editing instruction for a target watermark in a target video with the original video resolution, the physical pixel size of the current preview canvas and the device pixel ratio (DPR) of the display terminal are obtained. Based on the device pixel ratio, a rendering accuracy compensation calculation is performed to generate the corresponding vectorized logical component in the preview canvas.

[0019] The transparency parameter of the vectorized logic component is sensed in real time. When the transparency parameter meets the preset auxiliary display threshold, a visualization enhancement mechanism is triggered: an auxiliary border and an auxiliary background color are superimposed on the vectorized logic component. The color of the auxiliary border is adaptively adjusted based on the average brightness value of the area covered by the vectorized logic component to achieve accurate positioning of the high transparency watermark during the interaction phase.

[0020] The system captures interactive commands for the vectorized logic component, updates the standardized two-dimensional percentage coordinate system in real time based on a bidirectional coordinate mapping algorithm, and performs dynamic correction according to boundary clamping rules to lock the geometric edge of the vectorized logic component within the effective content area of ​​the video.

[0021] In response to the save command, an atomic attribute stripping operation is performed. While extracting the ratio parameters to generate structured configuration information, the auxiliary border and the auxiliary background color are forcibly removed to restore the original visual attributes of the watermark and ensure that the generated structured configuration information is decoupled from the video resolution.

[0022] Furthermore, the step of performing rendering accuracy compensation calculation based on the device pixel ratio includes: performing physical pixel alignment compensation on the vectorized logic component using the device pixel ratio, wherein the calculation formula satisfies:

[0023] ,in, The coordinates are rendered for the compensated alignment. The ratio parameter is... To preview the physical side length of the canvas;

[0024] The physical pixel alignment compensation eliminates rendering edge distortion caused by the preview canvas on a heterogeneous pixel per inch (PPI) screen.

[0025] Furthermore, the method also includes a multi-mode anchor point positioning process based on a nine-square grid distribution:

[0026] Configure corresponding logic anchors for the vectorized logic components;

[0027] When the aspect ratio of the video frame changes, the relative reference position of the vectorized logic component in the standardized two-dimensional percentage coordinate system is locked according to the logical anchor point to suppress the drift of the watermark center position.

[0028] Furthermore, the adaptive adjustment of the auxiliary border color in the visualization enhancement mechanism includes:

[0029] Calculate the average grayscale value of the video frame below the vectorized logic component in real time;

[0030] If the average grayscale value is higher than the preset brightness threshold, the color of the auxiliary border is configured to a dark color; if the average grayscale value is lower than or equal to the preset brightness threshold, the color of the auxiliary border is configured to a light color.

[0031] Furthermore, the boundary clamping rules include coordinate limit logic for both the horizontal and vertical directions:

[0032] Horizontal direction: If the horizontal ratio parameter is less than zero, it is forcibly reset to zero; if the sum of the horizontal ratio parameter and the width ratio parameter is greater than the preset full value, the horizontal ratio parameter is kept unchanged, and the width ratio parameter is reset to the difference between the preset full value and the horizontal ratio parameter.

[0033] Vertical direction: If the vertical ratio parameter is less than zero, it is forcibly reset to zero; if the sum of the vertical ratio parameter and the height ratio parameter is greater than the preset full value, the vertical ratio parameter is kept unchanged, and the height ratio parameter is reset to the difference between the preset full value and the vertical ratio parameter.

[0034] Furthermore, the dynamic correction also includes a minimum visible scale hard constraint:

[0035] Real-time verification of the width ratio parameter and the height ratio parameter of the vectorized logic component;

[0036] If any scaling parameter is lower than the preset minimum scaling threshold, the current scaling command is blocked.

[0037] Furthermore, the method also includes a heterogeneous resolution mapping process:

[0038] Receive a switching command for the target preview resolution, reinitialize the preview canvas, and extract the scale parameter from the structured configuration information;

[0039] Scaling adaptation is performed according to the shortest side priority principle: the vectorized logic components are mapped proportionally according to the side length with the smaller scaling factor in the target preview resolution, and their relative position proportion in the standardized two-dimensional percentage coordinate system remains unchanged.

[0040] Furthermore, the heterogeneous resolution mapping process also includes non-uniform distortion compensation logic based on shape fidelity:

[0041] Obtain the original aspect ratio of the vectorized logic component at the original video resolution;

[0042] When the aspect ratio of the target preview resolution changes relative to the original video resolution, the width ratio parameter or the height ratio parameter in the standardized two-dimensional percentage coordinate system is dynamically corrected by calculating the scaling weight of the preview canvas in the corresponding side length direction, so that the target watermark maintains its original aspect ratio after cross-resolution mapping.

[0043] Furthermore, the watermark type includes at least one of text watermark, rectangular watermark, and image watermark;

[0044] If it is a text watermark, the method further includes performing vectorized scaling of the font size based on the standardized two-dimensional percentage coordinate system, and recording the rotation angle metadata of the text watermark in real time.

[0045] Furthermore, the method also includes reactive redraw monitoring based on the viewport listening interface:

[0046] When the display viewport size changes dynamically, a redraw process is triggered in real time and the bidirectional coordinate mapping algorithm is reapplied to ensure that the watermark display ratio in the preview canvas is absolutely consistent with the ratio parameter in the structured configuration information.

[0047] The adaptive video watermarking method based on a web front-end provided by this invention has at least the following beneficial effects:

[0048] By establishing a standardized two-dimensional percentage coordinate system based on the effective content area of ​​the video, and combining it with the short side priority principle and shape fidelity compensation logic, the watermark can not only maintain a high degree of consistency in relative position and occupancy ratio in video environments with heterogeneous resolutions and different aspect ratios, but also effectively eliminate geometric deformation caused by coordinate axis stretching, thereby improving the visual seriousness of the copyright mark when distributed across platforms.

[0049] By utilizing Device Pixel Ratio (DPR) to perform rendering precision compensation calculations and physical pixel alignment compensation, the project addresses the engineering pain point of blurry and out-of-focus edges in Canvas rendering on different display terminals (such as high-resolution screens and ordinary screens) in Web front-ends. It achieves cross-terminal watermark clarity alignment, ensuring pixel-level visual performance in any pixel per inch (PPI) environment.

[0050] By employing a visualization enhancement mechanism triggered by a transparency threshold and an adaptive background brightness adjustment process, the visibility of high-transparency watermarks during the interactive editing stage is significantly improved. The system can automatically switch the warm or cool color scheme of the auxiliary border based on the average grayscale of the image below the watermark, ensuring that users can achieve accurate interactive positioning without altering the original attributes of the watermark. This greatly reduces the difficulty of editing and improves operational efficiency.

[0051] By employing atomic attribute stripping operations during the save phase, complete decoupling of visual interactive auxiliary information from persistent production data is achieved. This mechanism ensures that temporary borders, background colors, and other auxiliary attributes introduced in the edit state are forcibly removed when generating the configuration information stream, guaranteeing the purity of the production environment configuration data and its resolution independence.

[0052] By implementing horizontal and vertical boundary clamping rules and hard constraints on minimum visible ratios, the algorithm prevents the watermark from moving out of the video boundary or becoming invisible due to excessive scaling. This dynamic correction logic ensures that the watermark's geometric edges are always locked within the effective area, guaranteeing the integrity of the watermark display and the effective delivery of brand information.

[0053] The responsive redraw monitoring mechanism, implemented based on the viewport monitoring interface, enables the watermark to trigger redraw compensation in real time as the web frontend viewport size dynamically changes. Combined with a bidirectional coordinate mapping algorithm, the system can automatically maintain absolute synchronization between the preview screen ratio and stored parameters, significantly reducing the adaptation workload for frontend development and enhancing the system's adaptive performance and operational robustness.

[0054] In summary, this invention organically couples features with substantial technical contributions, such as device pixel ratio (DPR) rendering accuracy compensation, enhanced visualization of background brightness perception, and atomic attribute stripping. This effectively widens the technical gap with traditional simple pixel or percentage conversion solutions, and significantly enhances the creativity and engineering application value of this technical solution in complex Web operating environments. Attached Figure Description

[0055] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0056] Figure 1 This is a flowchart of the adaptive video watermarking method of the present invention. Detailed Implementation

[0057] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Rather, they are merely examples of apparatuses and methods consistent with some aspects of the invention as detailed in the appended claims.

[0058] Example 1

[0059] like Figure 1 As shown, this embodiment provides an adaptive video watermarking method based on a web front-end, the method including:

[0060] A standardized two-dimensional percentage coordinate system based on the effective content area of ​​a video is established. The geometric attributes of the watermark are represented by proportional parameters relative to the size of the effective content area of ​​the video. These proportional parameters include horizontal, vertical, width, and height parameters. This standardized two-dimensional percentage coordinate system abstracts geometric attributes from the physical pixel (px) level to the proportional logic level, achieving complete decoupling between the watermark definition and the underlying video resolution. This ensures that the same set of configuration data can automatically maintain a constant position and area ratio on heterogeneous resolution and aspect ratio terminals (e.g., switching from 1080P to 720P), solving the coordinate offset distortion problem during cross-platform adaptation.

[0061] In response to a visual editing command for a target watermark in a target video with its original video resolution, the system obtains the physical pixel size of the current preview canvas and the device pixel ratio (DPR) of the display terminal. Based on the DPR, it performs rendering accuracy compensation calculations to generate corresponding vectorized logical components in the preview canvas. By introducing the device pixel ratio (DPR) as a compensation factor for rendering accuracy, the system can perform dynamic sub-pixel alignment calibration for the heterogeneous pixel-per-inch (PPI) environment of the Web front-end, ensuring that the watermark edge remains clear and sharp even in high-resolution screens (such as Retina screens), and eliminating the rendering blurring and fuzziness caused by traditional percentage schemes at non-integer pixels.

[0062] The transparency parameter of the vectorized logic component is sensed in real time. When the transparency parameter meets a preset auxiliary display threshold, a visualization enhancement mechanism is triggered: an auxiliary border and an auxiliary background color are overlaid on the vectorized logic component. The color of the auxiliary border is adaptively adjusted based on the average brightness value of the area covered by the vectorized logic component to achieve accurate positioning of the high-transparency watermark during the interaction phase. The visualization enhancement mechanism calculates the average grayscale value of the image below the watermark in real time and dynamically switches the border contrast. Without changing the original attributes of the watermark production environment, it significantly enhances the visual visibility of high-transparency or invisible watermarks in the editing state, greatly reducing the difficulty for users to perform drag and alignment operations in complex video backgrounds and improving editing interaction efficiency.

[0063] Interaction commands for the vectorized logic component are captured, the standardized two-dimensional percentage coordinate system is updated in real time based on a bidirectional coordinate mapping algorithm, and dynamic correction is performed according to boundary clamping rules to lock the geometric edge of the vectorized logic component within the effective content area of ​​the video. The dynamic correction mechanism uses the boundary clamping algorithm to perform coordinate legality checks at the moment of interaction, which can automatically correct the risk of watermark overrun or incomplete display caused by user misoperation, ensuring that the copyright mark always resides completely within the video security area and guaranteeing the effective delivery of watermark information.

[0064] In response to the save command, an atomic attribute stripping operation is performed. While extracting the proportional parameters to generate structured configuration information, the auxiliary border and auxiliary background color are forcibly removed to restore the original visual attributes of the watermark and ensure that the generated structured configuration information is decoupled from the video resolution. This atomic attribute stripping operation, by performing dirty data cleanup during the data write-back phase, ensures that auxiliary information introduced in the editing state does not pollute the persistent production environment configuration. This achieves a high degree of consistency between the interactive WYSIWYG and the purity of stored data, guaranteeing the stability of subsequent video transcoding tasks.

[0065] As one implementation method, the rendering accuracy compensation calculation based on the device pixel ratio in this embodiment includes: performing physical pixel alignment compensation on the vectorized logic component using the device pixel ratio, wherein the calculation formula satisfies:

[0066] ,in, The coordinates are rendered for the compensated alignment. The ratio parameter is... To ensure the physical side length of the preview canvas, physical pixel alignment compensation is used to eliminate rendering edge distortion caused by the preview canvas on heterogeneous pixels per inch (PPI) screens. This precise mathematical mapping model achieves atomic-level transformation from front-end logical coordinates to hardware physical pixels, and through DPR correction compensation, ensures that the watermark geometric edges achieve pixel-level accurate mapping at any display ratio.

[0067] As one implementation method, the method described in this embodiment further includes a multi-mode anchor point positioning process based on a nine-grid distribution:

[0068] Configure corresponding logic anchors for the vectorized logic components;

[0069] When the aspect ratio of the video frame changes, the relative reference position of the vectorized logic component in the standardized two-dimensional percentage coordinate system is locked according to the logical anchor point to suppress the drift of the watermark center position. The polymorphic anchor point positioning process provides multi-dimensional relative locking capability except for the top left corner vertex, ensuring that the watermark can adaptively reposition based on the center of gravity position when switching between heterogeneous aspect ratios such as 16:9 and 4:3, effectively solving the problem of center position offset caused by a single anchor point.

[0070] As one implementation method, the adaptive adjustment of the auxiliary border color in the visualization enhancement mechanism described in this embodiment includes:

[0071] Calculate the average grayscale value of the video frame below the vectorized logic component in real time;

[0072] If the average grayscale value is higher than a preset brightness threshold, the color of the auxiliary border is configured to a dark color; if the average grayscale value is lower than or equal to the preset brightness threshold, the color of the auxiliary border is configured to a light color. Through dynamic color switching based on ambient brightness, the system achieves high-contrast isolation between auxiliary visual elements and dynamic video images, ensuring that the watermark interaction points have clear distinguishability against both extremely bright and extremely dark backgrounds.

[0073] As one implementation method, the boundary clamping rules in this embodiment include coordinate limit logic for the horizontal and vertical directions:

[0074] Horizontal direction: If the horizontal ratio parameter is less than zero, it is forcibly reset to zero; if the sum of the horizontal ratio parameter and the width ratio parameter is greater than the preset full value, the horizontal ratio parameter is kept unchanged, and the width ratio parameter is reset to the difference between the preset full value and the horizontal ratio parameter.

[0075] Vertical direction: If the vertical ratio parameter is less than zero, it is forcibly reset to zero; if the sum of the vertical ratio parameter and the height ratio parameter is greater than the preset maximum value, the vertical ratio parameter remains unchanged, and the height ratio parameter is reset to the difference between the preset maximum value and the vertical ratio parameter. This rigorous horizontal and vertical bidirectional coordinate clamping algorithm blocks illegal watermark layout paths from the logical level, ensuring the geometric integrity of watermark display under complex gesture interactions.

[0076] As one implementation method, the dynamic correction described in this embodiment also includes a minimum visible scale hard constraint:

[0077] Real-time verification of the width ratio parameter and the height ratio parameter of the vectorized logic component;

[0078] If any scaling parameter falls below the preset minimum scaling threshold, the current scaling command is blocked. By setting the preset minimum scaling threshold, the system establishes an effective watermark display safety line, preventing the watermark from losing its visual proof of copyright protection due to excessive reduction, and ensuring the minimum visual strength of copyright information.

[0079] As one implementation method, the method in this embodiment further includes a heterogeneous resolution mapping process:

[0080] Receive a switching command for the target preview resolution, reinitialize the preview canvas, and extract the scale parameter from the structured configuration information;

[0081] Scaling adaptation follows the short-side-first principle: the vectorized logic components are mapped with equal weight according to the side length with the smaller scaling factor in the target preview resolution, while maintaining their relative position proportion in the standardized two-dimensional percentage coordinate system. This combination of the short-side-first principle and the equal-weight mapping algorithm ensures that the watermark maintains a visually balanced density during large-scale previews, preventing it from obscuring core video content due to its excessively large relative proportion at low resolutions.

[0082] As one implementation method, the heterogeneous resolution mapping process in this embodiment further includes non-uniform distortion compensation logic based on shape fidelity:

[0083] Obtain the original aspect ratio of the vectorized logic component at the original video resolution;

[0084] When the aspect ratio of the target preview resolution changes relative to the original video resolution, the width or height ratio parameter in the standardized two-dimensional percentage coordinate system is dynamically corrected by calculating the scaling weight of the preview canvas in the corresponding side length direction, so that the target watermark maintains its original aspect ratio after cross-resolution mapping. The shape fidelity compensation logic solves the geometric stretching problem caused by the percentage coordinate system when switching between non-uniform resolutions (such as 16:9 to 4:3), ensuring that regular watermarks such as circles or squares do not deform, thus protecting the seriousness of the brand logo.

[0085] As one implementation method, the watermark type described in this embodiment includes at least one of text watermark, rectangular watermark, and image watermark;

[0086] If the watermark is text, the method further includes performing vectorized scaling of the font size based on the standardized two-dimensional percentage coordinate system, and recording the rotation angle metadata of the text watermark in real time. By incorporating the font size and rotation angle into the proportional coordinate system, the system achieves vectorized control of all attributes of the text watermark, ensuring consistent text layout across different terminals.

[0087] As one implementation method, the method described in this embodiment also includes reactive redraw monitoring based on the viewport listening interface:

[0088] When the viewport size changes dynamically, a redraw process is triggered in real time, and the bidirectional coordinate mapping algorithm is reapplied to ensure that the watermark display ratio in the preview canvas is absolutely consistent with the ratio parameters in the structured configuration information. The responsive redraw monitoring mechanism realizes the high-performance response logic of "one-end editing, multi-end adaptation" in the web frontend, which greatly enhances the system's cross-browser robustness and user experience.

[0089] This embodiment achieves highly adaptive and high-precision rendering of video watermarking in a web front-end environment by constructing a closed-loop architecture consisting of a percentage coordinate system, DPR rendering compensation, and atomic attribute control. Through precise scheduling of interactive visual enhancement and preserved attribute stripping, it solves engineering pain points such as geometric distortion at heterogeneous resolutions and the difficulty of editing highly transparent watermarks. While ensuring the purity of configuration data, it significantly improves the professionalism and cross-platform consistency of watermark processing.

[0090] Example 2

[0091] This embodiment proposes a detailed implementation scheme for an adaptive video watermarking system based on a web front-end. Logically, the system mainly consists of a watermark editing module (providing a user interface), a coordinate transformation module (responsible for bidirectional conversion between percentage coordinates and pixel coordinates), a watermark rendering module (displaying the watermark effect in the preview area), and a data storage module (saving watermark configuration information). By decoupling the watermark processing flow into the aforementioned collaborative functional units, this invention constructs a standardized web front-end watermark editing framework, significantly reducing the development and maintenance difficulty in heterogeneous video service scenarios.

[0092] This embodiment details the core innovation: the use of a standardized two-dimensional percentage coordinate system to replace the traditional pixel coordinate system. This system defines the watermark using horizontal (xPercent), vertical (yPercent), width (widthPercent), and height (heightPercent) parameters. Within the display plane where the watermark is configured, 0%, 50%, and 100% are explicitly defined as horizontal and vertical proportional reference lines. By abstracting geometric attributes from the physical pixel (px) level to the proportional logic level, the watermark definition is completely decoupled from the underlying video resolution. This ensures that when the video switches between different resolutions such as 1920×1080 (16:9) and 720×480 (3:2), the watermark automatically maintains a constant position and area ratio, completely solving the cross-resolution offset distortion problem caused by traditional positioning schemes.

[0093] In this embodiment, the bidirectional mapping algorithm of the coordinate transformation module is refined. When performing a percentage coordinate to pixel coordinate transformation, the system multiplies the percentage parameter by the actual width and height of the canvas and divides it by 100; conversely, when performing a pixel coordinate to percentage coordinate transformation, the physical pixel value is divided by the actual width and height of the canvas and multiplied by 100. In this embodiment, the anchor point for interactive operations is uniformly set to the top-left vertex of the vectorized logical component. For drag operations, the system performs the reverse calculation according to the formula "xPercent = (pixel width after dragging / current effective content area width) × 100"; for zoom operations, the system updates according to the formula "widthPercent = (pixel width after zooming / current effective content area width) × 100". This precise mathematical mapping model achieves atomic-level transformation from front-end logical coordinates to terminal physical pixels, ensuring synchronous write-back of interactive operations and logical coordinates.

[0094] In this embodiment, the system supports multiple watermark types, including text watermarks, rectangular watermarks, and image watermarks. For text watermarks, configuration options include text content, font size, font color, transparency, rotation angle, position, and size. For rectangular watermarks, configuration options include line thickness, line color, transparency, rotation angle, position, and size. For image watermarks, the system supports encapsulation of image data, image format, transparency, and rotation angle. By incorporating different types of watermark attributes into a unified vectorized control system, the system ensures consistent layout of watermark combinations across heterogeneous terminals.

[0095] In this embodiment, a modern web front-end technology stack is used to implement interactive watermark editing. The watermark editor consists of a control panel and a preview area. In this embodiment, the control panel supports single-selection switching for three watermark types: text, rectangle, and image. For the selected text watermark attributes, the panel provides fine-grained controls including text content (input box), font size (slider), color (selector), transparency (slider), and rotation angle (input box), and integrates function buttons for adding and deleting watermarks. In this embodiment, the preview area provides a resolution selection drop-down menu. Following the corresponding interaction instructions, users can click on the watermark display control points to perform interactions: clicking the red control point performs a zoom operation, and clicking the blue control point performs a rotation operation. The system will switch between displaying different attribute forms in the right-hand tab according to the currently selected component (such as selected1, rect, or image) and automatically redraw. By providing this WYSIWYG interactive editing interface, the efficiency of editing interaction is greatly improved.

[0096] In this embodiment, high transparency watermarks (original transparency) are targeted. A visualization enhancement mechanism has been introduced. When the triggering conditions are met, the system automatically adds a 1-pixel-wide solid color border (preferably blue #1E90FF) and a slightly gray background to the watermark component. This method significantly enhances the visibility of the watermark during the interactive phase without changing the original attributes of the watermark production environment, making precise positioning of high-transparency watermarks possible. Furthermore, this effect is reversible with atomic stripping; it will be automatically removed upon saving or exporting, ensuring the purity of persistent configuration data.

[0097] This embodiment provides a multi-resolution preview function and resolution mapping rules for aspect ratio changes. When the video aspect ratio switches from a first ratio to a second ratio (e.g., 16:9 to 4:3 or 21:9 to 16:9), the system prioritizes ensuring that the relative position ratio of the watermark within the valid content area remains unchanged. If the aspect ratio change causes the watermark to potentially go out of bounds, the system performs scaling adaptation according to the shortest side priority principle: that is, it first remaps the watermark ratio parameters according to the side with the smaller scaling factor in the target aspect ratio, and then maintains the original relative position coordinates. For example, when the watermark in a 16:9 video is converted to 4:3, the system adapts according to the height ratio and simultaneously adjusts the width ratio parameters, while keeping the position ratio parameters unchanged. This high-fidelity mapping algorithm ensures that the watermark does not undergo stretching or deformation under different aspect ratios, maintaining the seriousness of the brand logo.

[0098] In this embodiment, to ensure the integrity of the watermark display, the system implements strict boundary correction rules during user interaction. In the horizontal direction, if the horizontal ratio parameter is less than 0, it is forcibly reset to 0; if the sum of the displacement and width ratio is greater than 100, the width ratio is reset to the difference. The same clamping logic is implemented in the vertical direction. In this embodiment, the system introduces a correction priority strategy, prioritizing ensuring that the watermark width and height are not excessively compressed, i.e., forcibly setting a minimum ratio parameter of no less than 2% of the preset value. This algorithm effectively blocks illegal watermark layout paths, ensuring the minimum visible strength of copyright information.

[0099] In this embodiment, the watermark configuration data is stored in a structured JSON format.

[0100] This configuration includes watermark type, text content, font size, color, alpha transparency, rotation angle, and four key percentage parameters (xPercent, yPercent, widthPercent, heightPercent). This configuration completely decouples the information stream from the video resolution, allowing it to be directly passed through to the backend transcoding task, significantly improving the system's cross-platform deployment stability.

[0101] This embodiment summarizes the complete watermark processing workflow. The workflow includes: 1. User selects watermark type; 2. Setting basic watermark attributes; 3. Adding the watermark to the preview area and the system automatically calculating the initial percentage coordinates; 4. User modifies the position and size by dragging or scaling; 5. The system calculates and updates the percentage coordinates in real time and triggers out-of-bounds correction logic; 6. User switches between different resolution backgrounds for previewing, and the system updates the display according to mapping rules; 7. Saving the watermark configuration and automatically removing visual aids. Through this closed-loop workflow, standardized management from front-end visual interaction to persistent data storage is achieved.

[0102] In this embodiment, a watermark scheduling system with self-calibration and self-correction characteristics is constructed through a closed-loop description of each of the above-mentioned steps. This invention not only solves engineering pain points such as geometric distortion of heterogeneous resolutions and difficulties in high-transparency watermark interaction, but also significantly improves the accuracy, efficiency, and robustness of watermark processing across terminals while ensuring the purity of production data.

[0103] Although embodiments of the present invention have been shown and described above, it is understood that the above embodiments are exemplary and should not be construed as limiting the present invention. Those skilled in the art can make changes, modifications, substitutions and variations to the above embodiments within the scope of the present invention.

Claims

1. A web front-end based adaptive video watermarking method, characterized in that: The method includes: A standardized two-dimensional percentage coordinate system based on the effective content area of ​​the video is established, wherein the geometric attributes of the watermark are all represented by proportional parameters relative to the size of the effective content area of ​​the video; In response to a visual editing instruction for a target watermark in a target video with the original video resolution, the physical pixel size of the current preview canvas and the device pixel ratio (DPR) of the display terminal are obtained. Based on the device pixel ratio, a rendering accuracy compensation calculation is performed to generate the corresponding vectorized logical component in the preview canvas. The transparency parameter of the vectorized logic component is sensed in real time. When the transparency parameter meets the preset auxiliary display threshold, a visualization enhancement mechanism is triggered to overlay an auxiliary border and an auxiliary background color on the vectorized logic component. The color of the auxiliary border is adaptively adjusted based on the average brightness value of the area covered by the vectorized logic component to achieve accurate positioning of the high transparency watermark during the interaction phase. The system captures interactive commands for the vectorized logic component, updates the standardized two-dimensional percentage coordinate system in real time based on a bidirectional coordinate mapping algorithm, and performs dynamic correction according to boundary clamping rules to lock the geometric edge of the vectorized logic component within the effective content area of ​​the video. In response to the save command, an atomic attribute stripping operation is performed. While extracting the ratio parameters to generate structured configuration information, the auxiliary border and the auxiliary background color are forcibly removed to restore the original visual attributes of the watermark and ensure that the generated structured configuration information is decoupled from the video resolution. The heterogeneous resolution mapping process includes non-uniform distortion compensation logic based on shape fidelity: obtaining the original aspect ratio of the vectorization logic component at the original video resolution; when the aspect ratio of the target preview resolution changes relative to the original video resolution, dynamically correcting the width ratio parameter or height ratio parameter in the standardized two-dimensional percentage coordinate system by calculating the scaling weight of the preview canvas in the corresponding side length direction, so that the target watermark maintains its original aspect ratio after cross-resolution mapping; The boundary clamping rules include coordinate limit logic for both the horizontal and vertical directions: Horizontal direction: If the horizontal ratio parameter is less than zero, it is forcibly reset to zero; if the sum of the horizontal ratio parameter and the width ratio parameter is greater than the preset full value, the horizontal ratio parameter is kept unchanged, and the width ratio parameter is reset to the difference between the preset full value and the horizontal ratio parameter. Vertical direction: If the vertical ratio parameter is less than zero, it is forcibly reset to zero; if the sum of the vertical ratio parameter and the height ratio parameter is greater than the preset full value, the vertical ratio parameter is kept unchanged, and the height ratio parameter is reset to the difference between the preset full value and the vertical ratio parameter.

2. The method of claim 1, wherein: The step of performing rendering precision compensation calculation based on the device pixel ratio includes: performing physical pixel alignment compensation on the vectorized logic component using the device pixel ratio, wherein the calculation formula satisfies: wherein, is the compensated alignment rendering coordinate, is the scale parameter, is the physical side length of the preview canvas; The physical pixel alignment compensation eliminates rendering edge distortion caused by the preview canvas on a heterogeneous pixel per inch (PPI) screen.

3. The method of claim 1, wherein: The method also includes a multi-mode anchor point positioning process based on a nine-square grid distribution: Configure corresponding logic anchors for the vectorized logic components; When the aspect ratio of the video frame changes, the relative reference position of the vectorized logic component in the standardized two-dimensional percentage coordinate system is locked according to the logical anchor point to suppress the drift of the watermark center position.

4. The method of claim 1, wherein: The adaptive adjustment of the auxiliary border color in the visualization enhancement mechanism includes: Calculate the average grayscale value of the video frame below the vectorized logic component in real time; If the average grayscale value is higher than the preset brightness threshold, the color of the auxiliary border is configured to a dark color; if the average grayscale value is lower than or equal to the preset brightness threshold, the color of the auxiliary border is configured to a light color.

5. The method of claim 1, wherein: The dynamic correction also includes a minimum visible scale hard constraint: Real-time verification of the width ratio parameter and the height ratio parameter of the vectorized logic component; If any scaling parameter is lower than the preset minimum scaling threshold, the current scaling command is blocked.

6. The method of claim 1, wherein: The heterogeneous resolution mapping process also includes: Receive a switching command for the target preview resolution, reinitialize the preview canvas, and extract the scale parameter from the structured configuration information; Scaling adaptation is performed according to the shortest side priority principle: the vectorized logic components are mapped proportionally according to the side length with the smaller scaling factor in the target preview resolution, and their relative position proportion in the standardized two-dimensional percentage coordinate system remains unchanged.

7. The method of claim 1, wherein: The watermark type includes at least one of text watermark, rectangular watermark and image watermark; If it is a text watermark, the method further includes performing vectorized scaling of the font size based on the standardized two-dimensional percentage coordinate system, and recording the rotation angle metadata of the text watermark in real time.

8. The method according to claim 1, characterized in that: The method also includes reactive redraw monitoring based on the viewport listening interface: When the display viewport size changes dynamically, a redraw process is triggered in real time and the bidirectional coordinate mapping algorithm is reapplied to ensure that the watermark display ratio in the preview canvas is absolutely consistent with the ratio parameter in the structured configuration information.

Images