alu/cse110-fa22-group29
1
0
Fork 0
mirror of https://github.com/cse110-fa22-group29/cse110-fa22-group29.git synced 2025-10-30 19:46:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

Implementation of photo taking feature

Browse Source
This commit is contained in:
Henry Feng
2022-11-30 15:59:43 -08:00
parent 20cdc4ce76
commit 0d17ddee53
4 changed files with 144 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
source/CreatePage.html
View File

@@ -39,11 +39,15 @@
<legend>PICTURE:</legend> <legend>PICTURE:</legend>
<select id="select" name="select"> <select id="select" name="select">
<option value="file">File Upload</option> <option value="file">File Upload</option>
<option value="url">From an URL</option> <option value="photo">Take a Photo</option>
</select> </select>
<label for="mealImage" id="source">
<input type="file" accept="image/*" id="mealImg" name="mealImg"> <input type="file" accept="image/*" id="mealImg" name="mealImg">
</label> </fieldset>
<fieldset>
<video id="player" width="320" height="240" autoplay hidden></video>
<canvas id="photoCanvas" width="320" height="240" hidden></canvas>
<button type="button" id="photoButton" hidden>Take Photo</button>
</fieldset> </fieldset>
<fieldset> <fieldset>

10
source/ReviewDetails.html
View File

@@ -70,11 +70,15 @@
<legend>PICTURE:</legend> <legend>PICTURE:</legend>
<select id="select" name="select"> <select id="select" name="select">
<option value="file">File Upload</option> <option value="file">File Upload</option>
<option value="url">From an URL</option> <option value="photo">Take a Photo</option>
</select> </select>
<label for="mealImage" id="source">
<input type="file" accept="image/*" id="mealImg" name="mealImg"> <input type="file" accept="image/*" id="mealImg" name="mealImg">
</label> </fieldset>
<fieldset>
<video id="player" width="320" height="240" autoplay hidden></video>
<canvas id="photoCanvas" width="320" height="240" hidden></canvas>
<button type="button" id="photoButton" hidden>Take Photo</button>
</fieldset> </fieldset>
<fieldset> <fieldset>

75
source/assets/scripts/CreatePage.js
View File

@@ -18,30 +18,75 @@ function initFormHandler() {
let tagContainer = document.getElementById("tag-container-form"); let tagContainer = document.getElementById("tag-container-form");
let form = document.querySelector("form"); let form = document.querySelector("form");
// Event listener for reading form data // Declaring variable storing image data url
let select = document.getElementById("select"); let imgDataURL = "";
select.addEventListener("change", function() {
const input = document.getElementById("source");
// Accessing components related to taking photo
let videoMode = true;
let player = document.getElementById("player");
let canvas = document.getElementById("photoCanvas");
let photoButton = document.getElementById("photoButton");
let context = canvas.getContext('2d');
// Event listener for the photo taking/reset button
photoButton.addEventListener('click', ()=>{
// capturing the current video frame
if (videoMode) {
videoMode = false;
// setting up the appropriate components for displaying the photo preview
photoButton.innerText = "Retake";
player.setAttribute("hidden", "");
canvas.removeAttribute("hidden", "");
// displaying the captured snapshot on a canvas and saving it as a data url
context.drawImage(player, 0, 0, canvas.width, canvas.height);
imgDataURL = canvas.toDataURL();
}
// returning to displaying the video stream
else {
videoMode = true;
// setting up the appropriate components for the video stream
photoButton.innerText = "Take Photo";
canvas.setAttribute("hidden", "");
player.removeAttribute("hidden", "");
}
});
// Event listener for reading image form different data
let select = document.getElementById("select");
const input = document.getElementById("mealImg");
select.addEventListener("change", function() {
// Select a photo with HTML file selector // Select a photo with HTML file selector
if (select.value == "file") { if (select.value == "file") {
input.innerHTML = ` // enabling file upload components and hiding photo taking components
Source: input.removeAttribute("hidden", "");
<input type="file" accept="image/*" id="mealImg" name="mealImg"> player.setAttribute("hidden", "");
`; canvas.setAttribute("hidden", "");
photoButton.setAttribute("hidden", "");
// stopping the video stream
player.srcObject.getVideoTracks()[0].stop();
} }
// Upload text URL input // Take a photo
else { else {
input.innerHTML = ` // enabling photo taking components and hiding file upload components
Source: videoMode = true;
<input type="text" id="mealImg" name="mealImg"> photoButton.innerText = "Take Photo";
`; input.setAttribute("hidden", "");
player.removeAttribute("hidden", "");
photoButton.removeAttribute("hidden", "");
// getting video stream from user's camera then displaying it on a video element
navigator.mediaDevices.getUserMedia({video: true,}).then((stream)=>{
player.srcObject = stream;
});
} }
}); });
// Addresses sourcing image from local file // Addresses sourcing image from local file
let imgDataURL = "";
document.getElementById("mealImg").addEventListener("change", function() { document.getElementById("mealImg").addEventListener("change", function() {
const reader = new FileReader(); const reader = new FileReader();
@@ -68,7 +113,7 @@ function initFormHandler() {
if (`${key}` !== "tag-form") { if (`${key}` !== "tag-form") {
reviewObject[`${key}`] = `${value}`; reviewObject[`${key}`] = `${value}`;
} }
if (`${key}` === "mealImg" && select.value == "file") { if (`${key}` === "mealImg" && imgDataURL !== "") {
reviewObject["mealImg"] = imgDataURL; reviewObject["mealImg"] = imgDataURL;
} }
} }

80
source/assets/scripts/ReviewDetails.js
View File

@@ -102,8 +102,8 @@ function setupUpdate(){
while (tagContainer.firstChild) { while (tagContainer.firstChild) {
tagContainer.removeChild(tagContainer.firstChild); tagContainer.removeChild(tagContainer.firstChild);
} }
let tagSetVal = currReview["tags"][i].toLowerCase()
for (let i = 0; i < currReview["tags"].length; i++) { for (let i = 0; i < currReview["tags"].length; i++) {
let tagSetVal = currReview["tags"][i].toLowerCase()
tagSet.add(tagSetVal); tagSet.add(tagSetVal);
let newTag = document.createElement("label"); let newTag = document.createElement("label");
newTag.setAttribute("class","tag"); newTag.setAttribute("class","tag");
@@ -116,31 +116,79 @@ function setupUpdate(){
} }
} }
// Declaring variable storing image data url
let imgDataURL = "";
// Accessing components related to taking photo
let videoMode = true;
let player = document.getElementById("player");
let canvas = document.getElementById("photoCanvas");
let photoButton = document.getElementById("photoButton");
let context = canvas.getContext('2d');
// Event listener for the photo taking/reset button
photoButton.addEventListener('click', ()=>{
// capturing the current video frame
if (videoMode) {
videoMode = false;
// setting up the appropriate components for displaying the photo preview
photoButton.innerText = "Retake";
player.setAttribute("hidden", "");
canvas.removeAttribute("hidden", "");
// displaying the captured snapshot on a canvas and saving it as a data url
context.drawImage(player, 0, 0, canvas.width, canvas.height);
imgDataURL = canvas.toDataURL();
}
// returning to displaying the video stream
else {
videoMode = true;
// setting up the appropriate components for the video stream
photoButton.innerText = "Take Photo";
canvas.setAttribute("hidden", "");
player.removeAttribute("hidden", "");
}
});
/* /*
* change the input source of the image between local file and URL * change the input source of the image between local file and taking photo
* depending on user's selection * depending on user's selection
*/ */
let select = document.getElementById("select"); let select = document.getElementById("select");
const input = document.getElementById("mealImg");
select.addEventListener("change", function() { select.addEventListener("change", function() {
const input = document.getElementById("source"); console.log("1");
// Select a photo with HTML file selector
if (select.value == "file") { if (select.value == "file") {
input.innerHTML = ` // enabling file upload components and hiding photo taking components
Source: input.removeAttribute("hidden", "");
<input type="file" accept="image/*" id="mealImg" name="mealImg"> player.setAttribute("hidden", "");
`; canvas.setAttribute("hidden", "");
photoButton.setAttribute("hidden", "");
// stopping the video stream
player.srcObject.getVideoTracks()[0].stop();
} }
//TODO: change to photo taking for sprint 3
// Take a photo
else { else {
input.innerHTML = ` // enabling photo taking components and hiding file upload components
Source: videoMode = true;
<input type="text" id="mealImg" name="mealImg"> photoButton.innerText = "Take Photo";
`; input.setAttribute("hidden", "");
player.removeAttribute("hidden", "");
photoButton.removeAttribute("hidden", "");
// getting video stream from user's camera then displaying it on a video element
navigator.mediaDevices.getUserMedia({video: true,}).then((stream)=>{
player.srcObject = stream;
});
} }
}); });
//addressing sourcing image from local file //addressing sourcing image from local file
let imgDataURL = "";
document.getElementById("mealImg").addEventListener("change", function() { document.getElementById("mealImg").addEventListener("change", function() {
console.log("reading used"); console.log("reading used");
const reader = new FileReader(); const reader = new FileReader();
@@ -171,10 +219,10 @@ function setupUpdate(){
newData[`${key}`] = `${value}`; newData[`${key}`] = `${value}`;
} }
// Account for the case where image is not updated // Account for the case where image is not updated
if (`${key}` === "mealImg" && document.getElementById("mealImg").value === "") { if (`${key}` === "mealImg" && imgDataURL === "") {
newData["mealImg"] = currReview["mealImg"]; newData["mealImg"] = currReview["mealImg"];
} }
else if (`${key}` === "mealImg" && select.value == "file") { else if (`${key}` === "mealImg") {
newData["mealImg"] = imgDataURL; newData["mealImg"] = imgDataURL;
} }
} }