-
+
+
@@ -46,10 +47,15 @@
bottom: 30px">
Settings
-
+
+
+
diff --git a/main.js b/main.js
index 0960448..378e716 100644
--- a/main.js
+++ b/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]);
diff --git a/style.css b/style.css
index 2bed156..205c7ca 100644
--- a/style.css
+++ b/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;
}