diff options
| author | elioat <elioat@tilde.institute> | 2025-03-29 23:39:36 -0400 |
|---|---|---|
| committer | elioat <elioat@tilde.institute> | 2025-03-29 23:39:36 -0400 |
| commit | 494d130ed23a93f83774560abf4a1ad28420644c (patch) | |
| tree | 2997fb9b7e1cfdf44c250cc147387f6c8b72ef60 | |
| parent | 1e8962e1be2b3eb09328b76bb9bc2fa42848a752 (diff) | |
| download | tour-494d130ed23a93f83774560abf4a1ad28420644c.tar.gz | |
*
| -rw-r--r-- | js/leibovitz/index.html | 28 | ||||
| -rw-r--r-- | js/leibovitz/leibovitz.js | 22 |
2 files changed, 33 insertions, 17 deletions
diff --git a/js/leibovitz/index.html b/js/leibovitz/index.html index 1c30335..35cbb13 100644 --- a/js/leibovitz/index.html +++ b/js/leibovitz/index.html @@ -29,47 +29,47 @@ width: 100%; height: 100%; display: flex; - justify-content: center; - align-items: center; + flex-direction: column; background-color: beige; + overflow: hidden; } #canvas { - width: 70%; - height: auto; - max-height: 70vh; + flex: 1; + width: 100%; + height: 100%; object-fit: contain; display: none; background-color: #000; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + margin: 10px; } #controls { - position: absolute; - bottom: 20px; width: 100%; display: flex; justify-content: center; align-items: center; gap: 10px; + padding: 20px; + background-color: rgba(255, 255, 255, 0.8); + box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); } #settings-container { - position: absolute; - top: 20px; - right: 20px; + width: 100%; display: flex; flex-direction: column; gap: 10px; align-items: center; background-color: rgba(255, 255, 255, 0.8); padding: 10px; - border-radius: 8px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - min-width: 200px; + box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1); } .top-controls { display: flex; gap: 10px; align-items: center; + width: 100%; + justify-content: center; } .color-controls { display: flex; @@ -120,6 +120,7 @@ align-items: center; gap: 4px; width: 100%; + max-width: 300px; } .contrast-control label { font-size: 12px; @@ -135,7 +136,6 @@ font-size: 12px; color: #666; } - </style> </head> <body> diff --git a/js/leibovitz/leibovitz.js b/js/leibovitz/leibovitz.js index 73ff7eb..797050f 100644 --- a/js/leibovitz/leibovitz.js +++ b/js/leibovitz/leibovitz.js @@ -99,12 +99,28 @@ function stopCamera() { } function drawVideoProportional() { - // Clear the entire canvas + const videoAspectRatio = video.videoWidth / video.videoHeight; + const canvasAspectRatio = canvas.width / canvas.height; + + let drawWidth, drawHeight; + + if (canvasAspectRatio > videoAspectRatio) { + drawHeight = canvas.height; + drawWidth = videoAspectRatio * drawHeight; + } else { + drawWidth = canvas.width; + drawHeight = drawWidth / videoAspectRatio; + } + + const offsetX = (canvas.width - drawWidth) / 2; + const offsetY = (canvas.height - drawHeight) / 2; + + // Clear the entire canvas with black background ctx.fillStyle = '#000'; ctx.fillRect(0, 0, canvas.width, canvas.height); - // Draw the video content - ctx.drawImage(video, 0, 0, canvas.width, canvas.height); + // Draw the video content centered + ctx.drawImage(video, offsetX, offsetY, drawWidth, drawHeight); } function applyColorTint() { |