x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-26 17:01: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

docs/uncompiled/artplayer-plugin-websr/index.js
+20 -16
View File
@@ -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();