university/Imagine
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat: use webcam to take picture

Browse source
This commit is contained in:
Orangerot 2024-12-10 06:28:50 +01:00
parent 76872c7bde
commit f08b0b4d51
3 changed files with 66 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
index.html
View file

@ -11,21 +11,22 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<title>Imagine - Image Editor</title> <title>Imagine - Image Editor</title>
</head> </head>
<body style="padding-top: 100dvh; " class=""> <body style="padding-top: 100dvh; " class="import-active">
<div class="navbar columns is-mobile is-fixed-top"> <div class="navbar columns is-mobile is-fixed-top">
<div class="column"> <div class="column">
<div class="hero is-fullheight" style="min-height: 100dvh;"> <div class="hero is-fullheight" style="min-height: 100dvh;">
<div class="hero-body"> <div class="hero-body">
<div class="container"> <div class="container">
<canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas> <canvas id="myCanvas" class="is-visible-editor" width="300" height="300"></canvas>
<div class="columns is-mobile is-hidden-editor"> <video id="video" class="is-visible-camera" width="300" height="300"></video>
<div class="columns is-mobile is-visible-import">
<div class="column"> <div class="column">
<button id="take-picture" <button id="take-picture"
class="button is-large is-responsive is-fullwidth py-6" class="button is-large is-responsive is-fullwidth py-6"
style="display: flex; flex-direction: column; align-items: center;" style="display: flex; flex-direction: column; align-items: center;"
> >
<i class="fa-solid fa-6x fa-camera mb-4"></i> <i class="fa-solid fa-6x fa-video mb-4"></i>
Take a Picture Use Camera
</button> </button>
</div> </div>
<div class="column"> <div class="column">
@ -46,10 +47,15 @@
bottom: 30px"> bottom: 30px">
<i class="fa-solid fa-sliders mr-2"></i> Settings <i class="fa-solid fa-sliders mr-2"></i> Settings
</a> </a>
<button id="back" class="button is-visible-editor" style="position: absolute; left: 30px; <button id="back" class="button is-hidden-import" style="position: absolute; left: 30px;
top: 30px"> top: 30px">
<i class="fa-solid fa-arrow-left mr-2"></i> Back <i class="fa-solid fa-arrow-left mr-2"></i> Back
</button> </button>
<div style="position: absolute; bottom: 30px; left: 30px; right: 30px">
<button id="cheese" class="button is-large is-fullwidth is-visible-camera" >
<i class="fa-solid fa-camera mr-2"></i> Take a Picture
</button>
</div>
</div> </div>
</div> </div>
</div> </div>

45
main.js
View file

@ -1,4 +1,5 @@
let canvas; let canvas;
let video;
let ctx; let ctx;
let settings = { let settings = {
brightness: {}, brightness: {},
@ -12,10 +13,12 @@ const img = new Image();
document.addEventListener("DOMContentLoaded", function() { document.addEventListener("DOMContentLoaded", function() {
canvas = document.getElementById("myCanvas"); canvas = document.getElementById("myCanvas");
ctx = canvas.getContext("2d"); ctx = canvas.getContext("2d");
document.getElementById("back").addEventListener("click", () => document.body.classList.remove("editor-enabled")); video = document.getElementById("video");
document.getElementById("back").addEventListener("click", () => document.body.className = "import-active");
// bind listeners // bind listeners
document.getElementById("take-picture").addEventListener("click", take_picture); document.getElementById("take-picture").addEventListener("click", use_camera);
document.getElementById("cheese").addEventListener("click", take_picture);
document.getElementById("upload-image").addEventListener("change", upload_image) document.getElementById("upload-image").addEventListener("change", upload_image)
document.getElementById("save").addEventListener("click", save_image) document.getElementById("save").addEventListener("click", save_image)
@ -23,6 +26,20 @@ document.addEventListener("DOMContentLoaded", function() {
window.addEventListener("resize", () => draw(true)) window.addEventListener("resize", () => draw(true))
video.addEventListener("canplay", function() {
const width = 320;
let height = video.videoHeight / (video.videoWidth / width);
// Firefox currently has a bug where the height can't be read from
// the video, so we will make assumptions if this happens.
if (isNaN(height)) {
height = width / (4 / 3);
}
video.width = width;
video.height = height;
});
for (let setting in settings) { for (let setting in settings) {
// make an array out of an iterable // make an array out of an iterable
const elements = [...document.getElementsByClassName(setting)]; const elements = [...document.getElementsByClassName(setting)];
@ -48,13 +65,31 @@ function reset_all(setting) {
draw(true); draw(true);
} }
function take_picture() { function use_camera() {
document.body.classList.add("editor-enabled"); navigator.mediaDevices
.getUserMedia({ video: true, audio: false })
.then((stream) => {
video.srcObject = stream;
video.play();
document.body.className = "camera-active";
})
.catch((err) => {
console.error(`An error occurred: ${err}`);
});
}
function take_picture() {
canvas.width = video.width;
canvas.height = video.height;
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
img.src = canvas.toDataURL("image/png");
img.onload = () => draw(true);
document.body.className = "editor-active";
} }
function upload_image() { function upload_image() {
document.body.classList.add("editor-enabled"); document.body.className = "editor-active";
console.log(this.files[0]); console.log(this.files[0]);

17
style.css
View file

@ -8,10 +8,23 @@ canvas {
max-height: 100%; max-height: 100%;
} }
body:not(.editor-enabled) .is-visible-editor { video {
width: 100%;
height: 100%;
}
body:not(.import-active) .is-visible-import {
display: none !important; display: none !important;
} }
body.editor-enabled .is-hidden-editor { body:not(.camera-active) .is-visible-camera {
display: none !important;
}
body:not(.editor-active) .is-visible-editor {
display: none !important;
}
body.import-active .is-hidden-import {
display: none !important; display: none !important;
} }