67 lines
1.8 KiB
JavaScript
67 lines
1.8 KiB
JavaScript
const $ = (x) => document.getElementById(x);
|
|
|
|
const input = $("input");
|
|
const canvas = $("canvas");
|
|
const preview = $("preview");
|
|
const background = $("background");
|
|
|
|
const ctx = canvas.getContext("2d");
|
|
const lineHeight = 22;
|
|
|
|
let height = 0;
|
|
let line = 0;
|
|
|
|
input.addEventListener("input", () => {
|
|
const lines = input.value.split("\n");
|
|
height = lines.length;
|
|
canvas.width = 512;
|
|
ctx.font =
|
|
'16px "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
|
|
ctx.textBaseline = "hanging";
|
|
line = 0;
|
|
lines.forEach(renderText);
|
|
canvas.height = 22 * height;
|
|
ctx.fillStyle = background.value;
|
|
ctx.fillRect(0, 0, canvas.width, canvas.height);
|
|
ctx.fillStyle = "#EFEFF0";
|
|
ctx.font =
|
|
'16px "gg sans", "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif';
|
|
ctx.textBaseline = "hanging";
|
|
line = 0;
|
|
lines.forEach(renderText);
|
|
preview.src = canvas.toDataURL();
|
|
canvas.toBlob((blob) => {
|
|
const item = new ClipboardItem({ "image/png": blob });
|
|
navigator.clipboard.write([item]);
|
|
});
|
|
});
|
|
|
|
input.addEventListener("keydown", (e) => {
|
|
if (e.key == "c" && e.ctrlKey) {
|
|
e.preventDefault();
|
|
}
|
|
});
|
|
|
|
function renderText(item, i) {
|
|
line++;
|
|
if (ctx.measureText(item).width > canvas.width) {
|
|
let rn = ctx.measureText(item).width;
|
|
let goal = canvas.width;
|
|
let len = item.length;
|
|
while (rn > goal) {
|
|
len--;
|
|
rn = ctx.measureText(item.slice(0, len)).width;
|
|
}
|
|
ctx.fillText(
|
|
item.slice(0, len),
|
|
0,
|
|
(line - 1) * lineHeight + 2,
|
|
canvas.width,
|
|
);
|
|
renderText(item.slice(len), line);
|
|
height++;
|
|
} else {
|
|
ctx.fillText(item, 0, (line - 1) * lineHeight + 2, canvas.width);
|
|
}
|
|
}
|