-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
80 lines (66 loc) · 1.8 KB
/
script.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
import Themes from './themes.js';
const themes = Themes();
let theme = themes.catppuccin;
let defaultImage = null;
const worker = new Worker('worker.js');
const canvas = document.getElementById('canvas');
const context = canvas.getContext('2d');
const dialog = document.getElementById("dialog");
const downloadLink = document.getElementById("download-link");
const options = document.getElementsByTagName("button");
for (const option of options)
{
option.addEventListener("click", () =>
{
switch(option.id)
{
case 'generate':
if (defaultImage)
{
worker.postMessage([theme, context.getImageData(0, 0, canvas.width, canvas.height).data]);
}
break;
case 'upload':
dialog.click();
break;
case 'download':
downloadLink.href = canvas.toDataURL("image/png");
downloadLink.click();
break;
case 'reset':
if (defaultImage)
{
context.putImageData(defaultImage, 0, 0);
}
break;
case 'catppuccin':
case 'gruvbox':
case 'dracula':
case 'nord':
theme = themes[option.id];
break;
}
});
}
worker.onmessage = function (pixels)
{
context.putImageData(
new ImageData(pixels.data, canvas.width, canvas.height), 0, 0);
}
dialog.addEventListener("change", () =>
{
let reader = new FileReader();
reader.addEventListener('load', (event) =>
{
let image = new Image();
image.addEventListener("load", () =>
{
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0, image.width, image.height);
defaultImage = context.getImageData(0, 0, canvas.width, canvas.height);
});
image.src = event.target.result;
});
reader.readAsDataURL(dialog.files[0]);
});