Refactor canvas size calculation into a separate function and initialize canvas dimensions

- Moved the canvas size calculation logic into a dedicated function `calcCanvasSize`. - Called `calcCanvasSize` to set the initial width and height of the canvas. - Removed duplicate `calcCanvasSize` function definition from the code.
2026-10-16 17:46:17 -08:00 · 2026-02-11 23:03:24 +08:00
1 parent 14807e2633
commit 687a34c6b3
@@ -227,9 +227,29 @@ function artplayerPluginWebsr(option = {
        $canvas.style.top = "50%";
        $canvas.style.left = "50%";
        $canvas.style.transform = "translate(-50%, -50%)";
+        function calcCanvasSize() {
+            const videoElement = art.video;
+            const containerWidth = $player.offsetWidth || 640;
+            const containerHeight = $player.offsetHeight || 360;
+            const videoWidth = videoElement.videoWidth || 640;
+            const videoHeight = videoElement.videoHeight || 360;
+            const aspectRatio = videoWidth / videoHeight;
+            let displayWidth = containerWidth;
+            let displayHeight = containerHeight;
+            if (containerWidth / containerHeight > aspectRatio) displayWidth = containerHeight * aspectRatio;
+            else displayHeight = containerWidth / aspectRatio;
+            return {
+                displayWidth,
+                displayHeight
+            };
+        }
        const upscaler = new (0, _upscalerDefault.default)(option);
        upscaler.init();
        await upscaler.startRealtimeUpscale($video, $canvas, option.networkSize);
+        // 初始化 canvas 显示尺寸
+        const { displayWidth, displayHeight } = calcCanvasSize();
+        $canvas.style.width = displayWidth + "px";
+        $canvas.style.height = displayHeight + "px";
        // 对比模式
        let comparePosition = 50;
        let isDragging = false;
@@ -250,22 +270,6 @@ function artplayerPluginWebsr(option = {
            document.addEventListener("mouseup", handleMouseUp);
            updateCompareMask();
        }
-        function calcCanvasSize() {
-            const videoElement = art.video;
-            const containerWidth = $player.offsetWidth || 640;
-            const containerHeight = $player.offsetHeight || 360;
-            const videoWidth = videoElement.videoWidth || 640;
-            const videoHeight = videoElement.videoHeight || 360;
-            const aspectRatio = videoWidth / videoHeight;
-            let displayWidth = containerWidth;
-            let displayHeight = containerHeight;
-            if (containerWidth / containerHeight > aspectRatio) displayWidth = containerHeight * aspectRatio;
-            else displayHeight = containerWidth / aspectRatio;
-            return {
-                displayWidth,
-                displayHeight
-            };
-        }
        function updateCompareMask() {
            if (option.compare) {
                const { displayWidth, displayHeight } = calcCanvasSize();
@@ -1 +1 @@
-{"mappings":"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 truncated
+{"mappings":"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 truncated
@@ -19,6 +19,23 @@ export default function artplayerPluginWebsr(
        $canvas.style.left = "50%";
        $canvas.style.transform = "translate(-50%, -50%)";

+        function calcCanvasSize() {
+            const videoElement = art.video;
+            const containerWidth = $player.offsetWidth || 640;
+            const containerHeight = $player.offsetHeight || 360;
+            const videoWidth = videoElement.videoWidth || 640;
+            const videoHeight = videoElement.videoHeight || 360;
+            const aspectRatio = videoWidth / videoHeight;
+            let displayWidth = containerWidth;
+            let displayHeight = containerHeight;
+            if (containerWidth / containerHeight > aspectRatio) {
+                displayWidth = containerHeight * aspectRatio;
+            } else {
+                displayHeight = containerWidth / aspectRatio;
+            }
+            return { displayWidth, displayHeight };
+        }
+
        const upscaler = new Upscaler(option);
        upscaler.init();
        await upscaler.startRealtimeUpscale(
@@ -27,6 +44,11 @@ export default function artplayerPluginWebsr(
            option.networkSize,
        );

+        // 初始化 canvas 显示尺寸
+        const { displayWidth, displayHeight } = calcCanvasSize();
+        $canvas.style.width = displayWidth + "px";
+        $canvas.style.height = displayHeight + "px";
+
        // 对比模式
        let comparePosition = 50;
        let isDragging = false;
@@ -50,23 +72,6 @@ export default function artplayerPluginWebsr(
            updateCompareMask();
        }

-        function calcCanvasSize() {
-            const videoElement = art.video;
-            const containerWidth = $player.offsetWidth || 640;
-            const containerHeight = $player.offsetHeight || 360;
-            const videoWidth = videoElement.videoWidth || 640;
-            const videoHeight = videoElement.videoHeight || 360;
-            const aspectRatio = videoWidth / videoHeight;
-            let displayWidth = containerWidth;
-            let displayHeight = containerHeight;
-            if (containerWidth / containerHeight > aspectRatio) {
-                displayWidth = containerHeight * aspectRatio;
-            } else {
-                displayHeight = containerWidth / aspectRatio;
-            }
-            return { displayWidth, displayHeight };
-        }
-
        function updateCompareMask() {
            if (option.compare) {
                const { displayWidth, displayHeight } = calcCanvasSize();