img wip

3 years ago · c08b00b7bc
parent d221dc16a0
commit c08b00b7bc
4 changed files with 24 additions and 2 deletions
--- a/index.html
+++ b/index.html
@ -4,12 +4,17 @@
 		<meta charset="UTF-8" />
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<script src="script.js" defer></script>
+		<script src="labels.js" defer></script>
+		<script src="picture.js" defer></script>
 		<link rel="stylesheet" href="style.css" />
 		<title>Concrete Label</title>
 	</head>
 	<body>
 		<div id="container">
+			<figure class="background-image">
+				<!-- <img src="img.jpg" alt="" /> -->
+				<input type="file" />
+			</figure>
 			<div id="editor"></div>
 			<div class="text-input">
 				<form class="modal">
--- a/labels.js
+++ b/labels.js
@ -119,8 +119,8 @@ function drawLabel() {
 			// Cancel button
 			cancel.addEventListener("click", (e) => {
 				e.preventDefault();
-				reject("no input");
 				textForm.classList.remove("visible");
+				reject("no input");
 			});
 		}).then(() => {
 			// Create the label
--- a/picture.js
+++ b/picture.js
@ -0,0 +1,10 @@
+document.querySelector('input[type="file"]').addEventListener("change", function () {
+	if (this.files && this.files[0]) {
+		var img = document.querySelector("img");
+		img.onload = () => {
+			URL.revokeObjectURL(img.src); // no longer needed, free memory
+		};
+
+		img.src = URL.createObjectURL(this.files[0]); // set src to blob url
+	}
+});
--- a/style.css
+++ b/style.css
@ -112,3 +112,10 @@ body {
 	border: none;
 	cursor: pointer;
 }
+
+.background-image {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(50%, 50%);
+}