Your photo will appear here

View Live Slideshow

Processing...

"' + effect.name + '"

`; effectEl.addEventListener('click', () => selectEffect(effect.id)); elements.effectsGrid.appendChild(effectEl); }); } function selectEffect(effectId) { state.selectedEffect = effectId; renderEffects(); elements.currentEffect.textContent = state.effects.find(e => e.id === effectId)?.name || 'None'; if (state.currentPhoto) { drawPhotoWithEffect(); } } function showCameraOptions() { // Show choice: Camera or Upload const choice = confirm("Choose photo source:\n\nClick OK for Camera\nClick Cancel for File Upload"); if (choice === true) { openCamera(); } else { openFileUpload(); } } async function openCamera() { try { showLoading('Accessing camera...'); // Check if browser supports getUserMedia if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) { throw new Error('Camera not supported in this browser'); } // Get camera stream const stream = await navigator.mediaDevices.getUserMedia({ video: { facingMode: 'environment', // Prefer rear camera width: { ideal: 1920 }, height: { ideal: 1080 } }, audio: false }); state.cameraStream = stream; elements.cameraFeed.srcObject = stream; // Show camera modal elements.cameraModal.classList.add('active'); hideLoading(); } catch (error) { console.error('Camera error:', error); hideLoading(); let errorMessage = 'Unable to access camera. '; if (error.name === 'NotAllowedError' || error.name === 'PermissionDeniedError') { errorMessage += 'Camera permission was denied. Please allow camera access in your browser settings.'; } else if (error.name === 'NotFoundError' || error.name === 'DevicesNotFoundError') { errorMessage += 'No camera found on your device.'; } else if (error.name === 'NotSupportedError') { errorMessage += 'Camera not supported in this browser.'; } else if (error.name === 'SecurityError') { errorMessage += 'Camera access requires HTTPS.'; } else { errorMessage += error.message; } alert(errorMessage + '\n\nPlease use file upload instead.'); openFileUpload(); } } function openFileUpload() { elements.fileInput.click(); } function closeCamera() { if (state.cameraStream) { state.cameraStream.getTracks().forEach(track => track.stop()); state.cameraStream = null; } elements.cameraModal.classList.remove('active'); } function capturePhoto() { if (!state.cameraStream) return; // Set canvas size to match video const video = elements.cameraFeed; elements.photoCanvas.width = video.videoWidth; elements.photoCanvas.height = video.videoHeight; // Draw video frame to canvas state.canvasContext.drawImage(video, 0, 0); // Process the photo closeCamera(); processPhoto(); } function handleFileUpload(event) { if (event.target.files && event.target.files[0]) { const file = event.target.files[0]; // Check file size (max 50MB) if (file.size > 50 * 1024 * 1024) { alert('File too large! Maximum size is 50MB.'); return; } showLoading('Loading image...'); const reader = new FileReader(); reader.onload = function(e) { const img = new Image(); img.onload = function() { // Set canvas dimensions elements.photoCanvas.width = img.width; elements.photoCanvas.height = img.height; // Draw image state.canvasContext.drawImage(img, 0, 0); // Process the photo processPhoto(); hideLoading(); }; img.onerror = function() { hideLoading(); alert('Error loading image. Please try a different file.'); }; img.src = e.target.result; }; reader.onerror = function() { hideLoading(); alert('Error reading file. Please try again.'); }; reader.readAsDataURL(file); } } function processPhoto() { // Show canvas elements.photoCanvas.style.display = 'block'; elements.previewContainer.querySelector('.preview-placeholder').style.display = 'none'; // Update state state.currentPhoto = elements.photoCanvas; // Show effects section elements.effectsSection.style.display = 'block'; // Show action buttons elements.actionButtons.style.display = 'grid'; // Show image info elements.imageInfo.style.display = 'grid'; elements.imageDimensions.textContent = '' + elements.photoCanvas.width + 'x' + elements.photoCanvas.height + ''; // Estimate file size (rough calculation for ~4MB target) const estimatedSizeMB = 4.0; // Our target size elements.estimatedSize.textContent = estimatedSizeMB.toFixed(1); // Apply selected effect if (state.selectedEffect !== 'none') { drawPhotoWithEffect(); } } function drawPhotoWithEffect() { if (!state.currentPhoto) return; // Note: In a real implementation, we would send to server for effects // For now, we'll just update the UI console.log('Effect selected: ' + state.selectedEffect + ''); // Update border color based on effect const effect = state.effects.find(e => e.id === state.selectedEffect); if (effect) { elements.previewContainer.style.border = '3px solid ' + effect.color + ''; } } async function savePhoto() { if (!state.currentPhoto) { alert('Please take or upload a photo first!'); return; } showLoading('Saving and optimizing photo...'); try { // Get canvas data as base64 const imageData = elements.photoCanvas.toDataURL('image/jpeg', 0.9); // Send to server const response = await fetch('/api/save-photo', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ image: imageData, effect: state.selectedEffect }) }); const data = await response.json(); if (data.success) { // Show success message elements.loadingMessage.textContent = `✅ Photo saved!`; elements.loadingMessage.innerHTML += '
' + data.optimized_size_mb + 'MB (' + data.reduction + '% smaller)'; setTimeout(() => { hideLoading(); // Show success alert alert('✅ Photo saved successfully!\n\n• Original: ' + data.original_size_mb + 'MB\n• Optimized: ' + data.optimized_size_mb + 'MB\n• Reduction: ' + data.reduction + '%\n\nCheck the slideshow to see it in action!')); // Update gallery stats loadGalleryStats(); // Reset for next photo resetPhoto(); }, 2000); } else { hideLoading(); alert('Error saving photo: ' + (data.error || 'Unknown error')); } } catch (error) { console.error('Error saving photo:', error); hideLoading(); alert('Error saving photo. Please try again.'); } } function resetPhoto() { // Hide canvas elements.photoCanvas.style.display = 'none'; // Show placeholder elements.previewContainer.querySelector('.preview-placeholder').style.display = 'flex'; elements.previewContainer.style.border = '3px dashed #dee2e6'; // Hide sections elements.effectsSection.style.display = 'none'; elements.actionButtons.style.display = 'none'; elements.imageInfo.style.display = 'none'; // Reset state state.currentPhoto = null; state.selectedEffect = 'none'; renderEffects(); } function printPhoto() { if (!state.currentPhoto) { alert('Please take or upload a photo first!'); return; } const dataUrl = elements.photoCanvas.toDataURL('image/jpeg'); const printWindow = window.open(''); printWindow.document.write(` > Print Photo - Magix Photobooth

📸 Magix Photobooth

Printed on \' + new Date().toLocaleString() + \'
Effect: \' + (state.effects.find(e => e.id === state.selectedEffect)?.name || 'Original') + \'

Choose Effect

📸 Magix Photobooth