-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
141 lines (133 loc) · 7.53 KB
/
index.html
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
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://getbootstrap.com/docs/5.3/assets/css/docs.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
<title>Pixie</title>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container ">
<p class="h1 my-5 display-1 px-3">Pixie <img src="assets/pixellated/kanegawa.png" alt="Bootstrap" width="64" height="64">
<p class="h4 my-5 disabled px-3">A Javascript Pixel Art Generator</p>
<p class="h5 my-5 disabled px-3">Powered by OpenCV</p>
<div class="container ">
<div class="row fluid my-3 px-3">
<div class="col-md-9 col-sm-9 col-11 pb-3">
<label for="fileInput" class="form-label">Select your image</label>
<input class="form-control" type="file" id="fileInput" onchange="imgValidation();">
</div>
<div class="col-md-2 col-sm-3 col-11">
<label for="pixelSize" class="form-label">Pixel Size</label>
<input type="number" class="form-control" id="pixelSize" value="10" min="1" max="1000" onchange="inputValidation()">
</div>
<input type="text" class="form-control" id="paletteValues" value="" hidden >
</div>
<div class="row fluid my-3 px-3 ">
<div class="col-md-3 col-sm-12 col-11 pb-3">
<label for="paletteChoice" class="form-label">Palette</label>
<select class="form-select" id ="paletteChoice" onchange="changePalette()">
<option value="Minecraft">Minecraft</option>
<option value="NES">NES</option>
<option selected value="Default">Standard</option>
<option value="Grayscale">Grayscale</option>
<option value="Colorful">Colorful</option>
<option value="Ultra Colorful">Ultra colorful</option>
<option value="None">Original colors</option>
<option value="Automatic">Automatic</option>
<!-- <option value="Custom">Custom</option> -->
</select>
</div>
<div data-bs-spy="scroll" data-bs-smooth-scroll="true" class="col-11 col-md-8 col-sm-12 bg-secondary-subtle rounded px-2 py-3 my-3 text-center scrollspy-example " id="palette">
</div>
</div>
<div class="row fluid my-3 text-center px-3">
<div class="col text-center">
<button type="button" class="btn btn-primary" id="pixellate" onclick="pixellate(document.getElementById('imageSrc'),Number(document.getElementById('pixelSize').value),JSON.parse(document.getElementById('paletteValues').value))" disabled>Pixellate</button>
</div>
</div>
<!-- <div class="row fluid my-5 text-center" id="palette">
</div> -->
<div class="row fluid my-5 text-center">
<div class="col text-center">
<div class="my-3">
<img src="" class="img" alt="..." onclick="" hidden id="imageSrc">
</div>
</div>
</div>
<!-- Content here -->
<div class="d-flex justify-content-center px-3">
<div class="col-md-10 col-sm-12 col-lg-8 col-xl-6 p-2 ">
<!-- <img src="https://via.placeholder.com/150" class="img-thumbnail" alt="..." onclick="" id="imageOut"> -->
<canvas id="canvasOutput" class="img-thumbnail w-100" hidden ></canvas>
<!-- <img src="https://via.placeholder.com/150" class="img-thumbnail" alt="..." onclick="" id="canvasOutput"> -->
</div>
</div>
</div>
<div class="row fluid my-5 text-center">
<div class="col text-center">
<div class="my-3">
<!-- <img src="https://via.placeholder.com/150" class="img-thumbnail" alt="..." onclick="" id="imageOut"> -->
<canvas id="canvasOutputFull" class="img" hidden></canvas>
<!-- <img src="https://via.placeholder.com/150" class="img-thumbnail" alt="..." onclick="" id="canvasOutput"> -->
</div>
</div>
</div>
<div class="row fluid my-5 text-center">
<div class="col text-center">
<button type="button" class="btn btn-primary" id="download" onclick="download()" href="assets/pixellated/luffy-5px.png" hidden>Download</button>
</div>
</div>
<div class="d-flex justify-content-center px-3">
<div class="col-md-8 col-sm-10 col-lg-6 col-xl-4 p-2 ">
<div class="toast-container bottom-0 start-50 translate-middle-x p-3 m-3 w-100">
<div id="liveToast" class="toast text-bg-danger " role="alert" aria-live="assertive" aria-atomic="true" >
<div class="toast-header">
<!-- <img src="..." class="rounded me-2" alt="..."> -->
<strong class="me-auto"> Error</strong>
<!-- <small>11 mins ago</small> -->
</div>
<div class="toast-body text-wrap" id="toastMessage">
Error: file is not an image
</div>
</div>
</div>
</div>
</div>
<div class="d-flex justify-content-center px-3">
<div class="row fluid my-5 text-center">
<div class="col-md-8 col-sm-10 col-lg-6 col-xl-4 p-2 text-center">
<a href = "https://github.com/BigEmperor26/Pixie" class="text-center">
<img src="assets/github-mark.png" alt="GitHub" width="32" height="32">
</a>
</div>
<div class="col-md-8 col-sm-10 col-lg-6 col-xl-4 p-2 text-center">
<a href = "https://github.com/BigEmperor26/" class="text-center">
By Michele Yin
</a>
</div>
</div>
</div>
</div>
<script src="pixie.js">
</script>
<script src="quantization.js">
</script>
<script>
let inputElement = document.getElementById("fileInput");
let imgElement = document.getElementById("imageSrc");
// load the default palette
// show preview of old image
inputElement.addEventListener("change", (e) => {
imgElement.src = URL.createObjectURL(e.target.files[0]);
}, false);
imgElement.onload = function() {
inputValidation();
}
</script>
<script async src="opencv.js" onload="onOpenCvReady();" type="text/javascript"></script>
</body>
</html>