paul/conference
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update templates and styles

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Paul Bokel
2026-04-29 15:21:10 +00:00
parent 3b14155594
commit 335658f2bf
8 changed files with 77 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/attendee/profile.html
+13 -7
View File
@@ -230,6 +230,10 @@ function updateDisplay() {
offsetY = (containerSize - dispH) / 2;
}
// Explicitly set layout dimensions so transform origin centers correctly
preview.style.width = dispW + 'px';
preview.style.height = dispH + 'px';
preview.style.transform = 'translate(' + (translateX + offsetX) + 'px, ' + (translateY + offsetY) + 'px) scale(' + zoomLevel + ')';
}
@@ -288,7 +292,6 @@ function handleFormSubmit(e) {
var imgW = img.naturalWidth;
var imgH = img.naturalHeight;
// Calculate how the image fits in the container (object-fit: cover)
var scale, dispW, dispH, offsetX, offsetY;
if (imgW >= imgH) {
scale = containerSize / imgH;
@@ -304,21 +307,24 @@ function handleFormSubmit(e) {
offsetY = (containerSize - dispH) / 2;
}
// Display: translate(translateX + offsetX, translateY + offsetY) scale(zoomLevel)
// Container pixel (cx, cy) maps to source: sx = (cx - offsetX - translateX) / scale
// So container pixel (0,0) maps to source: srcX = -(offsetX + translateX) / scale
var srcX = -(offsetX + translateX) / scale;
var srcY = -(offsetY + translateY) / scale;
// NEW CROP CALCULATION
// Display: translate(translateX + offsetX, translateY + offsetY) scale(zoomLevel) with transform-origin: center
// Container pixel (cx, cy) maps to element point: (cx - tx - ox) / zoom + (ox + dispW/2)
// Element point maps to source: element_point / scale
// Simplifying: srcX = (cx - tx - ox) / zoom / scale + dispW/2 / scale
var srcX = (0 - translateX - offsetX) / scale / zoomLevel + dispW / 2 / scale;
var srcY = (0 - translateY - offsetY) / scale / zoomLevel + dispH / 2 / scale;
var srcW = containerSize / scale / zoomLevel;
var srcH = containerSize / scale / zoomLevel;
// Clamp to image bounds
// Clamp to image bounds to prevent out-of-bounds transparent drawing
srcX = Math.max(0, Math.min(srcX, imgW - srcW));
srcY = Math.max(0, Math.min(srcY, imgH - srcH));
srcW = Math.min(srcW, imgW - srcX);
srcH = Math.min(srcH, imgH - srcY);
ctx.clearRect(0, 0, 300, 300);
// Draw exactly the visible area scaled up to the 300x300 canvas
ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, 300, 300);
canvas.toBlob(function(blob) {