Skip to content

Commit 8bc4d1a

Browse files
CastawhatCastawhat
authored
Add files via upload
0 parents  commit 8bc4d1a

File tree

3 files changed

+243
-0
lines changed

3 files changed

+243
-0
lines changed

‎index.html‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<!DOCTYPE html>
2+
<html lang="en" >
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Photobooth v1</title>
6+
<link rel="stylesheet" href="./style.css">
7+
8+
</head>
9+
<body>
10+
<!-- partial:index.partial.html -->
11+
<!DOCTYPE html>
12+
<html lang="en">
13+
<head>
14+
<meta charset="UTF-8">
15+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
16+
<title>Photo Booth App</title>
17+
<link rel="stylesheet" href="styles.css">
18+
</head>
19+
<body>
20+
<div id="welcomeScreen">
21+
<h1>Welcome to the Photo Booth</h1>
22+
<button onclick="showScreen('photoSelection')">Start</button>
23+
</div>
24+
25+
<div id="photoSelection" style="display: none;">
26+
<h2>How many photos on your strip?</h2>
27+
<button onclick="startPhotoBooth(2)">2 Photos</button>
28+
<button onclick="startPhotoBooth(3)">3 Photos</button>
29+
<button onclick="startPhotoBooth(4)">4 Photos</button>
30+
</div>
31+
32+
<div id="photoCapture" style="display: none;">
33+
<h2 id="countdownText">Ready to take photos?</h2>
34+
<video id="camera" autoplay></video>
35+
<button onclick="startPhotoSequence()">Start Taking Photos</button>
36+
</div>
37+
38+
<div id="outputOptions" style="display: none;">
39+
<h2>Print or Download Your Photo Strip</h2>
40+
<canvas id="photoCanvas"></canvas>
41+
<br>
42+
<label for="caption">Add Text:</label>
43+
<input type="text" id="caption" placeholder="Enter your message">
44+
<br>
45+
<button onclick="applyText()">Apply Text</button>
46+
<button onclick="downloadPhoto()">Download</button>
47+
<button onclick="printPhoto()">Print</button>
48+
<button onclick="returnToStart()">Return to Start</button>
49+
</div>
50+
51+
<script src="script.js"></script>
52+
</body>
53+
</html>
54+
<!-- partial -->
55+
<script src="./script.js"></script>
56+
57+
</body>
58+
</html>

‎script.js‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
function showScreen(screenId) {
2+
document.querySelectorAll("div").forEach(div => div.style.display = "none");
3+
document.getElementById(screenId).style.display = "block";
4+
}
5+
6+
let photoCount, capturedPhotos = [];
7+
8+
function startPhotoBooth(count) {
9+
photoCount = count;
10+
capturedPhotos = [];
11+
showScreen('photoCapture');
12+
startCamera();
13+
}
14+
15+
function startCamera() {
16+
navigator.mediaDevices.getUserMedia({ video: true })
17+
.then(stream => {
18+
document.getElementById('camera').srcObject = stream;
19+
})
20+
.catch(error => console.error("Camera access denied", error));
21+
}
22+
23+
function startPhotoSequence(index = 0) {
24+
if (index >= photoCount) {
25+
showScreen('outputOptions');
26+
displayPhotos();
27+
return;
28+
}
29+
30+
const countdownText = document.getElementById('countdownText');
31+
countdownText.innerText = "Get ready...";
32+
33+
setTimeout(() => {
34+
countdownText.innerText = "3...";
35+
setTimeout(() => {
36+
countdownText.innerText = "2...";
37+
setTimeout(() => {
38+
countdownText.innerText = "1...";
39+
setTimeout(() => {
40+
takePhoto(index);
41+
setTimeout(() => startPhotoSequence(index + 1), 3000);
42+
}, 1000);
43+
}, 1000);
44+
}, 1000);
45+
}, 1000);
46+
}
47+
48+
function takePhoto(index) {
49+
const video = document.getElementById('camera');
50+
const canvas = document.createElement('canvas');
51+
const context = canvas.getContext('2d');
52+
canvas.width = video.videoWidth;
53+
canvas.height = video.videoHeight;
54+
context.drawImage(video, 0, 0, canvas.width, canvas.height);
55+
56+
capturedPhotos.push(canvas.toDataURL("image/png"));
57+
}
58+
59+
function displayPhotos() {
60+
const canvas = document.getElementById('photoCanvas');
61+
const context = canvas.getContext('2d');
62+
63+
const img = new Image();
64+
img.src = capturedPhotos[0];
65+
img.onload = () => {
66+
const aspectRatio = img.width / img.height;
67+
const photoWidth = 400;
68+
const photoHeight = photoWidth / aspectRatio;
69+
const spacing = 10;
70+
const borderSize = 5;
71+
const textHeight = 50;
72+
73+
canvas.width = photoWidth + borderSize * 2;
74+
canvas.height = photoCount * (photoHeight + spacing) - spacing + borderSize * 2 + textHeight;
75+
76+
context.fillStyle = "#ffffff";
77+
context.fillRect(0, 0, canvas.width, canvas.height);
78+
79+
capturedPhotos.forEach((photo, index) => {
80+
const img = new Image();
81+
img.src = photo;
82+
img.onload = () => {
83+
const x = borderSize;
84+
const y = borderSize + index * (photoHeight + spacing);
85+
86+
context.fillStyle = "#ffffff";
87+
context.fillRect(x - borderSize, y - borderSize, photoWidth + borderSize * 2, photoHeight + borderSize * 2);
88+
context.drawImage(img, x, y, photoWidth, photoHeight);
89+
};
90+
});
91+
};
92+
}
93+
94+
function applyText() {
95+
const canvas = document.getElementById('photoCanvas');
96+
const context = canvas.getContext('2d');
97+
const text = document.getElementById('caption').value;
98+
99+
context.fillStyle = "#000000";
100+
context.font = "24px Arial";
101+
context.textAlign = "center";
102+
context.fillText(text, canvas.width / 2, canvas.height - 20);
103+
}
104+
105+
function returnToStart() {
106+
photoCount = 0;
107+
capturedPhotos = [];
108+
109+
const video = document.getElementById('camera');
110+
if (video.srcObject) {
111+
video.srcObject.getTracks().forEach(track => track.stop());
112+
}
113+
114+
showScreen('welcomeScreen');
115+
}
116+
117+
function downloadPhoto() {
118+
const canvas = document.getElementById('photoCanvas');
119+
const link = document.createElement('a');
120+
link.download = "photostrip.png";
121+
link.href = canvas.toDataURL("image/png");
122+
link.click();
123+
}
124+
125+
function printPhoto() {
126+
const canvas = document.getElementById('photoCanvas');
127+
const newWindow = window.open();
128+
newWindow.document.write('<img src="' + canvas.toDataURL("image/png") + '">');
129+
newWindow.print();
130+
}

‎style.css‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
body {
2+
font-family: Arial, sans-serif;
3+
text-align: center;
4+
margin: 0;
5+
padding: 0;
6+
display: flex;
7+
flex-direction: column;
8+
justify-content: center;
9+
align-items: center;
10+
height: 100vh;
11+
background-color: #121212;
12+
color: white;
13+
}
14+
15+
div {
16+
width: 50%;
17+
max-width: 500px;
18+
padding: 20px;
19+
border-radius: 10px;
20+
background-color: #1e1e1e;
21+
display: flex;
22+
flex-direction: column;
23+
align-items: center;
24+
justify-content: center;
25+
}
26+
27+
button {
28+
display: block;
29+
width: 200px;
30+
margin: 10px auto;
31+
padding: 10px;
32+
font-size: 16px;
33+
background-color: #333;
34+
color: white;
35+
border: none;
36+
cursor: pointer;
37+
text-align: center;
38+
}
39+
40+
button:hover {
41+
background-color: #555;
42+
}
43+
44+
video {
45+
width: 100%;
46+
max-width: 400px;
47+
border-radius: 10px;
48+
}
49+
50+
canvas {
51+
border: 2px solid white;
52+
display: block;
53+
margin: 0 auto;
54+
background-color: white;
55+
}

0 commit comments

Comments
 (0)