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

Added a download link with filename for exported images

This commit is contained in:
Vftdan 2024-04-24 15:48:20 +02:00
parent 16606663e9
commit 9631a7a61a
2 changed files with 10 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -42,7 +42,10 @@
<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>
<img id="imageExport" src="" hidden/> <img id="imageExport" src="" hidden/>
<p id="exportSaveMessage" hidden>To save right click and choose "Save image as..."</p> <p>
<a id="imageExportLink" download href="" target="_blank" hidden>Download</a>
</p>
<p id="exportSaveMessage" hidden>To save right click and choose "Save image as..." or click the "Download" link</p>
<input type="text" id="fullNeomojiName" name="" value="" readonly hidden/> <input type="text" id="fullNeomojiName" name="" value="" readonly hidden/>
<p>Neomojis are from the following sources: </p> <p>Neomojis are from the following sources: </p>
<ul> <ul>

7
neomojimixer.js
View File

@ -16,6 +16,7 @@ const NeomojiMixer = (function(NeomojiMixer) {
const canvas = document.getElementById("canvas_export"); const canvas = document.getElementById("canvas_export");
const export_img = document.getElementById("imageExport"); const export_img = document.getElementById("imageExport");
const export_img_download = document.getElementById("imageExportLink");
const neomoji_name = document.getElementById("fullNeomojiName"); const neomoji_name = document.getElementById("fullNeomojiName");
//Stats //Stats
@ -259,7 +260,8 @@ const NeomojiMixer = (function(NeomojiMixer) {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
neomoji_name.value = part_handlers.body.getSelectedEntry()[0] + "_" + part_handlers.eyes.getSelectedEntry()[0] + "_" + part_handlers.mouth.getSelectedEntry()[0] + "_" + part_handlers.arms.getSelectedEntry()[0]; //Set name for the emoji to use as the image name and to show as shortcode let name = part_handlers.body.getSelectedEntry()[0] + "_" + part_handlers.eyes.getSelectedEntry()[0] + "_" + part_handlers.mouth.getSelectedEntry()[0] + "_" + part_handlers.arms.getSelectedEntry()[0];
neomoji_name.value = name; //Set name for the emoji to use as the image name and to show as shortcode
let export_layers = [ let export_layers = [
part_handlers.body.createExportImage(), part_handlers.body.createExportImage(),
@ -281,11 +283,14 @@ const NeomojiMixer = (function(NeomojiMixer) {
} }
let img = canvas.toDataURL(export_mime, export_options); let img = canvas.toDataURL(export_mime, export_options);
export_img.src = img; export_img.src = img;
export_img_download.href = img;
export_img_download.download = name + "." + (export_mime.match(/\/(\w+)/) || ["", "png"])[1];
} }
setTimeout(layerCallback, 0); //Run asynchronously setTimeout(layerCallback, 0); //Run asynchronously
export_img.hidden = false; export_img.hidden = false;
export_img_download.hidden = false;
neomoji_name.hidden = false; neomoji_name.hidden = false;
document.getElementById("exportSaveMessage").hidden = false; document.getElementById("exportSaveMessage").hidden = false;
} }