From 16606663e9a13f960725033d32a4e9ec6cc98935 Mon Sep 17 00:00:00 2001
From: Vftdan <vftdan@gmail.com>
Date: Wed, 24 Apr 2024 15:43:56 +0200
Subject: [PATCH] Added export format & quality options

---
 index.html       | 16 +++++++++++++++-
 neomojimixer.css | 23 ++++++++++++++++++++---
 neomojimixer.js  |  7 ++++++-
 3 files changed, 41 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index ce7eaa7..240a133 100644
--- a/index.html
+++ b/index.html
@@ -23,7 +23,21 @@
 			<div class="mouth"><button id="mouth_left" onclick="NeomojiMixer.part_handlers.mouth.onClickPrev();" disabled><</button><select class="name" id="mouth_name" onchange="NeomojiMixer.part_handlers.mouth.onChangeDropdown();" disabled>name mouth</select><button id="mouth_right" onclick="NeomojiMixer.part_handlers.mouth.onClickNext();" disabled>></button></div>
 			<div class="arms"><button id="arms_left" onclick="NeomojiMixer.part_handlers.arms.onClickPrev();" disabled><</button><select class="name" id="arms_name" onchange="NeomojiMixer.part_handlers.arms.onChangeDropdown();" disabled>name arms</select><button id="arms_right" onclick="NeomojiMixer.part_handlers.arms.onClickNext();" disabled>></button></div>
 			<div class="random"><button id="random" onclick="NeomojiMixer.randomize();" disabled>Random</button></div>
-			<div class="export"><button id="export" onclick="NeomojiMixer.exportImage();" disabled>Export Image</button></div>
+			<div class="export">
+				<button id="export" onclick="NeomojiMixer.exportImage();" disabled>Export Image</button>
+				<label>
+					Export type:
+					<input type="text" id="export-mime" list="export-mime-list" value="image/png" />
+					<datalist id="export-mime-list">
+						<option value="image/png"></option>
+						<option value="image/webp"></option>
+						<option value="image/jpeg"></option>
+					</datalist>
+				</label>
+				<label>
+					<input type="checkbox" id="export-quality-enabled" />Quality:<input type="number" id="export-quality" min="0.0" max="1.0" step="0.1" value="1.0" />
+				</label>
+			</div>
 		</div>
 		<div id="stats">stats</div>
 		<canvas id="canvas_export" width="256" height="256" hidden name="test.png"></canvas>
diff --git a/neomojimixer.css b/neomojimixer.css
index 39862d5..558890e 100644
--- a/neomojimixer.css
+++ b/neomojimixer.css
@@ -34,16 +34,33 @@ img.arms {
 	width: 256px;
 }
 
+input, button, select {
+	box-sizing: border-box;
+}
+
 button {
 	width: 25px;
 	height: 25px;
 }
 
-button#random {
-	width: 250px;
+input[type="checkbox"] {
+	margin: 4px;
+	width: 17px;
+	height: 17px;
 }
 
-button#export {
+.export > label {
+	display: block;
+	width: 250px;
+	clear: both;
+}
+
+.export > label > input:not([type="checkbox"]) {
+	width: 125px;
+	float: right;
+}
+
+button#random, button#export {
 	width: 250px;
 }
 
diff --git a/neomojimixer.js b/neomojimixer.js
index 6a50a50..a38ad3e 100644
--- a/neomojimixer.js
+++ b/neomojimixer.js
@@ -251,6 +251,11 @@ const NeomojiMixer = (function(NeomojiMixer) {
 
 	function exportImage() { //Export image so it can be saved as one PNG
 		let ctx=canvas.getContext("2d");
+		let export_mime = document.getElementById("export-mime").value;
+		let export_options = undefined;
+		if (document.getElementById("export-quality-enabled").checked) {
+			export_options = +document.getElementById("export-quality").value;
+		}
 
 		ctx.clearRect(0, 0, canvas.width, canvas.height);
 
@@ -274,7 +279,7 @@ const NeomojiMixer = (function(NeomojiMixer) {
 				export_layers.shift()
 				ctx.drawImage(layer, 0, 0, 256, 256);
 			}
-			let img = canvas.toDataURL("image/png");
+			let img = canvas.toDataURL(export_mime, export_options);
 			export_img.src = img;
 		}