242 lines
7.3 KiB
HTML
242 lines
7.3 KiB
HTML
<!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="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 {
|
|
font-family: 'heonian';
|
|
src: url("https://cronut.cafe/~lustlion/myrheon/HeonianAlone.otf");
|
|
/* nooo remi dont do that */
|
|
}
|
|
|
|
:root {
|
|
--bg: #00000000;
|
|
--fg: #000000;
|
|
}
|
|
|
|
body {
|
|
font-family: Arial;
|
|
overflow: hidden;
|
|
margin: 0;
|
|
color: var(--fg);
|
|
background-color: var(--bg);
|
|
}
|
|
|
|
input {
|
|
border-radius: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--fg);
|
|
}
|
|
|
|
#hinput {
|
|
font-family: 'heonian';
|
|
width: 100%;
|
|
font-size: 24px;
|
|
padding: 8px;
|
|
}
|
|
|
|
#hinput::placeholder {
|
|
color: var(--fg);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
canvas {
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
position: fixed;
|
|
pointer-events: none;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
img {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
#heeheefunnyfloat {
|
|
max-width: 500px;
|
|
display: flex;
|
|
flex-flow: row wrap;
|
|
padding: 8px;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
span {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
input:focus {
|
|
outline: 0px;
|
|
}
|
|
|
|
a {
|
|
color: var(--fg);
|
|
border: 0;
|
|
font-size: 12px;
|
|
opacity: 0.5;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* darkmode */
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #000000 !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<input type="text" name="hinput" id="hinput" placeholder="heonian text goes here~"><br>
|
|
<div id="heeheefunnyfloat">
|
|
<div>
|
|
<span>text color:</span><br>
|
|
<input type="text" name="tcolor" value="#000000">
|
|
</div>
|
|
<div style="display: none;">
|
|
<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>
|
|
<div>
|
|
<a id="save">[ save as image ]</a><br>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<canvas id="c"></canvas>
|
|
<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) {
|
|
tcolor.value = '#ffffff';
|
|
// bcolor.value = '#000000';
|
|
update();
|
|
}
|
|
|
|
function update() {
|
|
ctx.canvas.width = window.innerWidth;
|
|
ctx.canvas.height = window.innerHeight;
|
|
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
|
|
if (validateColor(bcolor.value)) {
|
|
ctx.fillStyle = bcolor.value;
|
|
document.documentElement.style.setProperty('--bg', bcolor.value);
|
|
ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
}
|
|
|
|
if (validateColor(tcolor.value)) {
|
|
ctx.fillStyle = tcolor.value;
|
|
document.documentElement.style.setProperty('--fg', tcolor.value);
|
|
}
|
|
|
|
ctx.font = fsize.value + "px heonian";
|
|
ctx.fillText(hinput.value, 0, fsize.value);
|
|
if (hinput.value.length > 0) {
|
|
cropToContent();
|
|
} else {
|
|
img.src = '';
|
|
}
|
|
}
|
|
|
|
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 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: [] },
|
|
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;
|
|
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<
|
|
}
|
|
|
|
function saveAsImage() {
|
|
cropToContent();
|
|
var image = ctx.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();
|
|
}
|
|
|
|
function validateColor(c) {
|
|
//also blatantly stolen from SO
|
|
var litmus = 'red';
|
|
var d = document.createElement('div');
|
|
d.style.color = litmus;
|
|
d.style.color = c;
|
|
//Element's style.color will be reverted to litmus or set to '' if an invalid color is given
|
|
if (c !== litmus && (d.style.color === litmus || d.style.color === '')) {
|
|
return false;
|
|
}
|
|
return true;
|
|
}
|
|
|
|
document.querySelector("#save").addEventListener("click", () => {
|
|
saveAsImage();
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |