mirror of
https://github.com/cse110-fa22-group29/cse110-fa22-group29.git
synced 2024-11-12 22:16:16 +00:00
Implementation of photo taking feature
This commit is contained in:
parent
20cdc4ce76
commit
0d17ddee53
@ -39,13 +39,17 @@
|
|||||||
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
<legend>MEAL NAME:</legend>
|
<legend>MEAL NAME:</legend>
|
||||||
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>
|
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>
|
||||||
|
@ -70,13 +70,17 @@
|
|||||||
<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>
|
||||||
|
|
||||||
|
<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>
|
||||||
<legend>MEAL NAME:</legend>
|
<legend>MEAL NAME:</legend>
|
||||||
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>
|
<label for="Name: "> <input type="text" id="mealName" name="mealName" required> </label>
|
||||||
|
@ -17,31 +17,76 @@ function initFormHandler() {
|
|||||||
// Accesses form components
|
// Accesses form components
|
||||||
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
|
|
||||||
let select = document.getElementById("select");
|
|
||||||
select.addEventListener("change", function() {
|
|
||||||
const input = document.getElementById("source");
|
|
||||||
|
|
||||||
|
// 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", "");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 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();
|
||||||
|
|
||||||
@ -53,7 +98,7 @@ function initFormHandler() {
|
|||||||
// Convert image file into data URL for local storage
|
// Convert image file into data URL for local storage
|
||||||
reader.readAsDataURL(document.getElementById("mealImg").files[0]);
|
reader.readAsDataURL(document.getElementById("mealImg").files[0]);
|
||||||
});
|
});
|
||||||
|
|
||||||
form.addEventListener("submit", function(e){
|
form.addEventListener("submit", function(e){
|
||||||
|
|
||||||
// Create reviewObject and put in storage
|
// Create reviewObject and put in storage
|
||||||
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -126,6 +171,6 @@ function initFormHandler() {
|
|||||||
}
|
}
|
||||||
tagField.value = "";
|
tagField.value = "";
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -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");
|
||||||
@ -115,32 +115,80 @@ function setupUpdate(){
|
|||||||
tagContainer.append(newTag);
|
tagContainer.append(newTag);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user