LMFAO

h2i.html

@@ -5,7 +5,7 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>heonian to image</title>
-    <meta name="description" content="">
+    <meta name="description" content="has this ever happened to you: i have no custom font support in google docs :(:(:( well now with the new h2i.html you will never have that problem again!">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <style>
         @font-face {
@@ -49,11 +49,19 @@
         canvas {
             width: 100%;
             height: 100%;
+            opacity: 0;
+            position: fixed;
+            pointer-events: none;
+            top: 0;
+            left: 0;
+        }
+
+        img {
             margin-left: 8px;
         }
 
         #heeheefunnyfloat {
-            max-width: 700px;
+            max-width: 500px;
             display: flex;
             flex-flow: row wrap;
             padding: 8px;
@@ -90,26 +98,30 @@
             <span>text color:</span><br>
             <input type="text" name="tcolor" value="#000000">
         </div>
-        <div>
+        <!-- <div> -->
-            <span>background color:</span><br>
+            <!-- <span>background color:</span><br> -->
-            <input type="text" name="bcolor" value="#00000000">
+            <!-- <input type="text" name="bcolor" value="#00000000"> -->
-
+        <!-- </div> -->
-        </div>
         <div>
             <span>font size:</span><br>
             <input type="text" name="fsize" value="24">
         </div>
-        <a>[ save as image ]</a>
+        <div>
+            <a id="save">[ save as image ]</a><br>
+        </div>
+        
     </div>
 
     <canvas id="c"></canvas>
-    <script src="/ime.js"></script>
+    <img>
+    <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];
+        let img = document.getElementsByTagName('img')[0];
 
         //if darkmode
         if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
@@ -136,6 +148,7 @@
 
             ctx.font = fsize.value + "px heonian";
             ctx.fillText(hinput.value, 0, fsize.value);
+            cropToContent();
         }
 
         let ime = new HeonianIME(hinput);
@@ -146,8 +159,8 @@
         fsize.addEventListener('keyup', () => { update() });
         window.onresize = () => { update() };
 
-        function saveAsImage() {
+        function cropToContent() {
-            //blatantly stolen from stackoverflow =w=
+            //oh yeah all the actual croptocontent code is stolen from SO lol
             var canvas = ctx.canvas,
                 w = canvas.width, h = canvas.height,
                 pix = { x: [], y: [] },
@@ -173,9 +186,21 @@
 
             canvas.width = w;
             canvas.height = h;
+            canvas.style.width = w + 'px';
+            canvas.style.height = h + 'px';
             ctx.putImageData(cut, 0, 0);
+            img.src = canvas.toDataURL();
+            //remi, WHAT THE FUCK. why are you converting it to an image? WHAT THE SHIT IS GOING ON
+            //WHY ARE YOU MAKING IT SMALL??????
+            //uhso. basically. right click copy image. isnt a thing for canvas in safari. or firefox.
+            //making int an image solves that.
+            //and i couldent get clipboard api to work, ,,, , so uh,,, Yeah :3
+            //>w<
+        }
 
-            var image = canvas.toDataURL("image/png");
+        function saveAsImage() {
+            cropToContent();
+            var image = ctx.canvas.toDataURL("image/png");
             var link = document.createElement("a");
             link.href = image;
             link.download = "heonian.png";
@@ -197,7 +222,9 @@
             return true;
         }
 
-        document.querySelector("a").addEventListener("click", () => { saveAsImage(); });
+        document.querySelector("#save").addEventListener("click", () => { 
+            saveAsImage();
+        });
     </script>
 </body>