// ===== STATE ===== let boothType = 'classic'; let selectedLayout = 4; let selectedFilter = 'none'; let selectedCountdown = 3; let selectedFrame = 'classic'; // classic, minimal-dark, minimal-light let selectedHalftonePreset = 'popart'; // default halftone color let capturedPhotos = []; let currentPhotoIndex = 0; let countdownTimer = null; let cameraStream = null; let goldfishAnimator = null; let settingsGoldfishAnimator = null; let halftonePreviewRAF = null; // requestAnimationFrame ID for halftone preview let halftoneCapRAF = null; // requestAnimationFrame ID for halftone capture view let currentMode = 'camera'; // camera or upload let uploadPhotos = []; let uploadPhotoSources = []; let uploadCurrentSlot = 0; let uploadCropper = null; // DOM Elements let flashOverlay, captureCanvas, stripCanvas; // ===== HALFTONE PRESETS ===== const HALFTONE_PRESETS = { popart: { name: 'Pop Art', bg: '#FFE814', dot: '#D42A1E' }, bw: { name: 'B&W', bg: '#FFFFFF', dot: '#111111' }, blue: { name: 'Blue', bg: '#FFFFFF', dot: '#102169' }, pink: { name: 'Pink', bg: '#FDE8F0', dot: '#C2185B' }, green: { name: 'Green', bg: '#E8F5E9', dot: '#2E4A30' } }; // ===== HALFTONE VIDEO COVER HELPER ===== // Mimics CSS object-fit:cover — crops video center to fill target canvas function drawVideoCover(ctx, video, targetW, targetH, mirror) { const vw = video.videoWidth; const vh = video.videoHeight; if (!vw || !vh) return; const videoRatio = vw / vh; const targetRatio = targetW / targetH; let sx, sy, sw, sh; if (videoRatio > targetRatio) { // Video is wider — crop sides sh = vh; sw = vh * targetRatio; sx = (vw - sw) / 2; sy = 0; } else { // Video is taller — crop top/bottom sw = vw; sh = vw / targetRatio; sx = 0; sy = (vh - sh) / 2; } ctx.save(); if (mirror) { ctx.scale(-1, 1); ctx.drawImage(video, sx, sy, sw, sh, -targetW, 0, targetW, targetH); } else { ctx.drawImage(video, sx, sy, sw, sh, 0, 0, targetW, targetH); } ctx.restore(); } // ===== HALFTONE ALGORITHM ===== // Converts image to halftone dot pattern // ctx: canvas context with the source image already drawn // width/height: canvas dimensions // dotSpacing: distance between dot centers (bigger = bigger dots, more impact) // preset: { bg: '#hex', dot: '#hex' } function applyHalftone(ctx, width, height, dotSpacing, preset) { // 1. Read original pixel data for brightness sampling const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; // 2. Clear canvas with background color ctx.fillStyle = preset.bg; ctx.fillRect(0, 0, width, height); // 3. Draw dots: bigger dot = darker area ctx.fillStyle = preset.dot; const radiusFactor = preset.radiusFactor || 0.55; const gamma = preset.gamma || 1.0; const maxRadius = dotSpacing * radiusFactor; // minRadius as fraction of maxRadius for resolution-independent filtering const minRadiusRatio = preset.minRadius || 0.3; // fraction of maxRadius const minRadius = maxRadius * minRadiusRatio; const halfSpacing = Math.floor(dotSpacing / 2); // Area-average sampling: sample a grid of pixels per cell for better detail // Use 3x3 sample grid (9 points) — good balance between detail and performance const sampleSteps = 3; const sampleStep = dotSpacing / sampleSteps; for (let y = 0; y < height; y += dotSpacing) { for (let x = 0; x < width; x += dotSpacing) { const cx = Math.min(x + halfSpacing, width - 1); const cy = Math.min(y + halfSpacing, height - 1); // Average brightness over sampleSteps x sampleSteps grid within this cell let totalBrightness = 0; let sampleCount = 0; for (let sy = 0; sy < sampleSteps; sy++) { const py = Math.min(Math.floor(y + sy * sampleStep + sampleStep * 0.5), height - 1); for (let sx = 0; sx < sampleSteps; sx++) { const px = Math.min(Math.floor(x + sx * sampleStep + sampleStep * 0.5), width - 1); const i = (py * width + px) * 4; totalBrightness += 0.299 * data[i] + 0.587 * data[i + 1] + 0.114 * data[i + 2]; sampleCount++; } } const brightness = totalBrightness / sampleCount; // Darker → bigger dot (gamma < 1 boosts contrast) const normalized = 1 - brightness / 255; const radius = maxRadius * Math.pow(normalized, gamma); if (radius > minRadius) { ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.fill(); } } } } // ===== BROWSER DETECTION ===== function isSafari() { const ua = navigator.userAgent.toLowerCase(); return ua.indexOf('safari') !== -1 && ua.indexOf('chrome') === -1 && ua.indexOf('android') === -1; } function isIOS() { return /iPad|iPhone|iPod/.test(navigator.userAgent) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1); } // Parse type/count from pretty path /photo-booth/classic/capture/3 or /photo-booth/retro/capture function parseBoothPath() { const path = window.location.pathname || ''; const match = path.match(/\/photo-booth\/(classic|retro|goldfish)\/capture(?:\/([234]))?/); if (match) { const type = match[1]; const count = match[2] ? parseInt(match[2], 10) : (type === 'retro' || type === 'goldfish' ? 4 : 4); return { type: type, count: count }; } return null; } // ===== INITIALIZATION ===== document.addEventListener('DOMContentLoaded', () => { flashOverlay = document.getElementById('flashOverlay'); captureCanvas = document.getElementById('captureCanvas'); stripCanvas = document.getElementById('stripCanvas'); const urlParams = new URLSearchParams(window.location.search); const pathInfo = parseBoothPath(); if (pathInfo) { boothType = pathInfo.type; selectedLayout = pathInfo.count; selectedFrame = urlParams.get('frame') || (boothType === 'retro' ? 'minimal-dark' : 'classic'); } else { const typeParam = (urlParams.get('type') || 'classic').toLowerCase(); boothType = (typeParam === 'retro' || typeParam === 'classic' || typeParam === 'goldfish') ? typeParam : 'classic'; selectedLayout = parseInt(urlParams.get('count')) || 4; selectedFrame = urlParams.get('frame') || 'classic'; // 从 Vintage 选相框进来时带 frame 参数，若 type 丢失则按 retro 处理 const vintageFrames = ['minimal-dark', 'minimal-light', 'heart-dark']; if (!urlParams.get('type') && vintageFrames.includes(selectedFrame)) { boothType = 'retro'; } } if (boothType === 'retro') { selectedLayout = 4; selectedFilter = 'sepia'; } const usePrettyUrl = pathInfo !== null; const backLink = document.getElementById('backLink'); if (boothType === 'retro') { backLink.href = "/es/photo-booth/vintage"; } else { backLink.href = boothType === 'goldfish' ? "/es/photo-booth/classic?type=goldfish" : "/es/photo-booth/classic"; } // 立即根据 URL 的 type 直接更新顶部徽章，避免被其它逻辑覆盖 const badgeEl = document.getElementById('boothBadge'); const nameEl = document.getElementById('boothName'); if (badgeEl && nameEl) { badgeEl.className = 'booth-badge ' + boothType; const L = window.LiCoWaBoothCaptureLocale || {}; nameEl.textContent = boothType === 'retro' ? (L.vintage || 'Vintage') : boothType === 'goldfish' ? (L.goldfish_studio || 'Goldfish Studio') : (L.classic || 'Classic'); const icon = badgeEl.querySelector('.icon'); if (icon) icon.innerHTML = boothType === 'retro' ? '' : boothType === 'goldfish' ? '' : ''; } // Update labels updateLabels(); // 完整更新设置区与拍摄步骤 UI（滤镜、相框等） updateSettingsUI(); initializeCaptureUI(); // 先更新完 UI 再显示设置区，避免先闪 Classic 再切 Vintage const settingsEl = document.querySelector('.settings-container'); if (settingsEl) { requestAnimationFrame(() => { settingsEl.classList.add('ready'); }); } // 短延迟再应用一次，防止被其它脚本或异步逻辑覆盖 setTimeout(() => { if (badgeEl && nameEl) { badgeEl.className = 'booth-badge ' + boothType; const L = window.LiCoWaBoothCaptureLocale || {}; nameEl.textContent = boothType === 'retro' ? (L.vintage || 'Vintage') : boothType === 'goldfish' ? (L.goldfish_studio || 'Goldfish Studio') : (L.classic || 'Classic'); const icon = badgeEl.querySelector('.icon'); if (icon) icon.innerHTML = boothType === 'retro' ? '' : boothType === 'goldfish' ? '' : ''; } updateSettingsUI(); initializeCaptureUI(); }, 50); // 先尝试自动请求相机；权限被拒或需用户手势时在 startCameraPreview 内会显示「启用相机」按钮 startCameraPreview(); }); // ===== SETTINGS UI ===== function updateSettingsUI() { const badge = document.getElementById('boothBadge'); const name = document.getElementById('boothName'); const classicFilters = document.getElementById('classicFilters'); const retroFilters = document.getElementById('retroFilters'); const goldfishBanner = document.getElementById('goldfishBanner'); const goldfishOverlay = document.getElementById('settingsGoldfishOverlay'); const scratchOverlay = document.getElementById('scratchOverlay'); const startBtn = document.getElementById('startBtn'); const cameraContainer = document.getElementById('cameraContainer'); // Reset badge.className = 'booth-badge'; classicFilters.classList.add('hidden'); retroFilters.classList.add('hidden'); goldfishBanner.classList.add('hidden'); goldfishOverlay.classList.add('hidden'); scratchOverlay.classList.add('hidden'); startBtn.classList.remove('retro'); cameraContainer.classList.remove('retro'); switch(boothType) { case 'classic': badge.classList.add('classic'); name.textContent = (window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.classic) || 'Classic'; badge.querySelector('.icon').innerHTML = ''; classicFilters.classList.remove('hidden'); break; case 'retro': badge.classList.add('retro'); name.textContent = (window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.vintage) || 'Vintage'; badge.querySelector('.icon').innerHTML = ''; retroFilters.classList.remove('hidden'); scratchOverlay.classList.remove('hidden'); // Show scratch overlay startBtn.classList.add('retro'); // Change button color cameraContainer.classList.add('retro'); // Change to 3:4 aspect ratio applyFilterToPreview(); break; case 'goldfish': badge.classList.add('goldfish'); name.textContent = (window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.goldfish_studio) || 'Goldfish'; badge.querySelector('.icon').innerHTML = ''; goldfishBanner.classList.remove('hidden'); goldfishOverlay.classList.remove('hidden'); break; } } function updateLabels() { document.getElementById('layoutLabel').textContent = selectedLayout + ' ' + (window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.photos_count || 'photos'); document.getElementById('photoCountLabel').textContent = selectedLayout + ' ' + (window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.photos_count || 'photos'); } // Show camera enable prompt for Safari/iOS function showCameraEnablePrompt() { const placeholder = document.getElementById('cameraPlaceholder'); const safariHint = document.getElementById('safariHint'); const cameraIcon = document.getElementById('cameraIcon'); const promptText = document.getElementById('cameraPromptText'); placeholder.classList.remove('hidden'); safariHint.classList.remove('hidden'); promptText.textContent = (window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.tap_to_enable_camera) || 'Tap to Enable Camera'; cameraIcon.className = 'fas fa-camera'; } async function startCameraPreview() { const placeholder = document.getElementById('cameraPlaceholder'); const video = document.getElementById('previewFeed'); try { cameraStream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'user', width: { ideal: 1280 }, height: { ideal: 720 } }, audio: false }); video.srcObject = cameraStream; video.classList.remove('hidden'); placeholder.classList.add('hidden'); video.onloadedmetadata = () => { video.play().catch(err => console.log('Video play error:', err)); // Initialize goldfish preview if in goldfish mode if (boothType === 'goldfish' && typeof GoldfishAnimator !== 'undefined') { const overlay = document.getElementById('settingsGoldfishOverlay'); if (overlay) { setTimeout(() => { settingsGoldfishAnimator = new GoldfishAnimator(overlay); settingsGoldfishAnimator.start(); }, 100); } } // Start halftone preview if halftone filter is selected if (selectedFilter === 'halftone') { setTimeout(() => startHalftoneSettingsPreview(), 200); } }; } catch (err) { console.error('Camera access error:', err); video.classList.add('hidden'); placeholder.classList.remove('hidden'); // 权限被拒或需用户手势时显示「启用相机」按钮，其余错误显示通用错误 if (err.name === 'NotAllowedError' || err.name === 'PermissionDeniedError' || err.name === 'SecurityError') { showCameraEnablePrompt(); } else { showStep('step-error'); } } } function selectCountdown(el) { document.querySelectorAll('.countdown-btn').forEach(c => c.classList.remove('selected')); el.classList.add('selected'); selectedCountdown = parseInt(el.dataset.time); } function selectFilter(el) { document.querySelectorAll('#classicFilters .filter-btn').forEach(p => p.classList.remove('active')); el.classList.add('active'); selectedFilter = el.dataset.filter; applyFilterToPreview(); if (currentMode === 'upload') { reapplySelectedUploadSlot(); } } function selectRetroFilter(el) { document.querySelectorAll('#retroFilters .filter-btn').forEach(o => o.classList.remove('active')); el.classList.add('active'); selectedFilter = el.dataset.filter; // Show/hide halftone presets panel const presetsPanel = document.getElementById('halftonePresets'); if (selectedFilter === 'halftone') { presetsPanel.classList.remove('hidden'); } else { presetsPanel.classList.add('hidden'); } // Toggle scratch overlay visibility (hide when halftone is active) const scratchOverlay = document.getElementById('scratchOverlay'); if (scratchOverlay) { if (selectedFilter === 'halftone') { scratchOverlay.classList.add('hidden'); } else if (boothType === 'retro') { scratchOverlay.classList.remove('hidden'); } } applyFilterToPreview(); if (currentMode === 'upload') { reapplySelectedUploadSlot(); } } function applyFilterToPreview() { const video = document.getElementById('previewFeed'); video.className = ''; if (selectedFilter === 'halftone') { // For halftone, we don't use CSS filters on video — we use canvas overlay startHalftoneSettingsPreview(); } else { stopHalftoneSettingsPreview(); if (selectedFilter && selectedFilter !== 'none') { video.classList.add('filter-' + selectedFilter); } } } // ===== HALFTONE PRESET SELECTION ===== function selectHalftonePreset(el) { document.querySelectorAll('.halftone-preset-btn').forEach(b => b.classList.remove('active')); el.classList.add('active'); selectedHalftonePreset = el.dataset.preset; // Preview updates automatically via the render loop if (currentMode === 'upload' && selectedFilter === 'halftone') { reapplySelectedUploadSlot(); } } // ===== HALFTONE REAL-TIME PREVIEW (Settings Page) ===== function startHalftoneSettingsPreview() { stopHalftoneSettingsPreview(); // Stop any existing loop const video = document.getElementById('previewFeed'); const overlay = document.getElementById('halftonePreviewCanvas'); const container = document.getElementById('cameraContainer'); if (!overlay || !video || !container) return; // Remove CSS filters from video since halftone takes over video.className = ''; // Create offscreen canvas (will be sized on first ready frame) const offscreen = document.createElement('canvas'); const offCtx = offscreen.getContext('2d'); const ctx = overlay.getContext('2d'); overlay.classList.remove('hidden'); let sized = false; let W = 0, H = 0; function render() { if (video.readyState < 2) { halftonePreviewRAF = requestAnimationFrame(render); return; } // On first ready frame, read actual container dimensions × render scale if (!sized) { const renderScale = Math.max(2, window.devicePixelRatio || 1); const cssW = container.clientWidth || 375; const cssH = container.clientHeight || 500; W = Math.round(cssW * renderScale); H = Math.round(cssH * renderScale); offscreen.width = W; offscreen.height = H; overlay.width = W; overlay.height = H; sized = true; } // Draw video frame with correct aspect ratio (mirrored, object-fit:cover) drawVideoCover(offCtx, video, W, H, true); // Apply halftone — dotSpacing scales with render ratio; preset can override base spacing const renderScale = Math.max(2, window.devicePixelRatio || 1); const preset = HALFTONE_PRESETS[selectedHalftonePreset]; const baseDotSpacing = preset.dotSpacing || 3; applyHalftone(offCtx, W, H, Math.round(baseDotSpacing * renderScale), preset); // Direct copy ctx.drawImage(offscreen, 0, 0); halftonePreviewRAF = requestAnimationFrame(render); } render(); } function stopHalftoneSettingsPreview() { if (halftonePreviewRAF) { cancelAnimationFrame(halftonePreviewRAF); halftonePreviewRAF = null; } const overlay = document.getElementById('halftonePreviewCanvas'); if (overlay) overlay.classList.add('hidden'); } // ===== HALFTONE REAL-TIME PREVIEW (Capture Page) ===== function startHalftoneCapPreview() { stopHalftoneCapPreview(); const video = document.getElementById('cameraFeed'); const overlay = document.getElementById('halftoneCapCanvas'); const viewfinder = document.getElementById('viewfinder'); if (!overlay || !video || !viewfinder) return; // Create offscreen canvas (will be sized on first ready frame) const offscreen = document.createElement('canvas'); const offCtx = offscreen.getContext('2d'); const ctx = overlay.getContext('2d'); overlay.classList.remove('hidden'); let sized = false; let W = 0, H = 0; function render() { if (video.readyState < 2) { halftoneCapRAF = requestAnimationFrame(render); return; } // On first ready frame, read actual viewfinder dimensions × render scale if (!sized) { const renderScale = Math.max(2, window.devicePixelRatio || 1); const cssW = viewfinder.clientWidth || 480; const cssH = viewfinder.clientHeight || 640; W = Math.round(cssW * renderScale); H = Math.round(cssH * renderScale); offscreen.width = W; offscreen.height = H; overlay.width = W; overlay.height = H; sized = true; } // Draw video frame with correct aspect ratio (mirrored, object-fit:cover) drawVideoCover(offCtx, video, W, H, true); // Apply halftone — dotSpacing scales with render ratio; preset can override base spacing const renderScale = Math.max(2, window.devicePixelRatio || 1); const preset = HALFTONE_PRESETS[selectedHalftonePreset]; const baseDotSpacing = preset.dotSpacing || 3; applyHalftone(offCtx, W, H, Math.round(baseDotSpacing * renderScale), preset); // Direct copy ctx.drawImage(offscreen, 0, 0); halftoneCapRAF = requestAnimationFrame(render); } render(); } function stopHalftoneCapPreview() { if (halftoneCapRAF) { cancelAnimationFrame(halftoneCapRAF); halftoneCapRAF = null; } const overlay = document.getElementById('halftoneCapCanvas'); if (overlay) overlay.classList.add('hidden'); } // ===== MODE SWITCHER ===== function switchMode(mode) { currentMode = mode; const cameraBtn = document.getElementById('modeCameraBtn'); const uploadBtn = document.getElementById('modeUploadBtn'); const cameraContainer = document.getElementById('cameraContainer'); const uploadContainer = document.getElementById('uploadContainer'); const countdownRow = document.querySelector('.countdown-row'); const startBtn = document.getElementById('startBtn'); if (mode === 'camera') { cameraBtn.classList.add('active'); uploadBtn.classList.remove('active'); cameraContainer.classList.remove('hidden'); uploadContainer.classList.add('hidden'); countdownRow.style.display = ''; startBtn.classList.remove('upload-mode'); startBtn.innerHTML = '' + ((window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.start_capture) || 'Start Capture') + '' + selectedLayout + ' ' + ((window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.photos_count) || 'photos') + ''; startBtn.disabled = false; // Cleanup upload state cleanupUploadState(); startCameraPreview(); } else { cameraBtn.classList.remove('active'); uploadBtn.classList.add('active'); cameraContainer.classList.add('hidden'); uploadContainer.classList.remove('hidden'); countdownRow.style.display = 'none'; startBtn.classList.add('upload-mode'); startBtn.classList.remove('retro'); startBtn.innerHTML = '' + ((window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.upload_photos_to_continue) || 'Upload %s photos to continue').replace('%s', selectedLayout) + ''; startBtn.disabled = true; stopHalftoneSettingsPreview(); if (cameraStream) { cameraStream.getTracks().forEach(track => track.stop()); cameraStream = null; } initUploadUI(); } } // ===== UPLOAD: INIT ===== function initUploadUI() { uploadPhotos = new Array(selectedLayout).fill(null); uploadPhotoSources = new Array(selectedLayout).fill(null); uploadCurrentSlot = 0; // Build thumbnail strip const strip = document.getElementById('uploadThumbStrip'); let html = ''; for (let i = 0; i < selectedLayout; i++) { html += '

' + (i + 1) + '

'; } strip.innerHTML = html; // Reset UI const dz = document.getElementById('uploadDropzone'); dz.classList.remove('hidden'); if (boothType === 'retro') { dz.classList.add('retro'); } else { dz.classList.remove('retro'); } document.getElementById('uploadCropContainer').classList.add('hidden'); document.getElementById('uploadCropActions').style.display = 'none'; updateUploadProgressUI(); setupUploadDropzone(); } function cleanupUploadState() { if (uploadCropper) { uploadCropper.destroy(); uploadCropper = null; } uploadPhotos = []; uploadPhotoSources = []; uploadCurrentSlot = 0; } // ===== UPLOAD: DROPZONE ===== function setupUploadDropzone() { const dz = document.getElementById('uploadDropzone'); const fi = document.getElementById('uploadFileInput'); // Remove old listeners by cloning const newDz = dz.cloneNode(true); dz.parentNode.replaceChild(newDz, dz); const newFi = newDz.querySelector('#uploadFileInput'); newDz.addEventListener('click', () => newFi.click()); newDz.addEventListener('dragover', (e) => { e.preventDefault(); newDz.classList.add('drag-over'); }); newDz.addEventListener('dragleave', () => newDz.classList.remove('drag-over')); newDz.addEventListener('drop', (e) => { e.preventDefault(); newDz.classList.remove('drag-over'); if (e.dataTransfer.files.length > 0) handleUploadFile(e.dataTransfer.files[0]); }); newFi.addEventListener('change', (e) => { if (e.target.files.length > 0) handleUploadFile(e.target.files[0]); newFi.value = ''; }); } // ===== UPLOAD: FILE HANDLING ===== function handleUploadFile(file) { if (!file.type.startsWith('image/')) return; const reader = new FileReader(); reader.onload = (e) => showUploadCropper(e.target.result); reader.readAsDataURL(file); } function showUploadCropper(src) { const dz = document.getElementById('uploadDropzone'); const cc = document.getElementById('uploadCropContainer'); const actions = document.getElementById('uploadCropActions'); const img = document.getElementById('uploadCropImage'); dz.classList.add('hidden'); cc.classList.remove('hidden'); actions.style.display = ''; img.src = src; if (uploadCropper) uploadCropper.destroy(); const aspectRatio = boothType === 'goldfish' ? 1 : (boothType === 'retro' ? 3 / 4 : 4 / 3); uploadCropper = new Cropper(img, { aspectRatio: aspectRatio, viewMode: 1, dragMode: 'move', autoCropArea: 1, responsive: true, background: false, guides: true, highlight: true, }); } function cancelUploadCrop() { if (uploadCropper) { uploadCropper.destroy(); uploadCropper = null; } document.getElementById('uploadCropContainer').classList.add('hidden'); document.getElementById('uploadCropActions').style.display = 'none'; document.getElementById('uploadDropzone').classList.remove('hidden'); } function confirmUploadCrop() { if (!uploadCropper) return; let canvas = uploadCropper.getCroppedCanvas({ width: boothType === 'retro' ? 600 : 800, height: boothType === 'goldfish' ? 800 : (boothType === 'retro' ? 800 : 600), imageSmoothingEnabled: true, imageSmoothingQuality: 'high', }); const originalDataURL = canvas.toDataURL('image/png'); // Apply filter if (selectedFilter === 'halftone') { const viewfinder = document.getElementById('viewfinder'); const vfW = viewfinder.clientWidth || 480; const vfH = viewfinder.clientHeight || 640; const renderScale = Math.max(2, window.devicePixelRatio || 1); const htCanvas = document.createElement('canvas'); htCanvas.width = Math.round(vfW * renderScale); htCanvas.height = Math.round(vfH * renderScale); const htCtx = htCanvas.getContext('2d'); htCtx.drawImage(canvas, 0, 0, htCanvas.width, htCanvas.height); const preset = HALFTONE_PRESETS[selectedHalftonePreset]; const baseDotSpacing = preset.dotSpacing || 3; const dotSpacing = Math.round(baseDotSpacing * renderScale); applyHalftone(htCtx, htCanvas.width, htCanvas.height, dotSpacing, preset); canvas = htCanvas; } else if (selectedFilter && selectedFilter !== 'none') { const ctx = canvas.getContext('2d'); applyUploadFilterToCanvas(ctx, canvas.width, canvas.height); } const dataURL = selectedFilter === 'halftone' ? canvas.toDataURL('image/png') : canvas.toDataURL('image/jpeg', 0.92); uploadPhotoSources[uploadCurrentSlot] = originalDataURL; uploadPhotos[uploadCurrentSlot] = dataURL; updateUploadThumb(uploadCurrentSlot, dataURL); uploadCropper.destroy(); uploadCropper = null; document.getElementById('uploadCropContainer').classList.add('hidden'); document.getElementById('uploadCropActions').style.display = 'none'; // Auto-advance to next empty slot const nextEmpty = uploadPhotos.findIndex((p, i) => p === null && i > uploadCurrentSlot); if (nextEmpty !== -1) { uploadCurrentSlot = nextEmpty; } else { const firstEmpty = uploadPhotos.findIndex(p => p === null); if (firstEmpty !== -1) uploadCurrentSlot = firstEmpty; } updateUploadProgressUI(); document.getElementById('uploadDropzone').classList.remove('hidden'); } // ===== UPLOAD: SLOT SELECTION ===== function selectUploadSlot(index) { if (uploadCropper) cancelUploadCrop(); uploadCurrentSlot = index; updateUploadProgressUI(); } // ===== UPLOAD: UI UPDATES ===== function updateUploadThumb(index, dataURL) { const thumb = document.querySelector('.upload-thumb-item[data-index="' + index + '"]'); if (!thumb) return; thumb.innerHTML = ' Photo ' + (index + 1) + '

'; thumb.classList.add('filled'); thumb.classList.remove('just-filled'); void thumb.offsetWidth; thumb.classList.add('just-filled'); } function updateUploadProgressUI() { const filled = uploadPhotos.filter(p => p !== null).length; // Thumbs active state document.querySelectorAll('.upload-thumb-item').forEach((el) => { el.classList.toggle('active', parseInt(el.dataset.index) === uploadCurrentSlot); }); // Start button state and text const startBtn = document.getElementById('startBtn'); if (filled < selectedLayout) { const remaining = selectedLayout - filled; startBtn.innerHTML = '' + (((window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.upload_photos_to_continue) || "Sube %s fotos para continuar").replace('%s', remaining)) + ''; startBtn.disabled = true; } else { startBtn.innerHTML = '' + ((window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.generate_strip) || "Generar tira") + '' + (((window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.ready_count) || "%s/%s listas").replace('%s', filled).replace('%s', selectedLayout)) + ''; startBtn.disabled = false; } } // ===== UPLOAD: FILTER ===== function applyUploadFilterToCanvas(ctx, width, height) { const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { const r = data[i], g = data[i + 1], b = data[i + 2]; if (selectedFilter === 'bw') { const gray = 0.299 * r + 0.587 * g + 0.114 * b; data[i] = gray; data[i + 1] = gray; data[i + 2] = gray; } else if (selectedFilter === 'sepia') { data[i] = Math.min(255, 0.393 * r + 0.769 * g + 0.189 * b); data[i + 1] = Math.min(255, 0.349 * r + 0.686 * g + 0.168 * b); data[i + 2] = Math.min(255, 0.272 * r + 0.534 * g + 0.131 * b); } else if (selectedFilter === 'vivid') { const f = 1.4; data[i] = Math.min(255, Math.max(0, 128 + (r - 128) * f)); data[i + 1] = Math.min(255, Math.max(0, 128 + (g - 128) * f)); data[i + 2] = Math.min(255, Math.max(0, 128 + (b - 128) * f)); } else if (selectedFilter === 'vintage') { data[i] = Math.min(255, 0.35 * r + 0.65 * g + 0.17 * b); data[i + 1] = Math.min(255, 0.30 * r + 0.55 * g + 0.15 * b); data[i + 2] = Math.min(255, 0.25 * r + 0.45 * g + 0.12 * b); } else if (selectedFilter === 'soft') { const f = 0.95, br = 15; data[i] = Math.min(255, Math.max(0, 128 + (r - 128) * f + br)); data[i + 1] = Math.min(255, Math.max(0, 128 + (g - 128) * f + br)); data[i + 2] = Math.min(255, Math.max(0, 128 + (b - 128) * f + br)); } else if (selectedFilter === 'noir') { const gray = 0.299 * r + 0.587 * g + 0.114 * b; const adj = Math.min(255, Math.max(0, 128 + (gray - 128) * 1.3 - 10)); data[i] = adj; data[i + 1] = adj; data[i + 2] = adj; } } ctx.putImageData(imageData, 0, 0); } function replaceUploadSlot(index) { if (uploadCropper) cancelUploadCrop(); uploadCurrentSlot = index; updateUploadProgressUI(); const fileInput = document.getElementById('uploadFileInput'); if (fileInput) { fileInput.click(); } } function reapplySelectedUploadSlot() { const source = uploadPhotoSources[uploadCurrentSlot]; if (!source) { return; } const index = uploadCurrentSlot; const img = new Image(); img.onload = () => { let canvas = document.createElement('canvas'); canvas.width = boothType === 'retro' ? 600 : 800; canvas.height = boothType === 'goldfish' ? 800 : (boothType === 'retro' ? 800 : 600); const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); if (selectedFilter === 'halftone') { const renderScale = Math.max(2, window.devicePixelRatio || 1); const htCanvas = document.createElement('canvas'); htCanvas.width = Math.round(canvas.width * renderScale); htCanvas.height = Math.round(canvas.height * renderScale); const htCtx = htCanvas.getContext('2d'); htCtx.drawImage(canvas, 0, 0, htCanvas.width, htCanvas.height); const preset = HALFTONE_PRESETS[selectedHalftonePreset]; const baseDotSpacing = preset.dotSpacing || 3; applyHalftone(htCtx, htCanvas.width, htCanvas.height, Math.round(baseDotSpacing * renderScale), preset); canvas = htCanvas; } else if (selectedFilter && selectedFilter !== 'none') { applyUploadFilterToCanvas(ctx, canvas.width, canvas.height); } const dataURL = selectedFilter === 'halftone' ? canvas.toDataURL('image/png') : selectedFilter && selectedFilter !== 'none' ? canvas.toDataURL('image/jpeg', 0.92) : source; uploadPhotos[index] = dataURL; updateUploadThumb(index, dataURL); updateUploadProgressUI(); }; img.src = source; } // ===== BEGIN CAPTURE (从设置切换到拍摄) ===== function beginCapture() { // Upload mode: use uploaded photos directly if (currentMode === 'upload') { capturedPhotos = uploadPhotos.slice(); finishCapture(); return; } // Stop settings goldfish animator if (settingsGoldfishAnimator) { settingsGoldfishAnimator.stop(); settingsGoldfishAnimator = null; } // Initialize capture UI initializeCaptureUI(); // Transfer camera stream to capture view const captureVideo = document.getElementById('cameraFeed'); captureVideo.srcObject = cameraStream; // Apply CSS filter (skip for halftone — it uses canvas overlay instead) if (selectedFilter && selectedFilter !== 'none' && selectedFilter !== 'halftone') { captureVideo.classList.add(`filter-${selectedFilter}`); } // Wait for video to be ready captureVideo.onloadedmetadata = () => { captureVideo.play().catch(err => console.log('Video play error:', err)); }; // Show capture step showStep('step-capture'); // Set strip date const dateEl = document.getElementById('stripDate'); if (dateEl) { const now = new Date(); dateEl.textContent = now.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase(); } // Initialize goldfish overlay if in goldfish mode if (boothType === 'goldfish' && typeof GoldfishAnimator !== 'undefined') { const goldfishLayer = document.getElementById('goldfishLayer'); if (goldfishLayer) { goldfishLayer.classList.remove('hidden'); setTimeout(() => { goldfishAnimator = new GoldfishAnimator(goldfishLayer); goldfishAnimator.start(); }, 100); } } // Show scratch overlay for retro mode (but not for halftone which has its own visual) if (boothType === 'retro' && selectedFilter !== 'halftone') { const captureScratch = document.getElementById('captureScratchOverlay'); if (captureScratch) { captureScratch.classList.remove('hidden'); } } // Start halftone real-time preview on capture page if (selectedFilter === 'halftone') { startHalftoneCapPreview(); // 立即启动拍摄页 canvas setTimeout(() => stopHalftoneSettingsPreview(), 100); // 等拍摄页 canvas 就绪后再隐藏设置页的 } // Start countdown after a brief delay setTimeout(() => { startPhotoCountdown(); }, 1500); } function initializeCaptureUI() { const stripPreview = document.getElementById('stripPreview'); const boothIndicator = document.getElementById('boothIndicator'); const boothTypeName = document.getElementById('boothTypeName'); const regularSlots = document.getElementById('regularSlots'); const photoGrid = document.getElementById('photoGrid'); const viewfinder = document.getElementById('viewfinder'); // Update booth indicator boothIndicator.className = 'booth-indicator ' + boothType; // Update strip preview based on type stripPreview.className = 'strip-preview'; // Update viewfinder aspect ratio for retro viewfinder.classList.remove('retro'); switch(boothType) { case 'classic': boothTypeName.textContent = (window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.classic) || 'Classic'; boothIndicator.querySelector('i').className = 'fas fa-camera'; initClassicPreview(); break; case 'retro': boothTypeName.textContent = (window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.vintage) || 'Vintage'; boothIndicator.querySelector('i').className = 'fas fa-film'; // Use minimal frame style based on selectedFrame stripPreview.classList.add(selectedFrame); viewfinder.classList.add('retro'); initRetroPreview(); break; case 'goldfish': boothTypeName.textContent = (window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.goldfish_studio) || 'Goldfish Studio'; boothIndicator.querySelector('i').className = 'fas fa-fish'; stripPreview.classList.add('goldfish'); initGoldfishPreview(); break; } // Update total photos display const totalPhotos = document.getElementById('totalPhotos'); if (totalPhotos) totalPhotos.textContent = selectedLayout; } function initClassicPreview() { const regularSlots = document.getElementById('regularSlots'); regularSlots.innerHTML = ''; for (let i = 0; i < selectedLayout; i++) { const slot = document.createElement('div'); slot.className = 'strip-slot'; slot.dataset.slot = i; slot.textContent = i + 1; regularSlots.appendChild(slot); } document.querySelector('.strip-footer').classList.remove('hidden'); } function initRetroPreview() { const stripPreview = document.getElementById('stripPreview'); const regularSlots = document.getElementById('regularSlots'); // No film holes, no footer for retro modes document.querySelector('.strip-footer').classList.add('hidden'); regularSlots.innerHTML = ''; if (selectedFrame === 'heart-dark') { // Heart frame: square slots with heart clip-path for (let i = 0; i < selectedLayout; i++) { const slot = document.createElement('div'); slot.className = 'strip-slot'; slot.dataset.slot = i; slot.textContent = i + 1; regularSlots.appendChild(slot); } } else { // Minimal frames: standard rectangular slots for (let i = 0; i < selectedLayout; i++) { const slot = document.createElement('div'); slot.className = 'strip-slot'; slot.dataset.slot = i; slot.textContent = i + 1; regularSlots.appendChild(slot); } } } function initGoldfishPreview() { const stripPreview = document.getElementById('stripPreview'); const regularSlots = document.getElementById('regularSlots'); const photoGrid = document.getElementById('photoGrid'); regularSlots.classList.add('hidden'); photoGrid.classList.remove('hidden'); stripPreview.querySelector('.brand-top').classList.remove('hidden'); stripPreview.querySelector('.brand-bottom').classList.remove('hidden'); document.querySelector('.strip-footer').classList.add('hidden'); const now = new Date(); const dateStr = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`; document.getElementById('goldfishDate').textContent = dateStr; photoGrid.innerHTML = ''; for (let i = 0; i < selectedLayout; i++) { const slot = document.createElement('div'); slot.className = 'strip-slot'; slot.dataset.slot = i; slot.textContent = i + 1; photoGrid.appendChild(slot); } } // ===== STEP NAVIGATION ===== function showStep(stepId) { document.querySelectorAll('.step-container').forEach(el => { el.classList.remove('active'); }); document.getElementById(stepId)?.classList.add('active'); } // ===== CAPTURE FLOW ===== function startPhotoCountdown() { let count = selectedCountdown || 3; const countdownDisplay = document.getElementById('countdownDisplay'); countdownDisplay.textContent = count; countdownDisplay.classList.add('active'); const timerEl = document.getElementById('autoTimer'); countdownTimer = setInterval(() => { count--; if (count > 0) { countdownDisplay.textContent = count; countdownDisplay.classList.remove('active'); setTimeout(() => countdownDisplay.classList.add('active'), 50); if (timerEl) timerEl.textContent = count; } else { clearInterval(countdownTimer); countdownDisplay.classList.remove('active'); takePhoto(); } }, 1000); } function takePhoto() { // Flash effect flashOverlay.classList.add('flash-active'); setTimeout(() => flashOverlay.classList.remove('flash-active'), 300); const video = document.getElementById('cameraFeed'); const canvas = captureCanvas; const ctx = canvas.getContext('2d'); const viewfinder = document.getElementById('viewfinder'); // 确定目标宽高比（与取景框一致） const vfW = viewfinder.clientWidth || 480; const vfH = viewfinder.clientHeight || 640; const targetRatio = vfW / vfH; if (selectedFilter === 'halftone') { // 半调模式：使用与实时预览完全相同的 canvas 尺寸和 dotSpacing， // 确保拍照结果与预览视觉一致（避免额外放大导致对比度降低、网点偏密） const renderScale = Math.max(2, window.devicePixelRatio || 1); canvas.width = Math.round(vfW * renderScale); canvas.height = Math.round(vfH * renderScale); drawVideoCover(ctx, video, canvas.width, canvas.height, true); const preset = HALFTONE_PRESETS[selectedHalftonePreset]; const baseDotSpacing = preset.dotSpacing || 3; const dotSpacing = Math.round(baseDotSpacing * renderScale); applyHalftone(ctx, canvas.width, canvas.height, dotSpacing, preset); } else { // 非半调：按视频原始分辨率计算输出尺寸 const vw = video.videoWidth || 640; const vh = video.videoHeight || 480; if (vw / vh > targetRatio) { canvas.height = vh; canvas.width = Math.round(vh * targetRatio); } else { canvas.width = vw; canvas.height = Math.round(vw / targetRatio); } drawVideoCover(ctx, video, canvas.width, canvas.height, true); if (selectedFilter && selectedFilter !== 'none') { applyFilterToCanvas(ctx, canvas.width, canvas.height); } } // Note: Scratch effect is now only applied once when generating the final strip // to match the CSS preview exactly and avoid effect stacking // Composite goldfish on top if (boothType === 'goldfish' && goldfishAnimator) { goldfishAnimator.drawToCanvas(ctx, canvas.width, canvas.height); } const imageData = selectedFilter === 'halftone' ? canvas.toDataURL('image/png') : canvas.toDataURL('image/jpeg', 0.9); capturedPhotos.push(imageData); updatePreviewSlot(currentPhotoIndex, imageData); currentPhotoIndex++; const currentPhotoEl = document.getElementById('currentPhoto'); if (currentPhotoEl) currentPhotoEl.textContent = Math.min(currentPhotoIndex + 1, selectedLayout); const progressFill = document.getElementById('progressFill'); if (progressFill) { progressFill.style.width = `${(currentPhotoIndex / selectedLayout) * 100}%`; } if (currentPhotoIndex >= selectedLayout) { setTimeout(() => finishCapture(), 500); } else { const hintEl = document.getElementById('captureHint'); if (hintEl) hintEl.innerHTML = (((window.LiCoWaBoothCaptureLocale && window.LiCoWaBoothCaptureLocale.next_photo_hint) || "La foto %s viene enseguida...").replace('%s', String(currentPhotoIndex + 1))); setTimeout(() => startPhotoCountdown(), 1500); } } function updatePreviewSlot(index, imageData) { let slot; if (boothType === 'goldfish') { slot = document.querySelector(`#photoGrid .strip-slot[data-slot="${index}"]`); } else { slot = document.querySelector(`#regularSlots .strip-slot[data-slot="${index}"]`); } if (slot) { slot.innerHTML = ` Photo ${index + 1}

`; slot.classList.add('captured'); } } function applyFilterToCanvas(ctx, width, height) { const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { const r = data[i]; const g = data[i + 1]; const b = data[i + 2]; if (selectedFilter === 'bw') { // CSS: grayscale(100%) contrast(1.1) let gray = 0.299 * r + 0.587 * g + 0.114 * b; gray = Math.min(255, Math.max(0, 128 + (gray - 128) * 1.1)); data[i] = gray; data[i + 1] = gray; data[i + 2] = gray; } else if (selectedFilter === 'sepia') { // CSS: sepia(80%) contrast(1.05) // Apply 80% sepia blend const sepiaR = 0.393 * r + 0.769 * g + 0.189 * b; const sepiaG = 0.349 * r + 0.686 * g + 0.168 * b; const sepiaB = 0.272 * r + 0.534 * g + 0.131 * b; // Blend 80% sepia with 20% original let newR = r * 0.2 + sepiaR * 0.8; let newG = g * 0.2 + sepiaG * 0.8; let newB = b * 0.2 + sepiaB * 0.8; // Apply 1.05 contrast newR = 128 + (newR - 128) * 1.05; newG = 128 + (newG - 128) * 1.05; newB = 128 + (newB - 128) * 1.05; data[i] = Math.min(255, Math.max(0, newR)); data[i + 1] = Math.min(255, Math.max(0, newG)); data[i + 2] = Math.min(255, Math.max(0, newB)); } else if (selectedFilter === 'vivid') { const factor = 1.4; data[i] = Math.min(255, Math.max(0, 128 + (r - 128) * factor)); data[i + 1] = Math.min(255, Math.max(0, 128 + (g - 128) * factor)); data[i + 2] = Math.min(255, Math.max(0, 128 + (b - 128) * factor)); } else if (selectedFilter === 'vintage') { // CSS: sepia(30%) saturate(1.2) brightness(1.05) // Apply 30% sepia const sepiaR = 0.393 * r + 0.769 * g + 0.189 * b; const sepiaG = 0.349 * r + 0.686 * g + 0.168 * b; const sepiaB = 0.272 * r + 0.534 * g + 0.131 * b; let newR = r * 0.7 + sepiaR * 0.3; let newG = g * 0.7 + sepiaG * 0.3; let newB = b * 0.7 + sepiaB * 0.3; // Apply saturation 1.2 const grayVintage = 0.299 * newR + 0.587 * newG + 0.114 * newB; newR = grayVintage + (newR - grayVintage) * 1.2; newG = grayVintage + (newG - grayVintage) * 1.2; newB = grayVintage + (newB - grayVintage) * 1.2; // Apply brightness 1.05 newR *= 1.05; newG *= 1.05; newB *= 1.05; data[i] = Math.min(255, Math.max(0, newR)); data[i + 1] = Math.min(255, Math.max(0, newG)); data[i + 2] = Math.min(255, Math.max(0, newB)); } else if (selectedFilter === 'soft') { const factor = 0.95; const brightness = 15; data[i] = Math.min(255, Math.max(0, 128 + (r - 128) * factor + brightness)); data[i + 1] = Math.min(255, Math.max(0, 128 + (g - 128) * factor + brightness)); data[i + 2] = Math.min(255, Math.max(0, 128 + (b - 128) * factor + brightness)); } else if (selectedFilter === 'noir') { // CSS: grayscale(100%) contrast(1.3) brightness(0.9) let gray = 0.299 * r + 0.587 * g + 0.114 * b; gray = 128 + (gray - 128) * 1.3; // contrast gray *= 0.9; // brightness data[i] = Math.min(255, Math.max(0, gray)); data[i + 1] = Math.min(255, Math.max(0, gray)); data[i + 2] = Math.min(255, Math.max(0, gray)); } } ctx.putImageData(imageData, 0, 0); } function finishCapture() { if (goldfishAnimator) { goldfishAnimator.stop(); } // Stop halftone preview if running stopHalftoneCapPreview(); stopHalftoneSettingsPreview(); generateStrip(); showPrintingAnimation(); } // ===== PRINTING ANIMATION ===== function showPrintingAnimation() { const printingStrip = document.getElementById('printingStrip'); printingStrip.className = 'printing-strip'; if (boothType === 'goldfish') printingStrip.classList.add('goldfish'); let html = ''; if (boothType === 'retro') { if (selectedFrame === 'heart-dark') { // Heart frame - 3:4 photos with heart clip-path printingStrip.style.background = '#1a1a1a'; printingStrip.style.padding = '3px'; printingStrip.style.width = '100px'; capturedPhotos.forEach((photo, index) => { html += `

`; }); } else { // Minimal frame for retro - just photos with 3:4 ratio const bgColor = selectedFrame === 'minimal-light' ? '#f5f5f5' : '#1a1a1a'; const borderColor = selectedFrame === 'minimal-light' ? '#ddd' : '#333'; printingStrip.style.background = bgColor; printingStrip.style.padding = '3px'; printingStrip.style.width = '100px'; // Narrower for 3:4 photos capturedPhotos.forEach((photo, index) => { html += `

`; }); } } else if (boothType === 'goldfish') { html += `

LICOWA

`; html += `

`; capturedPhotos.forEach((photo, index) => { html += `

`; }); html += `

`; const now = new Date(); const dateStr = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`; html += `

Licowa · ${dateStr}

`; } else { // Classic mode - white frame with proper spacing printingStrip.style.padding = '10px'; printingStrip.style.width = '120px'; capturedPhotos.forEach((photo, index) => { html += `

`; }); html += `

LiCoWa.

${new Date().toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase()}

`; } printingStrip.innerHTML = html; showStep('step-printing'); const strip = document.getElementById('printingStrip'); if (strip) { strip.style.animation = 'none'; strip.offsetHeight; strip.style.animation = 'slideOut 2.5s ease-out 0.5s forwards'; } const statusEl = document.getElementById('printingStatus'); if (statusEl) { let dots = ''; const dotsInterval = setInterval(() => { dots = dots.length >= 3 ? '' : dots + '.'; statusEl.innerHTML = `Printing${dots}`; }, 400); setTimeout(() => clearInterval(dotsInterval), 3000); } setTimeout(() => { const slot = document.getElementById('printerSlot'); if (slot) slot.classList.remove('printing'); showStep('step-result'); displayResult(); }, 3200); } // ===== GENERATE STRIP ===== function generateStrip() { const canvas = stripCanvas; const ctx = canvas.getContext('2d'); if (boothType === 'goldfish') { generateGoldfishStrip(ctx, canvas); } else if (boothType === 'retro') { generateRetroStrip(ctx, canvas); } else { generateClassicStrip(ctx, canvas); } } function generateClassicStrip(ctx, canvas) { const photoWidth = 280; const photoHeight = 210; const padding = 20; const spacing = 10; const footerHeight = 80; canvas.width = photoWidth + padding * 2; canvas.height = photoHeight * selectedLayout + spacing * (selectedLayout - 1) + padding * 2 + footerHeight; ctx.fillStyle = 'white'; ctx.fillRect(0, 0, canvas.width, canvas.height); let loadedCount = 0; capturedPhotos.forEach((photoData, index) => { const img = new Image(); img.onload = () => { const y = padding + index * (photoHeight + spacing); drawImageCover(ctx, img, padding, y, photoWidth, photoHeight); loadedCount++; if (loadedCount === capturedPhotos.length) { addClassicFooter(ctx, canvas.width, canvas.height, footerHeight); } }; img.src = photoData; }); } function generateRetroStrip(ctx, canvas) { if (selectedFrame === 'heart-dark') { generateHeartStrip(ctx, canvas); return; } // Minimal frame - high-res photos (3:4 ratio) for crisp halftone dots const photoWidth = 900; const photoHeight = 1200; // 3:4 ratio const padding = 12; const spacing = 12; canvas.width = photoWidth + padding * 2; canvas.height = photoHeight * selectedLayout + spacing * (selectedLayout - 1) + padding * 2; // Background color based on frame type const bgColor = selectedFrame === 'minimal-light' ? '#f5f5f5' : '#1a1a1a'; const borderColor = selectedFrame === 'minimal-light' ? '#cccccc' : '#333333'; ctx.fillStyle = bgColor; ctx.fillRect(0, 0, canvas.width, canvas.height); let loadedCount = 0; capturedPhotos.forEach((photoData, index) => { const img = new Image(); img.onload = () => { const y = padding + index * (photoHeight + spacing); // Draw thin border around photo ctx.fillStyle = borderColor; ctx.fillRect(padding - 3, y - 3, photoWidth + 6, photoHeight + 6); // Draw photo drawImageCover(ctx, img, padding, y, photoWidth, photoHeight); // Apply scratch/dust overlay effect to final image (skip for halftone — it has its own visual) if (loadedCount === capturedPhotos.length - 1 && selectedFilter !== 'halftone') { applyScratchEffect(ctx, canvas.width, canvas.height); } loadedCount++; }; img.src = photoData; }); } // Draw a heart path inside a bounding box at (x, y) with given width and height // Matches the SVG clip-path: objectBoundingBox heart shape function drawHeartPath(ctx, x, y, w, h) { if (h === undefined) h = w; // backward compat: single size = square ctx.beginPath(); // Starting point: top center dip (0.5, 0.18) ctx.moveTo(x + w * 0.5, y + h * 0.18); // Left hump: curve up and left ctx.bezierCurveTo( x + w * 0.5, y + h * 0.06, // control 1 x + w * 0.35, y + h * 0.0, // control 2 x + w * 0.2, y + h * 0.06 // end: left top ); ctx.bezierCurveTo( x + w * 0.02, y + h * 0.14, // control 1 x + w * 0.0, y + h * 0.35, // control 2 x + w * 0.12, y + h * 0.52 // end: left middle ); ctx.bezierCurveTo( x + w * 0.22, y + h * 0.66, // control 1 x + w * 0.38, y + h * 0.78, // control 2 x + w * 0.5, y + h * 0.92 // end: bottom tip ); // Right side: mirror ctx.bezierCurveTo( x + w * 0.62, y + h * 0.78, // control 1 x + w * 0.78, y + h * 0.66, // control 2 x + w * 0.88, y + h * 0.52 // end: right middle ); ctx.bezierCurveTo( x + w * 1.0, y + h * 0.35, // control 1 x + w * 0.98, y + h * 0.14, // control 2 x + w * 0.8, y + h * 0.06 // end: right top ); ctx.bezierCurveTo( x + w * 0.65, y + h * 0.0, // control 1 x + w * 0.5, y + h * 0.06, // control 2 x + w * 0.5, y + h * 0.18 // end: back to start ); ctx.closePath(); } function generateHeartStrip(ctx, canvas) { const photoWidth = 900; const photoHeight = 1200; // 3:4 ratio, high-res for crisp halftone dots const padding = 12; const spacing = 12; canvas.width = photoWidth + padding * 2; canvas.height = photoHeight * selectedLayout + spacing * (selectedLayout - 1) + padding * 2; // Dark background ctx.fillStyle = '#1a1a1a'; ctx.fillRect(0, 0, canvas.width, canvas.height); let loadedCount = 0; capturedPhotos.forEach((photoData, index) => { const img = new Image(); img.onload = () => { const x = padding; const y = padding + index * (photoHeight + spacing); // Save context, clip to heart, draw photo, restore ctx.save(); drawHeartPath(ctx, x, y, photoWidth, photoHeight); ctx.clip(); drawImageCover(ctx, img, x, y, photoWidth, photoHeight); ctx.restore(); // Draw subtle heart outline ctx.save(); drawHeartPath(ctx, x, y, photoWidth, photoHeight); ctx.strokeStyle = 'rgba(255,255,255,0.08)'; ctx.lineWidth = 3; ctx.stroke(); ctx.restore(); loadedCount++; if (loadedCount === capturedPhotos.length && selectedFilter !== 'halftone') { // Apply scratch effect (skip for halftone) applyScratchEffect(ctx, canvas.width, canvas.height); } }; img.src = photoData; }); } // Apply vintage scratch/dust effect to the canvas (matching CSS overlay exactly) // This matches the .scratch-overlay CSS with SVG viewBox 400x500 function applyScratchEffect(ctx, width, height) { // Calculate scale ratio (CSS SVG original size is 400x500) const scaleX = width / 400; const scaleY = height / 500; const overlayOpacity = 0.6; // Matches CSS .scratch-overlay opacity // 1. Add subtle film grain noise (simulating feTurbulence filter) const imageData = ctx.getImageData(0, 0, width, height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { const noise = (Math.random() - 0.5) * 8; // Very subtle noise data[i] = Math.min(255, Math.max(0, data[i] + noise)); data[i + 1] = Math.min(255, Math.max(0, data[i + 1] + noise)); data[i + 2] = Math.min(255, Math.max(0, data[i + 2] + noise)); } ctx.putImageData(imageData, 0, 0); // 2. Draw the two fixed scratch lines (matching CSS SVG exactly) // Line 1: x1="67" y1="0" x2="72" y2="500" stroke="#333" stroke-width="0.4" opacity="0.3" ctx.strokeStyle = '#333'; ctx.lineWidth = 0.4 * scaleX; ctx.globalAlpha = 0.3 * overlayOpacity; ctx.beginPath(); ctx.moveTo(67 * scaleX, 0); ctx.lineTo(72 * scaleX, height); ctx.stroke(); // Line 2: x1="289" y1="0" x2="284" y2="500" stroke="#444" stroke-width="0.3" opacity="0.25" ctx.strokeStyle = '#444'; ctx.lineWidth = 0.3 * scaleX; ctx.globalAlpha = 0.25 * overlayOpacity; ctx.beginPath(); ctx.moveTo(289 * scaleX, 0); ctx.lineTo(284 * scaleX, height); ctx.stroke(); // 3. Draw the four fixed dust particles (matching CSS SVG exactly) // Dust 1: cx="85" cy="127" r="0.8" fill="#333" opacity="0.35" ctx.fillStyle = '#333'; ctx.globalAlpha = 0.35 * overlayOpacity; ctx.beginPath(); ctx.arc(85 * scaleX, 127 * scaleY, 0.8 * scaleX, 0, Math.PI * 2); ctx.fill(); // Dust 2: cx="312" cy="289" r="1" fill="#444" opacity="0.3" ctx.fillStyle = '#444'; ctx.globalAlpha = 0.3 * overlayOpacity; ctx.beginPath(); ctx.arc(312 * scaleX, 289 * scaleY, 1 * scaleX, 0, Math.PI * 2); ctx.fill(); // Dust 3: cx="178" cy="67" r="0.6" fill="#555" opacity="0.25" ctx.fillStyle = '#555'; ctx.globalAlpha = 0.25 * overlayOpacity; ctx.beginPath(); ctx.arc(178 * scaleX, 67 * scaleY, 0.6 * scaleX, 0, Math.PI * 2); ctx.fill(); // Dust 4: cx="43" cy="412" r="0.9" fill="#333" opacity="0.3" ctx.fillStyle = '#333'; ctx.globalAlpha = 0.3 * overlayOpacity; ctx.beginPath(); ctx.arc(43 * scaleX, 412 * scaleY, 0.9 * scaleX, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; } function generateGoldfishStrip(ctx, canvas) { const photoSize = 200; const gap = 6; const padding = 15; const headerHeight = 40; const footerHeight = 35; const borderWidth = 4; const gridWidth = photoSize * 2 + gap; const gridHeight = photoSize * 2 + gap; canvas.width = gridWidth + padding * 2 + borderWidth * 2; canvas.height = headerHeight + gridHeight + footerHeight + padding * 2 + borderWidth * 2; ctx.fillStyle = '#fb923c'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0a0a0a'; ctx.fillRect(borderWidth, borderWidth, canvas.width - borderWidth * 2, canvas.height - borderWidth * 2); ctx.fillStyle = 'white'; ctx.font = '600 12px "Plus Jakarta Sans", sans-serif'; ctx.textAlign = 'center'; ctx.fillText('L I C O W A', canvas.width / 2, borderWidth + headerHeight); let loadedCount = 0; capturedPhotos.forEach((photoData, index) => { const img = new Image(); img.onload = () => { const col = index % 2; const row = Math.floor(index / 2); const x = borderWidth + padding + col * (photoSize + gap); const y = borderWidth + headerHeight + padding + row * (photoSize + gap); drawImageCover(ctx, img, x, y, photoSize, photoSize); loadedCount++; if (loadedCount === capturedPhotos.length) { const now = new Date(); const dateStr = `Licowa · ${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`; ctx.fillStyle = 'rgba(255,255,255,0.5)'; ctx.font = '10px "Plus Jakarta Sans", sans-serif'; ctx.fillText(dateStr, canvas.width / 2, canvas.height - borderWidth - 12); } }; img.src = photoData; }); } function drawImageCover(ctx, img, x, y, targetWidth, targetHeight) { const imgRatio = img.width / img.height; const targetRatio = targetWidth / targetHeight; let sx, sy, sw, sh; if (imgRatio > targetRatio) { sh = img.height; sw = img.height * targetRatio; sx = (img.width - sw) / 2; sy = 0; } else { sw = img.width; sh = img.width / targetRatio; sx = 0; sy = (img.height - sh) / 2; } ctx.drawImage(img, sx, sy, sw, sh, x, y, targetWidth, targetHeight); } function addClassicFooter(ctx, width, height, footerHeight) { const footerY = height - footerHeight; ctx.fillStyle = '#1C1917'; ctx.font = 'italic 28px Georgia, serif'; ctx.textAlign = 'center'; ctx.fillText('LiCoWa.', width / 2, footerY + 35); const now = new Date(); const dateStr = now.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).toUpperCase(); ctx.fillStyle = '#999'; ctx.font = '12px monospace'; ctx.fillText(dateStr, width / 2, footerY + 55); } // ===== DISPLAY RESULT ===== function displayResult() { const resultStrip = document.getElementById('resultStrip'); if (!resultStrip) return; resultStrip.className = 'result-strip flex-shrink-0'; if (boothType === 'goldfish') resultStrip.classList.add('goldfish'); if (boothType === 'retro') resultStrip.classList.add(selectedFrame); let html = ''; if (boothType === 'goldfish') { html += `

LICOWA

`; html += `

`; capturedPhotos.forEach((photo, index) => { html += `

`; }); html += `

`; const now = new Date(); const dateStr = `${now.getFullYear()}.${String(now.getMonth() + 1).padStart(2, '0')}.${String(now.getDate()).padStart(2, '0')}`; html += `

Licowa · ${dateStr}

`; } else if (boothType === 'retro') { if (selectedFrame === 'heart-dark') { // Heart frame - heart-shaped photo cutouts capturedPhotos.forEach((photo, index) => { html += `

`; }); } else { // Minimal frame - just photos with minimal spacing const borderColor = selectedFrame === 'minimal-light' ? '#ddd' : '#333'; capturedPhotos.forEach((photo, index) => { html += `

`; }); } } else { // Classic mode capturedPhotos.forEach((photo, index) => { html += `

`; }); html += ` `; } resultStrip.innerHTML = html; } // ===== ACTIONS ===== function downloadStrip() { const canvas = stripCanvas; const link = document.createElement('a'); const prefix = boothType === 'goldfish' ? 'goldfish' : (boothType === 'retro' ? 'retro' : 'classic'); link.download = `licowa-${prefix}-${Date.now()}.png`; link.href = canvas.toDataURL('image/png'); link.click(); } async function shareStrip() { const canvas = stripCanvas; if (navigator.share && navigator.canShare) { try { const blob = await new Promise(resolve => canvas.toBlob(resolve, 'image/png')); const file = new File([blob], 'licowa-photobooth.png', { type: 'image/png' }); if (navigator.canShare({ files: [file] })) { await navigator.share({ title: 'My LiCoWa Photo Strip', files: [file] }); return; } } catch (error) { console.log('Share failed:', error); } } downloadStrip(); alert("Share is not available in this browser, so we downloaded the photo strip instead. You can now share the saved image manually."); } function retake() { capturedPhotos = []; currentPhotoIndex = 0; goldfishAnimator = null; // Stop any halftone previews stopHalftoneCapPreview(); stopHalftoneSettingsPreview(); // Go back to settings showStep('step-settings'); if (currentMode === 'upload') { initUploadUI(); } else { startCameraPreview(); } } function retryCameraAccess() { showStep('step-settings'); startCameraPreview(); } // Cleanup on page leave window.addEventListener('beforeunload', () => { stopHalftoneSettingsPreview(); stopHalftoneCapPreview(); if (cameraStream) { cameraStream.getTracks().forEach(track => track.stop()); } });

Cámara Fotomatón - Tiras de fotos online | LiCoWa

Imprimiendo...

¡Tu tira de fotos!

¿Quieres más efectos?

Se requiere cámara