-
Notifications
You must be signed in to change notification settings - Fork 79
/
main.js
91 lines (75 loc) · 2.52 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
const settings = {
last_canvas: null,
last_dithering: null,
last_source: "",
width: 62,
greyscale_mode: "luminance",
inverted: false,
dithering: false,
monospace: false,
}
function setUIElement(selector, value) {
const elem = document.querySelector(selector);
switch(elem.getAttribute("type")) { //should all be <input>
case "checkbox":
elem.checked = value;
break;
default:
elem.value = value;
}
return elem;
}
function initUI() {
document.body.ondragover = (e) => e.preventDefault();
document.body.ondrop = (e) => {
e.preventDefault();
loadNewImage(URL.createObjectURL(e.dataTransfer.items[0].getAsFile()));
}
document.body.onpaste = (e) => {
event.preventDefault();
loadNewImage(URL.createObjectURL(e.clipboardData.items[0].getAsFile()));
}
//buttons
const r = () => parseCanvas(settings.last_canvas); //shorten for compactness
document.querySelector('input[type="file"]').onchange = (e) => {
loadNewImage(URL.createObjectURL(e.target.files[0]));
}
setUIElement('#darktheme', settings.inverted).onchange = (e) => {
const element = document.querySelector('#text');
if(e.target.checked) element.classList.add("dark");
else element.classList.remove("dark");
};
setUIElement('#inverted', settings.inverted).onchange = (e) => {settings.inverted = e.target.checked; r()};
setUIElement('#dithering', settings.dithering).onchange = (e) => {settings.dithering = e.target.checked; r()};
setUIElement('#monospace', settings.monospace).onchange = (e) => {settings.monospace = e.target.checked; r()};
document.querySelector('#greyscale_mode').onchange = (e) => {
settings.greyscale_mode = e.target.value;
parseCanvas(settings.last_canvas);
};
setUIElement('#width', settings.width).onchange = (e) => {
settings.width = e.target.value;
loadNewImage(settings.last_source);
};
document.querySelector('#clipboard').onclick = (e) => {
document.querySelector('#text').select();
document.execCommand("copy");
}
}
async function loadNewImage(src) {
if(src === undefined) return;
if(settings.last_source && settings.last_source !== src) URL.revokeObjectURL(settings.last_source);
settings.last_source = src;
const canvas = await createImageCanvas(src);
settings.last_canvas = canvas;
settings.last_dithering = null;
await parseCanvas(canvas);
}
async function parseCanvas(canvas) {
const text = canvasToText(canvas);
document.querySelector('#text').value = text;
document.querySelector('#charcount').innerText = text.length;
}
window.onload = () => {
initUI();
loadNewImage("select.png");
}