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

h2i . time to make it prettier

Browse Source
This commit is contained in:
remi 2022-05-27 21:13:42 +02:00
parent 9f5fc3b3b0
commit 190249a3aa
1 changed files with 112 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

112
h2i.html Normal file
View File

@ -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>