A video electronic amplification system and method based on intelligent border processing, an electronic device, and a storage medium

Abstract

The application relates to the technical field of video picture enlargement rendering, and discloses a video electronic enlargement system and method based on intelligent boundary processing, electronic equipment and a storage medium. The method completes full-process processing through multi-module cooperation: a mouse interaction event is captured and standardized coordinate data flow is analyzed, a visual enlargement frame is drawn through a frame selection component, and an original enlargement area and a center point coordinate are returned; boundary detection is performed, through layered boundary constraint, center point iterative correction and adaptive parameter adjustment, the defect of cutting of an enlarged area beyond the boundary is eliminated; the zoom parameter is corrected in combination with the size of a browser, the performance of a device and dynamic constraint; an event management module realizes event whole life cycle management and control and resource release; a variety of renderers are compatible through a renderer abstraction layer, and accurate rendering is completed based on a CSS3 Transform hardware acceleration combination transformation. The application greatly improves the accuracy, compatibility and stability of a video enlargement operation.

Description

Technical Field

[0001] This invention relates to the field of video image magnification and rendering technology, specifically to a video electronic magnification system, method, electronic device, and storage medium based on intelligent boundary processing. Background Technology

[0002] In business scenarios such as video surveillance, online education, and telemedicine, operators frequently need to view detailed video content. Traditional methods of viewing details rely on full-screen playback or manual scaling of the player window, which are cumbersome, have poor magnification accuracy, and cannot pinpoint specific areas of the image, severely reducing business processing efficiency. Therefore, web-based electronic video magnifier functionality has emerged, allowing users to select specific areas of the video for individual magnification, accurately extracting details, and significantly improving video information reading efficiency, becoming a standard auxiliary capability for web video systems. However, browser environments have inherent compatibility and performance limitations: different browser kernels have significantly different graphics rendering capabilities, terminal screen resolutions are fragmented, and the underlying video rendering engines are not standardized. Furthermore, the resource overhead of web page DOM, Canvas, and WebGL graphics pipelines is limited. Existing web-based electronic magnifier solutions have numerous shortcomings in areas such as boundary display, scaling control, performance, multi-renderer compatibility, and interactive smoothness, making it difficult to meet the stable usage requirements of multiple scenarios.

[0003] Currently, mainstream webpage video magnifiers in the industry are mainly implemented in two ways. The first is a simple implementation based on native DOM scaling. This involves listening to mouse interactions to select a region of the screen, calculating the scaling factor based on the selected size, and directly manipulating DOM layers to achieve the magnification effect. This approach is simple in structure and has low development costs, making it a common technical route for early webpage magnifiers. The second is an optimized solution based on Canvas graphics transformation. This improves upon the issues of image distortion and limited interaction found in pure DOM solutions. It leverages the Canvas drawing interface to enhance the clarity of the magnified image, adds drag-and-drop interaction logic, and implements basic adaptive adjustments based on the video and browser window sizes, resulting in improved overall adaptability compared to the pure DOM solution.

[0004] The simplistic DOM-based scaling solution lacks standardized boundary handling logic. When the zoomed-in area is close to the edge of the video, the zoomed-in image is prone to overflowing, resulting in partial image loss. The scaling ratio is calculated linearly based on the selected size, which can easily lead to problems such as excessive zooming and stuttering or insufficient zoom. At the same time, no performance optimization measures are configured, and the page is frequently redrawn during mouse dragging and movement, resulting in frequent screen flickering and stuttering. Furthermore, it only adapts to DOM video playback mode, resulting in poor cross-browser and cross-terminal compatibility.

[0005] The optimized Canvas transformation scheme can only handle simple boundary scenes, and screen truncation and offset still occur in complex selection scenes; the performance optimization relies only on the native basic capabilities of Canvas, and stuttering issues are still prominent in high-resolution video scenes; the multi-renderer adaptation capability is weak, and it does not support adaptation to new video rendering engines such as WebGL and WASM, which limits the application scenarios; at the interaction level, there is a lack of smooth transition animations, insufficient coordinate calculation accuracy, and obvious delays in drag operations.

[0006] The aforementioned shortcomings have limited the practical application of video magnifiers in high-standard business scenarios. Therefore, there is an urgent need to develop a video magnifier system to overcome the deficiencies of existing technologies and meet the stable usage requirements for viewing high-definition details in multiple business scenarios. Summary of the Invention

[0007] The present invention aims to provide a video electronic magnification system, method, electronic device and storage medium based on intelligent boundary processing, so as to solve the problem that the image easily exceeds the video canvas and is cropped or incompletely displayed after the existing video magnification tools select and magnify.

[0008] To achieve the above objectives, the present invention adopts the following technical solution: A video electronic magnification method based on intelligent boundary processing includes: S1 captures mouse interaction events in real time through the Mouse event handling module and parses the standardized coordinate data stream; the ZoomRect selection component receives the coordinate data stream and draws a visual zoom-in selection box in real time, and synchronously outputs the coordinates of the original zoom-in area and the original center point selected by the user. S2, the boundary processing module receives the original zoomed-in area coordinates, the original center point coordinates, and the video canvas size parameters, and executes the boundary detection logic to determine whether the zoomed-in area exceeds the boundary; if it is determined that it exceeds the boundary, it calls the center point intelligent calculation logic and the layered boundary constraint algorithm to perform bidirectional constraint calculation, and synchronously corrects the center point and scaling parameters through adaptive adjustment logic and outputs them; if it does not exceed the boundary, it directly uses the original center point coordinates for output. S3 collects browser view area size, device CPU load, and rendering frame rate data through the scaling calculation module, calculates the initial scaling ratio based on the selected area size, and adaptively adjusts the scaling parameters based on the upper and lower limits of scaling and real-time performance load. S4 automatically identifies the video renderer type and performs differentiated adaptation through the renderer abstraction layer; it constructs a combined transformation matrix based on CSS3 Transform through the hardware accelerated rendering unit, configures transform-origin to lock the center point after correction and magnification, and enables GPU hardware acceleration to complete accurate rendering of video images.

[0009] The principle and advantages of this solution are as follows: In practical applications, it first captures various mouse interaction behaviors and outputs standardized coordinate data streams, draws a visual selection box in real time, and outputs the original magnified area and center point coordinates, thus completing the visualization of user interaction intent and the standardized collection of coordinate data. Then, it performs boundary judgment based on the video canvas size. If there is a boundary violation, it automatically adjusts the center position through a layered boundary constraint algorithm combined with the center point iterative correction logic, and simultaneously adaptively corrects the scaling parameters, outputting legal coordinate parameters that do not exceed the canvas, thus solving the problem of cropping the magnified image from the root. Next, it collects environmental and performance data such as the browser's visible area, CPU load, and rendering frame rate, calculates the initial scaling ratio based on the selection size, and dynamically adjusts the scaling factor based on the upper and lower limits of scaling and the real-time load of the device, taking into account both the magnification effect and the smoothness of page operation. After that, it automatically identifies the video renderer category and completes differentiated adaptation, builds a translation and scaling combination transformation matrix based on CSS3 Transform, locks the corrected magnified center point, and calls GPU hardware acceleration to complete the image rendering, reducing rendering overhead and ensuring smooth operation and positioning accuracy.

[0010] The advantages compared to existing technologies: (1) By using a boundary processing algorithm, the magnified area is always within the visible range of the video, which significantly improves the user experience.

[0011] (2) Based on CSS3 Transform hardware acceleration technology and various performance optimization strategies, it ensures smooth operation in various devices and browser environments.

[0012] (3) The multi-renderer adaptation mechanism enables it to adapt to different video renderers, such as Canvas, WebGL, WASM, etc., and has a wider range of applications.

[0013] (4) Provide a smooth and accurate user operation experience through a well-developed event management system and user interaction optimization mechanism.

[0014] (5) The modular system architecture and clear code structure improve the maintainability and scalability of the system.

[0015] (6) By using intelligent performance monitoring and adaptive adjustment mechanisms, the system resource usage can be reasonably controlled, so as to reduce unnecessary resource consumption while ensuring functionality.

[0016] Preferably, as an improvement, the layered boundary constraint algorithm includes horizontal boundary constraints, vertical boundary constraints, and a comprehensive boundary processing algorithm; the horizontal boundary constraints limit the magnified area to not exceed the video canvas horizontally, the vertical boundary constraints limit the magnified area to not exceed the video canvas vertically, and the comprehensive boundary processing synchronously links the horizontal and vertical bidirectional constraints to output the final effective magnified coordinates.

[0017] Technical effect: The magnification range is constrained separately in the horizontal and vertical directions, and then integrated and verified in both directions to completely prevent the magnified area from overflowing the canvas in one or both directions, and to provide accurate boundary constraint thresholds for center point correction.

[0018] Preferably, as an improvement, the intelligent calculation logic for the center point includes: taking the original center point as the initial value, iteratively offsetting the center point in combination with the layer boundary constraint threshold until the magnified area is completely contained within the video canvas, and outputting a corrected center point without exceeding the boundary.

[0019] Technical effect: The iterative approximation method automatically corrects the offset center point, eliminating the need for manual secondary adjustment, ensuring that the magnified image falls completely within the video's visible area, and eliminating local cropping defects.

[0020] Preferably, as an improvement, in S3, when the performance data is detected to be lower than a preset threshold, the scaling ratio is automatically reduced and the rendering update frequency is reduced.

[0021] Technical effect: Dynamically adapts to device operating load, actively reduces rendering computation when device performance is insufficient, avoids page frame drops and operation lag caused by high scaling, and ensures smooth interaction.

[0022] Preferably, as an improvement, the scaling upper and lower limits include: the upper scaling limit is 8 times the size of the browser's visible area, and the lower scaling limit is 0.02 times the size of the browser's visible area.

[0023] Technical effect: Setting a reasonable scaling range prevents excessive scaling from causing rendering pressure on large-screen images, while avoiding excessive scaling from causing the magnification function to fail, thus balancing the magnification effect and system performance.

[0024] Preferably, as an improvement, the renderer type includes Canvas, WebGL, and WASM video renderers.

[0025] Technical benefits: It shields the differences in underlying interfaces of different renderers, can be connected to various video playback architectures, and greatly expands the applicable scenarios.

[0026] Preferably, as an improvement, the hardware-accelerated rendering unit adopts a combined transformation strategy, first adjusting the position of the magnified area through the translate transformation, and then achieving image magnification through the scale transformation, merging the two types of transformation instructions and submitting them to the browser for rendering.

[0027] Technical effect: By combining translation and scaling into a single rendering, the overhead of multiple browser repaints is reduced, and the zoom center position is precisely controlled synchronously, ensuring that the screen displacement and scaling are synchronized without misalignment.

[0028] A video electronic magnification system based on intelligent boundary processing includes: a Magnifier main controller, a Mouse event processing module, a ZoomRect selection component, a boundary processing module, a zoom calculation module, an event management module, and a rendering output module; The Magnifier main controller is the central control hub, used to receive input data and issue scheduling instructions to each module; The Mouse event handling module is used to capture mouse interaction events in real time and parse the mouse coordinate data stream; The ZoomRect selection component is used to receive coordinate data streams, draw a visual zoom selection box in real time, and synchronously send back the original zoom area coordinates and original center point coordinates selected by the user to the Magnifier main controller. The boundary processing module receives the original magnified area coordinates, the original center point coordinates, and the video canvas size parameters. It uses boundary detection logic to determine if a boundary violation occurs. If a boundary violation occurs, it calls the layered boundary constraint algorithm to perform constraint calculations, combines the intelligent center point calculation logic to iteratively offset and correct the center point, and uses adaptive adjustment logic to synchronously correct the scaling parameters. If no boundary violation is detected, it directly outputs the original center point coordinates without adjustment. The scaling calculation module includes a browser environment detection unit, a performance monitoring unit, and a dynamic scaling constraint unit. The browser environment detection unit is used to collect browser visible area size data. The performance monitoring unit collects device CPU load and rendering frame rate performance data in real time. The dynamic scaling constraint unit dynamically calculates the scaling ratio based on the selected area size and adaptively corrects the scaling parameters based on the upper and lower limits of scaling and the real-time performance load. The event management module is used to uniformly register and deregister interactive events, and to clean up listeners and release resources when a component is destroyed. The rendering output module includes a renderer abstraction layer and a hardware-accelerated rendering unit; The renderer abstraction layer receives coordinates and scaling parameters from the Magnifier main controller, has a built-in unified rendering call interface, and automatically identifies the current video underlying renderer type and completes differentiated adaptation. The hardware-accelerated rendering unit receives the coordinates and scaling parameters forwarded by the renderer abstraction layer, constructs a combined transformation matrix based on CSS3Transform, configures the transform-origin parameter to lock the center point after correction and magnification, and enables browser GPU hardware acceleration to complete the rendering of the image.

[0029] An electronic device includes a processor and a memory, the memory storing a computer program, and the processor executing the computer program to implement a multi-adaptive video upscaling method based on intelligent boundary processing and hardware-accelerated rendering.

[0030] A computer-readable storage medium having a computer program stored thereon, the computer program being executed by a processor of a multi-adaptive video upscaling method based on intelligent boundary processing and hardware-accelerated rendering. Attached Figure Description

[0031] Figure 1 This is a flowchart illustrating a video electronic amplification method based on intelligent boundary processing. Figure 2 This is a schematic diagram of the boundary processing flow of a video electronic magnification method based on intelligent boundary processing; Figure 3 This is a schematic diagram of the dynamic scaling control process of a video electronic magnification method based on intelligent boundary processing; Figure 4 This is a schematic diagram of a hardware-accelerated rendering process for a video electronic upscaling method based on intelligent boundary processing. Figure 5 A schematic diagram of a multi-renderer adaptation architecture for a video electronic upscaling method based on intelligent boundary processing; Figure 6 This is a schematic diagram of the event processing flow of a video electronic amplification method based on intelligent boundary processing; Figure 7 This is a schematic diagram of a video electronic amplification system based on intelligent boundary processing. Detailed Implementation

[0032] The following detailed description illustrates the specific implementation method: The basic implementation examples are as follows: Figure 1 As shown, a video electronic magnification method based on intelligent boundary processing includes: S1, through the Mouse event handling module, completes the full-process mouse interaction event collection. Based on the browser's native DOM mouse event system and using event delegation binding, it mounts listeners. During startup, the event management module completes event registration, uniformly mounting mouse listeners to the outer parent container of the video. It predefines four types of event callback functions: handleMouseDown, handleMouseMove, handleMouseUp, and handleMouseLeave. Simultaneously, it caches fixed data such as the video container's DOM size, container page offset, and page scroll offset to avoid performance degradation caused by repeated DOM queries. During operation, it continuously captures the core interaction events: mousedown (mouse down), mousemove (mouse move), mouseup (mouse up), and mouseleave (mouse leave). When mouse interaction is triggered, the corresponding callback function captures the native MouseEvent object carrying coordinate information, distinguishes four types of operation scenarios and marks them with operation status flags, and calculates the original pixel coordinates of the mouse relative to the video container by combining the event viewport coordinates, container offset, and page scroll data. The coordinate out-of-bounds judgment is completed and marked synchronously. Then, the pixel coordinates are converted into normalized scale coordinates adapted to multi-resolution videos. Subsequently, a standardized coordinate data package containing event type, original pixel coordinates, normalized scale coordinates, operation status flags, and video container size is assembled. For the frequently triggered mousemove event, redundant data is filtered by anti-shake throttling, and only the latest coordinate data is retained to reduce transmission overhead. Then, the encapsulated standardized coordinate data stream is asynchronously pushed to the Magnifier main controller, and then forwarded by the Magnifier main controller to the ZoomRect selection component. A single selection operation terminates when the mouse is lifted or moved out of the video container. The Mouse event handling module clears its internal temporary coordinate cache to wait for the next round of selection interaction. When the magnifying glass component is destroyed, the module removes all listener callbacks and clears event bindings through the event management module, thus avoiding memory leaks at the source. The standardized coordinate data stream output by the entire process serves as the underlying coordinate data source, providing unified and standardized coordinate input for the selection box drawing of the ZoomRect selection component, the out-of-bounds calculation of the boundary handling module, and the scaling rendering of the rendering output module.

[0033] The coordinate data stream output by the Mouse event handling module includes the real-time horizontal and vertical coordinates of the mouse relative to the video canvas, as well as mouse operation status indicators (mouse pressed, mouse moved, mouse released, mouse left). After the ZoomRect selection component continuously receives this coordinate data stream, it first distinguishes the interaction stage based on the operation status within the data stream. When the mouse is pressed, it extracts the current coordinates as the starting point of the selection and initializes the rectangle drawing object. When the mouse continues to move, it continuously updates the endpoint coordinates, calculates the left, right, top, and bottom boundaries of the rectangle in real time, and draws a visual magnified selection box with a border and a semi-transparent mask based on the boundary values. At the same time, it calculates the original magnified area's four boundary coordinates and the original center point coordinates corresponding to the currently selected rectangle in real time. During mouse dragging, it continuously synchronizes and caches the latest coordinate data. After the mouse is released and the selection is completed, it locks the final rectangle size and synchronously sends the complete original magnified area coordinates and the original center point coordinates back to the Magnifier main controller. If it receives a reset command from the main controller, it clears the drawing layer and coordinate cache and restores the initial state without a selection box.

[0034] S2, after receiving the original magnified area coordinates, the original center point coordinates, and the video canvas size parameters, such as... Figure 2 As shown, the process first uses boundary detection logic combined with video canvas boundary thresholds to compare the coordinates of the four sides of the magnified area to determine whether the magnified area exceeds the boundary. If a horizontal or vertical unidirectional or bidirectional boundary violation is detected, a layered boundary constraint algorithm is executed. The algorithm locks the horizontal range of the magnified area through horizontal boundary constraints and the vertical range through vertical boundary constraints. Then, through comprehensive boundary processing, the bidirectional constraint conditions are integrated to generate a unified boundary threshold. Subsequently, based on the intelligent calculation logic of the center point, the original center point is used as the starting point for iteration. The center point is repeatedly offset in the reverse direction and the overflow state is checked in combination with the boundary threshold. The iteration continues until the magnified area is completely within the video canvas, obtaining the optimal correction center point without boundary violations. Simultaneously, adaptive adjustment logic is run to match and adapt the scaling ratio according to the center point offset, the selected size, and the remaining visible space of the canvas to avoid image cropping distortion. After the calculation is completed, the correction center point and the corrected scaling parameters are output. If it is determined that the magnified area does not exceed the boundary, the original center point coordinates are directly output. Finally, the module sends the coordinates and scaling parameters back to the Magnifier main controller to provide legal reference parameters for scaling calculation and hardware accelerated rendering.

[0035] S3, after the scaling calculation module receives the size data of the user-selected area, such as Figure 3As shown, the browser environment detection unit first automatically collects the current browser viewport size and basic browser performance parameters to complete the browser environment information collection. Then, the dynamic scaling constraint unit calculates the initial scaling ratio based on the relative size of the selected area, and then superimposes two layers of fixed threshold constraints: limiting the upper scaling limit to 8 times the browser viewport size to avoid rendering stuttering caused by excessive scaling, and setting a lower scaling limit of 0.02 to prevent the scaling function from failing due to an excessively low scaling ratio. Simultaneously, the performance monitoring unit continuously collects real-time performance data such as device CPU load and frame rate, and synchronously feeds it back to the dynamic scaling constraint unit. The dynamic scaling constraint unit executes an adaptive adjustment strategy, combining real-time system load and device hardware performance to perform a secondary correction of the initial scaling ratio. When the performance monitoring unit detects performance degradation scenarios such as a drop in frame rate or excessive CPU load, it automatically lowers the scaling factor and reduces the amount of rendering data to ensure smooth page operation. After all constraint and adaptive correction calculations are completed, the module outputs the final scaling parameters, after upper and lower limit constraints and performance adaptive adjustments, to the Magnifier main controller as the calculation basis for the hardware-accelerated rendering unit to perform image scaling transformations.

[0036] S4, after receiving the coordinates of the correction center point and the final scaling parameters, as follows: Figure 4 , 5As shown, a multi-renderer adaptation mechanism achieves compatibility with multiple video renderers. The core of this mechanism is the renderer abstraction layer within the rendering output module, which completes the entire adaptation logic. The renderer abstraction layer provides a unified rendering operation interface, enabling standardized output of zoom, scale, and movement capabilities, thus reducing the development cost of upper-layer business applications. Internally, it first executes adaptive detection logic to automatically identify whether the current underlying video renderer is Canvas, WebGL, WASM, or another custom renderer. Then, based on the identification result, it executes the corresponding renderer-specific adaptation logic: it performs dedicated rendering optimization for the standard Canvas renderer, reserves a dedicated interface for the WebGL renderer to leverage advanced hardware-accelerated rendering capabilities, and opens an extension interface for connecting third-party custom renderers, thereby shielding the differences in the underlying implementation of different renderers. After completing the differentiated adaptation processing, the renderer abstraction layer forwards the standardized coordinates and scaling parameters to the hardware-accelerated rendering unit to execute the image rendering. The hardware-accelerated rendering unit leverages the hardware acceleration features of CSS3 Transform to efficiently scale and move video images. First, it precisely configures the `transform-origin` parameter to lock the corrected center point of the magnification to ensure positioning accuracy. Then, it executes a combined transformation strategy: using `translate` to adjust the position of the magnified area and `scale` to achieve image magnification. These two types of transformations are merged into a single set of transformation commands and uniformly sent to the browser, where GPU hardware acceleration completes the graphics rendering. Simultaneously, the hardware-accelerated rendering unit employs multiple performance optimization strategies. It adds anti-jitter processing for high-frequency mouse movement events to reduce redundant calculations and rendering overhead; uses a DOM batch caching mechanism to merge DOM update operations and reduce page repainting losses; and uses an event delegation mechanism to uniformly mount listener events to reduce the number of global listeners. The entire rendering process relies on a layered adaptation architecture, hardware acceleration, and multiple performance optimization methods to balance multi-renderer compatibility with the smoothness and efficiency of video magnification interactions.

[0037] S5, such as Figure 6As shown, the event management module coordinates all mouse interaction events, working with the mouse event handling module to cover the entire sequence of events: mouse press, move, release, and leave. It supports smooth dragging and precise displacement of the zoomed-in area, and simultaneously maintains multiple operation status indicators such as selection, movement, and zooming in in real time, synchronizing them to the Magnifier main controller. In terms of user interaction optimization, it links with the ZoomRect selection component to output dynamic real-time operation feedback for the selection box, using CSS transition effects to achieve smooth animations for zooming and dragging displacement. Combined with high-precision coordinate parameters output by the boundary processing module and the scaling calculation module, it achieves precise operation control. It also incorporates memory leak protection logic and a dedicated event cleanup mechanism. At the end of the interaction and the destruction of the magnifying glass component, it actively unregisters all mouse event listeners, simultaneously releasing resources such as DOM nodes and event callback functions, preventing memory leaks caused by the continuous presence of invalid listeners. The entire lifecycle management of event registration, binding, state synchronization, unregistration, and resource release is unified, providing stable and smooth interactive underlying support for the entire video magnifying glass system.

[0038] Through the above five-step modular linkage process, the coordinate data is standardized from the source of interaction. The problem of over-boundary cropping of the zoomed-in image is completely solved by relying on the layered boundary algorithm. The scaling factor is dynamically adjusted in combination with the real-time performance of the device. The rendering abstraction layer is used to achieve universal adaptation of multiple video rendering engines. CSS3 Transform GPU hardware acceleration is used to improve the smoothness of rendering. Finally, resources are released through full lifecycle event management. This effectively solves the defects of traditional web video zooming solutions, such as screen overflow, operation lag, poor compatibility, and long-term memory leaks. It can be stably applied to various Web video business scenarios such as video surveillance, online education, and telemedicine.

[0039] A video electronic magnification system based on intelligent boundary processing, such as Figure 7 As shown, it includes: Magnifier main controller, Mouse event handling module, ZoomRect selection component, boundary processing module, scaling calculation module, event management module and rendering output module; The Magnifier main controller is the central control hub, used to receive input data and issue scheduling instructions to each module; The Mouse event handling module is used to capture mouse interaction events in real time and parse the mouse coordinate data stream; The ZoomRect selection component is used to receive coordinate data streams, draw a visual zoom selection box in real time, and synchronously send back the original zoom area coordinates and original center point coordinates selected by the user to the Magnifier main controller. The boundary processing module receives the original magnified area coordinates, the original center point coordinates, and the video canvas size parameters. It uses boundary detection logic to determine if a boundary violation occurs. If a boundary violation occurs, it calls the layered boundary constraint algorithm to perform constraint calculations, combines the intelligent center point calculation logic to iteratively offset and correct the center point, and uses adaptive adjustment logic to synchronously correct the scaling parameters. If no boundary violation is detected, it directly outputs the original center point coordinates without adjustment. The scaling calculation module includes a browser environment detection unit, a performance monitoring unit, and a dynamic scaling constraint unit. The browser environment detection unit is used to collect browser visible area size data. The performance monitoring unit collects device CPU load and rendering frame rate performance data in real time. The dynamic scaling constraint unit dynamically calculates the scaling ratio based on the selected area size and adaptively corrects the scaling parameters based on the upper and lower limits of scaling and the real-time performance load. The event management module is used to uniformly register and deregister interactive events, and to clean up listeners and release resources when a component is destroyed. The rendering output module includes a renderer abstraction layer and a hardware-accelerated rendering unit; The renderer abstraction layer receives coordinates and scaling parameters from the Magnifier main controller, has a built-in unified rendering call interface, and automatically identifies the current video underlying renderer type and completes differentiated adaptation. The hardware-accelerated rendering unit receives the coordinates and scaling parameters forwarded by the renderer abstraction layer, constructs a combined transformation matrix based on CSS3Transform, configures the transform-origin parameter to lock the center point after correction and magnification, and enables browser GPU hardware acceleration to complete the rendering of the image.

[0040] An electronic device includes a processor and a memory, the memory storing a computer program, and the processor executing the computer program to implement a multi-adaptive video upscaling method based on intelligent boundary processing and hardware-accelerated rendering.

[0041] A computer-readable storage medium having a computer program stored thereon, the computer program being executed by a processor of a multi-adaptive video upscaling method based on intelligent boundary processing and hardware-accelerated rendering.

[0042] The above descriptions are merely embodiments of the present invention, and common knowledge such as specific technical solutions and / or characteristics are not described in detail here. It should be noted that those skilled in the art can make various modifications and improvements without departing from the technical solutions of the present invention, and these should also be considered within the scope of protection of the present invention. These modifications and improvements will not affect the effectiveness of the implementation of the present invention or the practicality of the patent. The scope of protection claimed in this application should be determined by the content of its claims, and the specific embodiments described in the specification can be used to interpret the content of the claims.

Claims

1. A video electronic amplification method based on intelligent boundary processing, characterized in that, include: S1 captures mouse interaction events in real time through the Mouse event handling module and parses the standardized coordinate data stream; The ZoomRect selection component receives coordinate data streams and draws a visual zoom-in selection box in real time, simultaneously outputting the coordinates of the original zoomed-in area and the original center point selected by the user; S2, the boundary processing module receives the original zoomed-in area coordinates, the original center point coordinates, and the video canvas size parameters, and executes the boundary detection logic to determine whether the zoomed-in area exceeds the boundary; if it is determined that it exceeds the boundary, it calls the center point intelligent calculation logic and the layered boundary constraint algorithm to perform bidirectional constraint calculation, and synchronously corrects the center point and scaling parameters through adaptive adjustment logic and outputs them; if it does not exceed the boundary, it directly uses the original center point coordinates for output. S3 collects browser view area size, device CPU load, and rendering frame rate data through the scaling calculation module, and calculates the initial scaling ratio based on the selected area size. Scaling parameters are adaptively adjusted based on scaling upper and lower limits and real-time performance load. S4 automatically identifies the video renderer type and performs differentiated adaptation through the renderer abstraction layer; it constructs a combined transformation matrix based on CSS3 Transform through the hardware accelerated rendering unit, configures transform-origin to lock the center point after correction and magnification, and enables GPU hardware acceleration to complete accurate rendering of video images.

2. The video electronic amplification method based on intelligent boundary processing according to claim 1, characterized in that: The layered boundary constraint algorithm includes horizontal boundary constraints, vertical boundary constraints, and a comprehensive boundary processing algorithm. Horizontal boundary constraints limit the magnified area to not exceed the video canvas horizontally, vertical boundary constraints limit the magnified area to not exceed the video canvas vertically, and comprehensive boundary processing synchronously links horizontal and vertical bidirectional constraints to output the final effective magnified coordinates.

3. The video electronic amplification method based on intelligent boundary processing according to claim 1, characterized in that: The intelligent calculation logic for the center point includes: taking the original center point as the initial value, iteratively offsetting the center point by combining the layer boundary constraint threshold until the magnified area is completely contained within the video canvas, and outputting a corrected center point without exceeding the boundary.

4. The video electronic amplification method based on intelligent boundary processing according to claim 1, characterized in that: In S3, when the performance data is detected to be lower than a preset threshold, the scaling ratio is automatically reduced and the rendering update frequency is reduced.

5. The video electronic amplification method based on intelligent boundary processing according to claim 1, characterized in that: The scaling limits include: the upper scaling limit is 8 times the size of the browser's visible area, and the lower scaling limit is 0.02 times the size of the browser's visible area.

6. The video electronic amplification method based on intelligent boundary processing according to claim 1, characterized in that: The renderer types include Canvas, WebGL, and WASM video renderers.

7. The video electronic amplification method based on intelligent boundary processing according to claim 1, characterized in that: The hardware-accelerated rendering unit adopts a combined transformation strategy. First, it uses the translate transformation to adjust the position of the magnified area, and then uses the scale transformation to magnify the image. The two types of transformation instructions are combined and submitted to the browser for rendering.

8. A video electronic amplification system based on intelligent boundary processing, characterized in that: The video electronic magnification method based on intelligent boundary processing according to any one of claims 1-7 includes: a Magnifier main controller, a Mouse event processing module, a ZoomRect selection component, a boundary processing module, a scaling calculation module, an event management module, and a rendering output module; The Magnifier main controller is the central control hub, used to receive input data and issue scheduling instructions to each module; The Mouse event handling module is used to capture mouse interaction events in real time and parse the mouse coordinate data stream; The ZoomRect selection component is used to receive coordinate data streams, draw a visual zoom selection box in real time, and synchronously send back the original zoom area coordinates and original center point coordinates selected by the user to the Magnifier main controller. The boundary processing module receives the original magnified area coordinates, the original center point coordinates, and the video canvas size parameters. It uses boundary detection logic to determine if a boundary violation occurs. If a boundary violation occurs, it calls the layered boundary constraint algorithm to perform constraint calculations, combines the intelligent center point calculation logic to iteratively offset and correct the center point, and uses adaptive adjustment logic to synchronously correct the scaling parameters. If no boundary violation is detected, it directly outputs the original center point coordinates without adjustment. The scaling calculation module includes a browser environment detection unit, a performance monitoring unit, and a dynamic scaling constraint unit. The browser environment detection unit is used to collect browser visible area size data. The performance monitoring unit collects device CPU load and rendering frame rate performance data in real time. The dynamic scaling constraint unit dynamically calculates the scaling ratio based on the selected area size and adaptively corrects the scaling parameters based on the upper and lower limits of scaling and the real-time performance load. The event management module is used to uniformly register and deregister interactive events, and to clean up listeners and release resources when a component is destroyed. The rendering output module includes a renderer abstraction layer and a hardware-accelerated rendering unit; The renderer abstraction layer receives coordinates and scaling parameters from the Magnifier main controller, has a built-in unified rendering call interface, and automatically identifies the current video underlying renderer type and completes differentiated adaptation. The hardware-accelerated rendering unit receives the coordinates and scaling parameters forwarded by the renderer abstraction layer, constructs a combined transformation matrix based on CSS3Transform, configures the transform-origin parameter to lock the center point after correction and magnification, and enables browser GPU hardware acceleration to complete the rendering of the image.

9. An electronic device, characterized in that: It includes a processor and a memory, the memory storing a computer program, and the processor executing the computer program to implement the multi-adaptive video upscaling method based on intelligent boundary processing and hardware accelerated rendering as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that: It stores a computer program, which is executed by a processor as described in any one of claims 1-7: a multi-adaptive video upscaling method based on intelligent boundary processing and hardware-accelerated rendering.

Images