Generate more creative filenames for downloads

index.html

@@ -69,6 +69,7 @@
 
             <div class="toolbar-item">
                 <button id="download-image">Download</button>
+                <span id="download-filename" class="toolbar-filename-label" title="Name of the downloaded image file"></span>
             </div>
         </div>
 

scripts/main.js

@@ -43,6 +43,7 @@ class PreviewGenerator {
         this.coverImage = null;
         this.titleText = "";
         this.superText = "";
+        this.generatedFilename = "";
 
         this.clearColor = "";
         this.coverImageScale = 1.0;
@@ -83,6 +84,8 @@ class PreviewGenerator {
         this._initForm();
         // Connect to mouse events to react to changes.
         this._initEvents();
+        // Update the download filename for the first time.
+        this._updateFilename();
 
         // Do the first render.
         this.render();
@@ -120,12 +123,14 @@ class PreviewGenerator {
         const titleText_input = document.getElementById("title-text");
         titleText_input.addEventListener("input", () => {
             this.titleText = titleText_input.value;
+            this._updateFilename();
             this.render();
         });
 
         const superText_input = document.getElementById("super-text");
         superText_input.addEventListener("input", () => {
             this.superText = superText_input.value;
+            this._updateFilename();
             this.render();
         });
 
@@ -213,6 +218,13 @@ class PreviewGenerator {
         });
     }
 
+    _updateFilename() {
+        this._generateFilename();
+
+        const filenameLabel = document.getElementById("download-filename");
+        filenameLabel.textContent = this.generatedFilename;
+    }
+
     _setCoverImageScale(value) {
         const backgroundImage_scale = document.getElementById("background-image-scale");
         backgroundImage_scale.value = value;
@@ -361,6 +373,40 @@ class PreviewGenerator {
         image.src = imagePath;
     }
 
+    _preprocessFilenamePart(inString) {
+        const cleanupRegex = /([^\p{L}0-9]+)/gui;
+        const diacriticRegex = /\p{Diacritic}/gui;
+
+        let outString = inString
+            .trim()
+            .toLowerCase()
+            .normalize("NFD")
+            .replace(diacriticRegex, "")
+            .replace(cleanupRegex, "-");
+
+        return outString;
+    }
+
+    _generateFilename() {
+        // Normalize and sanitize supertext and title.
+        let superPrefix = this._preprocessFilenamePart(this.superText);
+        let titlePostfix = this._preprocessFilenamePart(this.titleText);
+
+        if (superPrefix === "" && titlePostfix === "") {
+            this.generatedFilename = "image.webp";
+            return;
+        }
+
+        this.generatedFilename = superPrefix;
+        if (titlePostfix !== "") {
+            if (this.generatedFilename !== "") {
+                this.generatedFilename += "-";
+            }
+            this.generatedFilename += titlePostfix;
+        }
+        this.generatedFilename += ".webp";
+    }
+
     _saveRender() {
         if (!this.previewCanvas || !this.targetCanvas) {
             return;
@@ -372,7 +418,7 @@ class PreviewGenerator {
 
         const imageData = this.targetCanvas.toDataURL("image/webp", 0.95);
         const fakeAnchor = document.createElement("A");
-        fakeAnchor.setAttribute("download", "image.webp");
+        fakeAnchor.setAttribute("download", this.generatedFilename);
         fakeAnchor.setAttribute("href", imageData);
         fakeAnchor.click();
     }

styles/main.css

@@ -1,6 +1,7 @@
 :root {
     --background-color: #f9f9f9;
     --text-color: #343434;
+    --text-faint-color: #777f89;
 
     --button-normal-color: #2b314c;
     --button-hover-color: #444451;
@@ -89,6 +90,13 @@ body {
     padding: 4px 10px;
 }
 
+.toolbar-filename-label {
+    color: var(--text-faint-color);
+    cursor: help;
+    font-size: 14px;
+    text-align: right;
+}
+
 /* CANVAS STYLING. */
 
 .canvas-container {