Export image

agatemosu · Jul 22, 2024 · c921cf5 · c921cf5
1 parent 31b97df
commit c921cf5
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 11 deletions.
diff --git a/index.html b/index.html
@@ -18,8 +18,11 @@
 		/>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.3/dragula.min.js"></script>
 		<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.min.js"></script>
+		<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
 	</head>
 	<body>
+		<div id="blackout" data-visibility="hidden" onclick="hideBlackout()"></div>
+
 		<main>
 			<div class="row">
 				<div
@@ -33,7 +36,7 @@
 					</div>
 				</div>
 				<div class="tier sort"></div>
-				<div class="tier-options">
+				<div class="tier-options" data-html2canvas-ignore>
 					<div class="options-container">
 						<div class="option delete">
 							<img
@@ -72,7 +75,7 @@
 					</div>
 				</div>
 				<div class="tier sort"></div>
-				<div class="tier-options">
+				<div class="tier-options" data-html2canvas-ignore>
 					<div class="options-container">
 						<div class="option delete">
 							<img
@@ -111,7 +114,7 @@
 					</div>
 				</div>
 				<div class="tier sort"></div>
-				<div class="tier-options">
+				<div class="tier-options" data-html2canvas-ignore>
 					<div class="options-container">
 						<div class="option delete">
 							<img
@@ -150,7 +153,7 @@
 					</div>
 				</div>
 				<div class="tier sort"></div>
-				<div class="tier-options">
+				<div class="tier-options" data-html2canvas-ignore>
 					<div class="options-container">
 						<div class="option delete">
 							<img
@@ -189,7 +192,7 @@
 					</div>
 				</div>
 				<div class="tier sort"></div>
-				<div class="tier-options">
+				<div class="tier-options" data-html2canvas-ignore>
 					<div class="options-container">
 						<div class="option delete">
 							<img
@@ -228,7 +231,7 @@
 					</div>
 				</div>
 				<div class="tier sort"></div>
-				<div class="tier-options">
+				<div class="tier-options" data-html2canvas-ignore>
 					<div class="options-container">
 						<div class="option delete">
 							<img
@@ -257,12 +260,36 @@
 		</main>
 
 		<div id="buttons-container">
-			<button type="button" onclick="addRow()">New tier</button>
-			<button type="button" onclick="selectImages()">Select images</button>
+			<button class="button" type="button" onclick="addRow()">New tier</button>
+
+			<button class="button" type="button" onclick="selectImages()">
+				Select images
+			</button>
+
 			<input type="checkbox" id="square-img" onchange="dynamicStyle(this)" />
 			<label for="square-img">Square images</label>
+
+			<button class="button" type="button" onclick="exportImage()">
+				Export image
+			</button>
 		</div>
 
 		<div id="images-bar" class="sort"></div>
+
+		<div
+			id="export-container"
+			class="export-container"
+			data-visibility="hidden"
+		>
+			<div class="exported-image-container">
+				<img id="exported-image" alt="Exported image" />
+			</div>
+
+			<div class="export-button-container">
+				<button class="button" type="button" onclick="saveImage()">
+					Save image
+				</button>
+			</div>
+		</div>
 	</body>
 </html>
diff --git a/script.js b/script.js
@@ -15,6 +15,9 @@ let drake;
 const mainContainer = document.querySelector("main");
 const imagesBar = document.querySelector("#images-bar");
 const dynamicStyles = document.querySelector("#dynamic-styles");
+const exportContainer = document.querySelector("#export-container");
+const exportedImage = document.querySelector("#exported-image");
+const blackout = document.querySelector("#blackout");
 
 document.querySelectorAll(".tooltip").forEach((tooltip, index) => {
 	const defaultColor = defaultColors[index];
@@ -94,6 +97,7 @@ function addRow(tierName = "New tier", defaultColor = "#778899") {
 	// Options (i.e. right)
 	const optionsDiv = document.createElement("div");
 	optionsDiv.className = "tier-options";
+	optionsDiv.dataset.html2canvasIgnore = "";
 
 	const optionsContainer = document.createElement("div");
 	optionsContainer.className = "options-container";
@@ -235,3 +239,27 @@ function dynamicStyle(checkbox) {
 		dynamicStyles.innerHTML = dynamicStyles.innerHTML.replace(importText, "");
 	}
 }
+
+async function exportImage() {
+	const canvas = await html2canvas(mainContainer, {
+		scale: 1.5,
+		windowWidth: 1080,
+	});
+	exportedImage.src = canvas.toDataURL();
+
+	exportContainer.dataset.visibility = "visible";
+	blackout.dataset.visibility = "visible";
+}
+
+function saveImage() {
+	const downloadLink = document.createElement("a");
+	downloadLink.href = exportedImage.src;
+	downloadLink.download = "image.png";
+
+	downloadLink.click();
+}
+
+function hideBlackout() {
+	blackout.dataset.visibility = "hidden";
+	exportContainer.dataset.visibility = "hidden";
+}
diff --git a/styles.css b/styles.css
@@ -1,3 +1,6 @@
+@import "./styles/blackout.css";
+@import "./styles/export.css";
+
 :root {
 	--black: #000;
 	--white: #fff;
@@ -149,18 +152,18 @@ p {
 	border-bottom: 1px solid var(--buttons-color);
 }
 
-#buttons-container button {
+.button {
 	border: none;
 	border-radius: 3px;
-	height: 30px;
+	min-height: 30px;
 	min-width: 100px;
 	margin: 10px;
 	color: var(--button-text);
 	background-color: var(--buttons-color);
 	transition: ease 200ms;
 }
 
-#buttons-container button:hover {
+.button:hover {
 	background-color: var(--button-hover);
 	cursor: pointer;
 }

diff --git a/styles/blackout.css b/styles/blackout.css
@@ -0,0 +1,15 @@
+#blackout {
+	position: fixed;
+	opacity: 0;
+	z-index: 1;
+	transition: opacity 300ms;
+	background-color: #000;
+	width: 100%;
+	height: 100%;
+	pointer-events: none;
+}
+
+#blackout[data-visibility="visible"] {
+	opacity: 0.5;
+	pointer-events: all;
+}
diff --git a/styles/export.css b/styles/export.css
@@ -0,0 +1,47 @@
+.export-container {
+	position: fixed;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, -50%);
+	opacity: 0;
+	z-index: 2;
+	transition: opacity 300ms;
+	box-sizing: border-box;
+	border-radius: 10px;
+	background-color: var(--white);
+	padding: 20px;
+	width: 100%;
+	pointer-events: none;
+}
+
+.export-container[data-visibility="visible"] {
+	opacity: 1;
+	pointer-events: all;
+}
+
+.exported-image-container {
+	max-height: 512px;
+	overflow-y: auto;
+}
+
+.exported-image-container img {
+	vertical-align: top;
+	width: 100%;
+}
+
+.export-button-container {
+	display: flex;
+	justify-content: center;
+	margin-top: 20px;
+}
+
+.export-button-container button {
+	margin: 0;
+	padding: 10px 15px;
+}
+
+@media (width >= 786px) {
+	.export-container {
+		max-width: 786px;
+	}
+}