add previously made stuff

2025-08-03 15:06:00 -07:00
parent 155044e0b4
commit 504944f6ad
9 changed files with 409 additions and 0 deletions
--- a/text-to-image/gg-sans.woff2
+++ b/text-to-image/gg-sans.woff2
--- a/text-to-image/index.html
+++ b/text-to-image/index.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Text to Image</title>
+        <link rel="stylesheet" href="style.css" />
+    </head>
+    <body>
+        <div>
+            <select id="background">
+                <option value="#00000000">Transparent</option>
+                <option value="#1A1A1E">Dark</option>
+                <option value="#323339">Ash</option>
+                <option value="#070709">Onyx</option>
+                <option value="#FBFBFB">Light</option>
+            </select>
+            <textarea id="input" autofocus></textarea>
+            <canvas id="canvas"></canvas>
+            <img alt="preview" id="preview" />
+        </div>
+        <script src="script.js"></script>
+    </body>
+</html>
--- a/text-to-image/script.js
+++ b/text-to-image/script.js
@@ -0,0 +1,66 @@
+const $ = (x) => document.getElementById(x);
+
+const input = $("input");
+const canvas = $("canvas");
+const preview = $("preview");
+const background = $("background");
+
+const ctx = canvas.getContext("2d");
+const lineHeight = 22;
+
+let height = 0;
+let line = 0;
+
+input.addEventListener("input", () => {
+    const lines = input.value.split("\n");
+    height = lines.length;
+    canvas.width = 512;
+    ctx.font =
+        '16px "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
+    ctx.textBaseline = "hanging";
+    line = 0;
+    lines.forEach(renderText);
+    canvas.height = 22 * height;
+    ctx.fillStyle = background.value;
+    ctx.fillRect(0, 0, canvas.width, canvas.height);
+    ctx.fillStyle = "#EFEFF0";
+    ctx.font =
+        '16px "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
+    ctx.textBaseline = "hanging";
+    line = 0;
+    lines.forEach(renderText);
+    preview.src = canvas.toDataURL();
+    canvas.toBlob((blob) => {
+        const item = new ClipboardItem({ "image/png": blob });
+        navigator.clipboard.write([item]);
+    });
+});
+
+input.addEventListener("keydown", (e) => {
+    if (e.key == "c" && e.ctrlKey) {
+        e.preventDefault();
+    }
+});
+
+function renderText(item, i) {
+    line++;
+    if (ctx.measureText(item).width > canvas.width) {
+        let rn = ctx.measureText(item).width;
+        let goal = canvas.width;
+        let len = item.length;
+        while (rn > goal) {
+            len--;
+            rn = ctx.measureText(item.slice(0, len)).width;
+        }
+        ctx.fillText(
+            item.slice(0, len),
+            0,
+            (line - 1) * lineHeight + 2,
+            canvas.width,
+        );
+        renderText(item.slice(len), line);
+        height++;
+    } else {
+        ctx.fillText(item, 0, (line - 1) * lineHeight + 2, canvas.width);
+    }
+}
--- a/text-to-image/style.css
+++ b/text-to-image/style.css
@@ -0,0 +1,28 @@
+@font-face {
+    font-family: "gg sans";
+    src: url(gg-sans.woff2);
+}
+
+textarea {
+    outline: none;
+    font-size: 16px;
+    font-family:
+        "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    line-height: 22px;
+    white-space: pre-wrap;
+    resize: none;
+    height: max-content;
+    padding: 0;
+    border: 0;
+}
+
+canvas {
+    display: none;
+}
+
+div {
+    display: flex;
+    flex-direction: column;
+    width: 512px;
+    background: #aaaaaa;
+}