vftdan
/
neomojimixer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added export format & quality options

This commit is contained in:
Vftdan 2024-04-24 15:43:56 +02:00
parent 3c75ccb346
commit 16606663e9
3 changed files with 41 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
index.html
View File

@ -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="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="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="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>
<div id="stats">stats</div> <div id="stats">stats</div>
<canvas id="canvas_export" width="256" height="256" hidden name="test.png"></canvas> <canvas id="canvas_export" width="256" height="256" hidden name="test.png"></canvas>

23
neomojimixer.css
View File

@ -34,16 +34,33 @@ img.arms {
width: 256px; width: 256px;
} }
input, button, select {
box-sizing: border-box;
}
button { button {
width: 25px; width: 25px;
height: 25px; height: 25px;
} }
button#random { input[type="checkbox"] {
width: 250px; 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; width: 250px;
} }

7
neomojimixer.js
View File

@ -251,6 +251,11 @@ const NeomojiMixer = (function(NeomojiMixer) {
function exportImage() { //Export image so it can be saved as one PNG function exportImage() { //Export image so it can be saved as one PNG
let ctx=canvas.getContext("2d"); 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); ctx.clearRect(0, 0, canvas.width, canvas.height);
@ -274,7 +279,7 @@ const NeomojiMixer = (function(NeomojiMixer) {
export_layers.shift() export_layers.shift()
ctx.drawImage(layer, 0, 0, 256, 256); 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; export_img.src = img;
} }