feat: use webcam to take picture
This commit is contained in:
parent
76872c7bde
commit
f08b0b4d51
16
index.html
16
index.html
|
|
@ -11,21 +11,22 @@
|
|||
<link rel="stylesheet" href="style.css">
|
||||
<title>Imagine - Image Editor</title>
|
||||
</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="column">
|
||||
<div class="hero is-fullheight" style="min-height: 100dvh;">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<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">
|
||||
<button id="take-picture"
|
||||
class="button is-large is-responsive is-fullwidth py-6"
|
||||
style="display: flex; flex-direction: column; align-items: center;"
|
||||
>
|
||||
<i class="fa-solid fa-6x fa-camera mb-4"></i>
|
||||
Take a Picture
|
||||
<i class="fa-solid fa-6x fa-video mb-4"></i>
|
||||
Use Camera
|
||||
</button>
|
||||
</div>
|
||||
<div class="column">
|
||||
|
|
@ -46,10 +47,15 @@
|
|||
bottom: 30px">
|
||||
<i class="fa-solid fa-sliders mr-2"></i> Settings
|
||||
</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">
|
||||
<i class="fa-solid fa-arrow-left mr-2"></i> Back
|
||||
</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>
|
||||
|
|
|
|||
45
main.js
45
main.js
|
|
@ -1,4 +1,5 @@
|
|||
let canvas;
|
||||
let video;
|
||||
let ctx;
|
||||
let settings = {
|
||||
brightness: {},
|
||||
|
|
@ -12,10 +13,12 @@ const img = new Image();
|
|||
document.addEventListener("DOMContentLoaded", function() {
|
||||
canvas = document.getElementById("myCanvas");
|
||||
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
|
||||
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("save").addEventListener("click", save_image)
|
||||
|
|
@ -23,6 +26,20 @@ document.addEventListener("DOMContentLoaded", function() {
|
|||
|
||||
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) {
|
||||
// make an array out of an iterable
|
||||
const elements = [...document.getElementsByClassName(setting)];
|
||||
|
|
@ -48,13 +65,31 @@ function reset_all(setting) {
|
|||
draw(true);
|
||||
}
|
||||
|
||||
function take_picture() {
|
||||
document.body.classList.add("editor-enabled");
|
||||
function use_camera() {
|
||||
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() {
|
||||
document.body.classList.add("editor-enabled");
|
||||
document.body.className = "editor-active";
|
||||
|
||||
console.log(this.files[0]);
|
||||
|
||||
|
|
|
|||
17
style.css
17
style.css
|
|
@ -8,10 +8,23 @@ canvas {
|
|||
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;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue