h2i . time to make it prettier

2022-05-27 21:13:42 +02:00 · 2022-05-27 21:13:42 +02:00 · 190249a3aa
commit 190249a3aa
parent 9f5fc3b3b0
1 changed files with 112 additions and 0 deletions
--- a/h2i.html
+++ b/h2i.html
@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>heonian to image</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        @font-face {
+            font-family: 'heonian';
+            src: url("https://cronut.cafe/~lustlion/myrheon/HeonianAlone.otf");
+            /* nooo remi dont do that */
+        }
+
+        body {
+            font-family: Arial;
+            overflow: hidden;
+            margin-right: 0;
+            margin-bottom: 0;
+        }
+
+        #hinput {
+            font-family: 'heonian';
+        }
+
+        canvas {
+            width: 100%;
+            height: 100%;
+        }
+    </style>
+</head>
+
+<body>
+    heonian: <input type="text" name="hinput" id="hinput"><br>
+    text color: <input type="text" name="tcolor" value="#000000"><br>
+    background color: <input type="text" name="bcolor" value="#00000000"><br>
+    font size: <input type="text" name="fsize" value="16"><br>
+    <button>save as image</button>
+
+    <canvas width="800" height="800" id="c"></canvas>
+    <script src="/ime.js"></script>
+    <script>
+        let ctx = document.getElementById('c').getContext('2d');
+        let hinput = document.getElementsByName('hinput')[0];
+        let tcolor = document.getElementsByName('tcolor')[0];
+        let bcolor = document.getElementsByName('bcolor')[0];
+        let fsize = document.getElementsByName('fsize')[0];
+
+        function update() {
+            ctx.canvas.width = window.innerWidth;
+            ctx.canvas.height = window.innerHeight;
+            ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height)
+            ctx.fillStyle = bcolor.value;
+            ctx.fillRect(0, 0, ctx.canvas.height, ctx.canvas.height);
+            ctx.fillStyle = tcolor.value;
+            ctx.font = fsize.value + "px heonian";
+            ctx.fillText(hinput.value, 0, fsize.value);
+        }
+
+        let ime = new HeonianIME(hinput);
+
+        hinput.addEventListener('keydown', () => { update() });
+        tcolor.addEventListener('keyup', () => { update() });
+        bcolor.addEventListener('keyup', () => { update() });
+        fsize.addEventListener('keyup', () => { update() });
+        window.onresize = () => { update() };
+
+        function saveAsImage() {
+            //blatantly stolen from stackoverflow =w=
+            var canvas = ctx.canvas,
+                w = canvas.width, h = canvas.height,
+                pix = { x: [], y: [] },
+                imageData = ctx.getImageData(0, 0, canvas.width, canvas.height),
+                x, y, index;
+
+            for (y = 0; y < h; y++) {
+                for (x = 0; x < w; x++) {
+                    index = (y * w + x) * 4;
+                    if (imageData.data[index + 3] > 0) {
+                        pix.x.push(x);
+                        pix.y.push(y);
+                    }
+                }
+            }
+            pix.x.sort(function (a, b) { return a - b });
+            pix.y.sort(function (a, b) { return a - b });
+            var n = pix.x.length - 1;
+
+            w = 1 + pix.x[n] - pix.x[0];
+            h = 1 + pix.y[n] - pix.y[0];
+            var cut = ctx.getImageData(pix.x[0], pix.y[0], w, h);
+
+            canvas.width = w;
+            canvas.height = h;
+            ctx.putImageData(cut, 0, 0);
+
+            var image = canvas.toDataURL("image/png");
+            var link = document.createElement("a");
+            link.href = image;
+            link.download = "heonian.png";
+            link.innerHTML = "remi doing hacky solutions? NEVER";
+            link.click();            
+            update();
+        }
+
+        document.querySelector("button").addEventListener("click", () => {saveAsImage();});
+    </script>
+</body>
+
+</html>