feat: add download button

index.html

@@ -18,6 +18,7 @@
                 <textarea id="title" rows="8">Hello world</textarea>
                 <label for="font">Font size:</label>
                 <input id="font" type="number" value="72" />
+                <button type="button">Download</button>
             </form>
             <div class="preview">
                 <svg

src/download.ts

@@ -0,0 +1,9 @@
+export function download(name: string, content: string) {
+    const downloadLink = document.createElement("a");
+    downloadLink.href = content;
+    downloadLink.download = name;
+
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+}

src/main.ts

@@ -2,6 +2,7 @@ import { STRIPE_COLORS } from "./constants";
 import { getFontsRules } from "./fonts";
 import { SettingsManager } from "./settings";
 import { SvgBuilder } from "./svg";
+import { download } from "./download";
 
 import "./style.css";
 
@@ -19,6 +20,15 @@ if (!form) {
 
 const settings = new SettingsManager(form);
 
+const cover = new SvgBuilder(svg);
+
+cover
+    .setTheme(settings.theme)
+    .addStripes(STRIPE_COLORS)
+    .setYear(new Date().getUTCFullYear())
+    .setLocation("Пермь")
+    .setTitle({ text: settings.title, fontSize: settings.fontSize });
+
 settings.onSettingsChange((data) => {
     cover.setTitle({
         text: data.title,
@@ -28,14 +38,15 @@ settings.onSettingsChange((data) => {
     cover.setTheme(data.theme);
 });
 
-const cover = new SvgBuilder(svg);
+settings.onDownload(async () => {
+    const imageData = await cover.createDataUri();
 
-cover
-    .setTheme(settings.theme)
-    .addStripes(STRIPE_COLORS)
-    .setYear(new Date().getUTCFullYear())
-    .setLocation("Пермь")
-    .setTitle({ text: settings.title, fontSize: settings.fontSize });
+    download("sicamp.png", imageData);
+});
+
+async function initAsync() {
+    const rules = await getFontsRules();
+    cover.injectFonts(rules);
+}
 
-const rules = await getFontsRules();
-cover.injectFonts(rules);
+initAsync();

src/settings.ts

@@ -14,6 +14,7 @@ export class SettingsManager {
     private readonly themeSelect: HTMLSelectElement;
     private readonly textarea: HTMLTextAreaElement;
     private readonly fontSizeInput: HTMLInputElement;
+    private readonly downloadButton: HTMLButtonElement;
 
     constructor(private readonly form: HTMLFormElement) {
         const themeSelect =
@@ -42,6 +43,15 @@ export class SettingsManager {
         }
 
         this.fontSizeInput = fontSizeInput;
+
+        const downloadButton =
+            this.form.querySelector<HTMLButtonElement>("button");
+
+        if (!downloadButton) {
+            throw new Error("Cannot find download button");
+        }
+
+        this.downloadButton = downloadButton;
     }
 
     onSettingsChange(callback: SettingsChangeHandler) {
@@ -58,6 +68,10 @@ export class SettingsManager {
         this.fontSizeInput.addEventListener("change", handler);
     }
 
+    onDownload(callback: () => void) {
+        this.downloadButton.addEventListener("click", callback);
+    }
+
     get theme() {
         return this.themeSelect.value;
     }

src/svg.ts

@@ -22,7 +22,8 @@ const minWidth = 30;
 const maxWidth = 90;
 const marginLeft = 12;
 const marginBottom = 220;
-const viewPortHeight = 1280;
+const viewPortWidth = 1280;
+const viewPortHeight = 720;
 const stripesEnd = 180;
 const minVisibleWidth = 20;
 
@@ -146,6 +147,37 @@ export class SvgBuilder {
         return this;
     }
 
+    async createDataUri() {
+        return new Promise<string>((resolve, reject) => {
+            const img = new Image();
+
+            img.addEventListener("load", () => {
+                const canvas = document.createElement("canvas");
+                const ctx = canvas.getContext("2d")!;
+
+                // Устанавливаем размеры canvas
+                canvas.width = viewPortWidth;
+                canvas.height = viewPortHeight;
+
+                // Рисуем SVG на canvas
+                ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+                ctx.drawImage(img, 0, 0);
+
+                // Преобразуем canvas в PNG-данные
+                const pngData = canvas.toDataURL("image/png");
+
+                resolve(pngData);
+            });
+
+            img.addEventListener("error", reject);
+
+            img.src =
+                "data:image/svg+xml;utf8," +
+                encodeURIComponent(this.element.outerHTML);
+        });
+    }
+
     addStripes(classNames: string[]) {
         for (
             let y = marginBottom;