heonian.org/heonian-ime
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

LMFAO

Browse Source
This commit is contained in:
remi 2022-05-27 22:26:10 +02:00
parent 8e479d31b3
commit c9e5a0750a
1 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
h2i.html
View File

@ -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>
<span>background color:</span><br>
<input type="text" name="bcolor" value="#00000000">
</div>
<!-- <div> -->
<!-- <span>background color:</span><br> -->
<!-- <input type="text" name="bcolor" value="#00000000"> -->
<!-- </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() {
//blatantly stolen from stackoverflow =w=
function cropToContent() {
//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>