x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-27 17:51:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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.
This commit is contained in:
Harvey Zhao committed 2026-02-11 23:03:24 +08:00
1 parent 14807e2633
commit 687a34c6b3
3 files changed
+43 -34
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer-plugin-websr/src/index.js
+22 -17
View File
@@ -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();