diff --git a/src/router/index.ts b/src/router/index.ts index 1f1aa90..243ea4d 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -39,6 +39,11 @@ const router = createRouter({ name: 'pickup', component: () => import('../views/PickupView.vue'), }, + { + path: '/download', + name: 'download', + component: () => import('../views/DownloadView.vue'), + }, ], }) diff --git a/src/views/DownloadView.vue b/src/views/DownloadView.vue new file mode 100644 index 0000000..5507514 --- /dev/null +++ b/src/views/DownloadView.vue @@ -0,0 +1,262 @@ + + + + + \ No newline at end of file diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 3041011..7c8e3f8 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -33,7 +33,7 @@ const examplePhotos = ref([ -
+
@@ -293,6 +322,7 @@ const startOver = () => { Combined Photo +

ไม่สามารถสร้างภาพได้

@@ -302,11 +332,9 @@ const startOver = () => { -
- -
+ @@ -408,6 +436,47 @@ const startOver = () => { margin-bottom: 2rem; } +.qr-code-section { + margin-top: 2rem; + text-align: center; +} + +.qr-code-section h3 { + color: #5d4037; + font-size: 1.2rem; + margin-bottom: 1rem; + font-family: 'Crete Round', serif; +} + +.qr-code-image { + width: 150px; + height: 150px; + border: 2px solid #a1887f; + border-radius: 8px; + box-shadow: 0 4px 10px rgba(0,0,0,0.1); + transition: transform 0.2s ease; +} + +.qr-code-link:hover .qr-code-image { + transform: scale(1.05); +} + +.qr-hint { + margin-top: 1rem; + font-size: 0.9rem; + color: #6d4c41; +} + +.download-link { + color: #8d6e63; + text-decoration: underline; + font-weight: bold; +} + +.download-link:hover { + color: #795548; +} + .action-buttons { display: flex; gap: 1.5rem; /* Increased gap */ @@ -421,7 +490,7 @@ const startOver = () => { padding: 1rem 2.5rem; /* Larger padding */ font-size: 1.2rem; /* Slightly larger font */ font-weight: bold; - border-radius: 8px; /* Softer border-radius */ + border-radius: 20px; /* Softer border-radius */ cursor: pointer; transition: all 0.3s ease; display: flex; @@ -454,7 +523,7 @@ const startOver = () => { padding: 0.8rem 1.8rem; /* Adjusted padding */ font-size: 1rem; /* Slightly smaller font */ font-weight: bold; - border-radius: 5px; /* Softer border-radius */ + border-radius: 20px; /* Softer border-radius */ cursor: pointer; transition: all 0.3s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.1); diff --git a/src/views/PrintStepView.vue b/src/views/PrintStepView.vue index 8517349..6986598 100644 --- a/src/views/PrintStepView.vue +++ b/src/views/PrintStepView.vue @@ -31,10 +31,56 @@ onMounted(() => { // เริ่มนับถอยหลัง startCountdown() - // Load the final image from localStorage - finalImage.value = localStorage.getItem('photobooth-final-image'); + // // Load the final image from localStorage + // finalImage.value = localStorage.getItem('photobooth-final-image'); + + // // Upload the final image to the server + // if (finalImage.value) { + // uploadFinalImage(finalImage.value); + // } }) +const uploadFinalImage = async (imageDataUrl: string) => { + try { + // Compress the image first to reduce size + console.log('Original image size:', imageDataUrl.length); + const compressedImage = await compressImage(imageDataUrl, 0.8); // 80% quality + console.log('Compressed image size:', compressedImage.length); + + // Convert compressed base64 data URL to Blob + const response = await fetch(compressedImage); + const blob = await response.blob(); + + // Create FormData + const formData = new FormData(); + const file = new File([blob], 'photobooth-final.jpg', { type: 'image/jpeg' }); + formData.append('profile_image', file, file.name); + + // Upload to API + const uploadResponse = await fetch('https://api2.dekthai-online.com/g/upload/photobooth', { + method: 'POST', + body: formData + }); + + if (uploadResponse.ok) { + const result = await uploadResponse.json(); + console.log('Upload successful:', result); + + // Save the filename to localStorage + if (result.filename) { + localStorage.setItem('photobooth-uploaded-filename', result.filename); + console.log('Filename saved to localStorage:', result.filename); + } + + } else { + console.error('Upload failed:', uploadResponse.status, uploadResponse.statusText); + } + } catch (error) { + console.error('Error uploading image:', error); + } +}; + + const startCountdown = () => { const timer = setInterval(() => { countdown.value-- @@ -232,12 +278,24 @@ const generateAndCacheImage = async () => { }) } - // สร้าง PNG data URL และบันทึกใน localStorage - const dataUrl = canvas.toDataURL('image/png') + // สร้าง compressed JPEG data URL และบันทึกใน localStorage + const dataUrl = canvas.toDataURL('image/jpeg', 0.8) // 80% quality JPEG try { saveToLocalStorage('photobooth-final-image', dataUrl); finalImage.value = dataUrl; + + + // Load the final image from localStorage + finalImage.value = localStorage.getItem('photobooth-final-image'); + + // Upload the final image to the server + if (finalImage.value) { + uploadFinalImage(dataUrl); + } + + + } catch (error) { if (error instanceof DOMException && error.name === 'QuotaExceededError') { console.error('localStorage quota exceeded for cached image') @@ -311,9 +369,9 @@ onMounted(() => {

กำลังเตรียมไฟล์สำหรับดาวน์โหลด...

-
+
diff --git a/vite.config.ts b/vite.config.ts index 89b5a2f..1c1c54a 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -35,7 +35,7 @@ export default defineConfig({ }) ], server: { - allowedHosts: ['photobooth.lookmeblog.com'] + allowedHosts: ['photobooth.lookmeblog.com', 'photobooth.dekthai-online.com'] }, resolve: { alias: {