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

Merge pull request #103 from cse110-fa22-group29/49-image-feature

Browse Source 
Adding implementation of the photo taking feature to sprint-3
This commit is contained in:
dusk-moon
2022-12-01 19:56:02 -08:00
committed by GitHub
parent 32dbb37034 1c38198fc7
commit ac9b101b47
4 changed files with 143 additions and 42 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>
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
<option value="photo">Take a Photo</option>
</select>
<label for="mealImage" id="source">
<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>

10
source/ReviewDetails.html
View File

@@ -70,11 +70,15 @@
<legend>PICTURE:</legend>
<select id="select" name="select">
<option value="file">File Upload</option>
<option value="url">From an URL</option>
<option value="photo">Take a Photo</option>
</select>
<label for="mealImage" id="source">
<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>

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

@@ -18,30 +18,75 @@ function initFormHandler() {
let tagContainer = document.getElementById("tag-container-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
if (select.value == "file") {
input.innerHTML = `
Source:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
`;
// enabling file upload components and hiding photo taking components
input.removeAttribute("hidden", "");
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 {
input.innerHTML = `
Source:
<input type="text" id="mealImg" name="mealImg">
`;
// enabling photo taking components and hiding file upload components
videoMode = true;
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
let imgDataURL = "";
document.getElementById("mealImg").addEventListener("change", function() {
const reader = new FileReader();
@@ -68,7 +113,7 @@ function initFormHandler() {
if (`${key}` !== "tag-form") {
reviewObject[`${key}`] = `${value}`;
}
if (`${key}` === "mealImg" && select.value == "file") {
if (`${key}` === "mealImg" && imgDataURL !== "") {
reviewObject["mealImg"] = imgDataURL;
}
}

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

@@ -118,31 +118,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
*/
let select = document.getElementById("select");
const input = document.getElementById("mealImg");
select.addEventListener("change", function() {
const input = document.getElementById("source");
console.log("1");
// Select a photo with HTML file selector
if (select.value == "file") {
input.innerHTML = `
Source:
<input type="file" accept="image/*" id="mealImg" name="mealImg">
`;
// enabling file upload components and hiding photo taking components
input.removeAttribute("hidden", "");
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 {
input.innerHTML = `
Source:
<input type="text" id="mealImg" name="mealImg">
`;
// enabling photo taking components and hiding file upload components
videoMode = true;
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
let imgDataURL = "";
document.getElementById("mealImg").addEventListener("change", function() {
console.log("reading used");
const reader = new FileReader();
@@ -173,10 +221,10 @@ function setupUpdate(){
newData[`${key}`] = `${value}`;
}
// Account for the case where image is not updated
if (`${key}` === "mealImg" && document.getElementById("mealImg").value === "") {
if (`${key}` === "mealImg" && imgDataURL === "") {
newData["mealImg"] = currReview["mealImg"];
}
else if (`${key}` === "mealImg" && select.value == "file") {
else if (`${key}` === "mealImg") {
newData["mealImg"] = imgDataURL;
}
}