-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
106 lines (99 loc) · 3.55 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
<html>
<head>
<title>palette world</title>
<link rel="icon" href="favicon.ico?v=2" />
<style type="text/css">
.color{
border: 1px solid black;
width: 16px;
height: 16px;
float: left;
margin-left: 3px;
margin-bottom: 3px;
cursor: pointer;
}
input::-webkit-color-swatch {
border: none;
}
</style>
</head>
<body>
<h2>palette fragmentation</h2>
<br>
<div style="display:inline-block;position:absolute;left:512px;top:58px;"><span style="font-size: 36px;font-weight:bold;">image:</span> <input id="userImage" type="file" onchange="userUploadImage();" value="upload image" /></div>
<br>
choose your fighter:
<select id="user_palette" onchange="userSelectPalette();">
<option value="monochrome">monochrome</option>
<option value="3bit_rgb">3bit rgb</option>
<option value="NES">NES</option>
<option value="gameboy">gameboy</option>
<option value="GBCpastel">GBC pastel</option>
<option value="2">random 2 color</option>
<option value="4">random 4 color</option>
<option value="8">random 8 color</option>
<option value="16">random 16 color</option>
<!--<option value="0">8 colors chosen from image</option>-->
</select>
<br>
<div style="display:inline-block;"><i>upload palette:</i> <input id="userPalette" type="file" onchange="userUploadPalette();" value="upload image" /></div>
<br/><br/>
<span style="float:left;">palette: </span><span id="palette_area"></span>
<div style="clear:both;"></div>
<!--<br/>
color mode: <select id="color_style" onchange="userSelectColorStyle();">
<option value="closestColor">closest color</option>
<option value="hicolor">high color</option>
</select>
<br/>--><br/>
<span style="cursor:pointer;border:1px solid black; padding:4px;" onClick="userToggleHideSourceImg()">
<input style="cursor:pointer;" type="checkbox" id="user_hide_src_img">
hide source img?
</span>
zoom: <select id="user_zoom" onchange="userSelectZoom();">
<option value="1">x1</option>
<option value="2">x2</option>
<option value="3">x3</option>
</select>
<br><br>
<span style="cursor:pointer;border:1px solid black; padding:4px;" onClick="userToggleDithering()">
<input style="cursor:pointer;" type="checkbox" id="user_dithering" checked>
use dithering?
</span>
<div style="cursor:pointer;border:1px solid black; padding:4px;display:inline-block;" onClick="userToggleTiledPalettes()">
<input style="cursor:pointer;" type="checkbox" id="user_tiled_palettes">
break palette by tiles?
</div>
<br>
<br>
<canvas id="new"></canvas>
<canvas id="original"></canvas>
<canvas id="palette" style="display:none;"></canvas>
<script src="palettes.js"></script>
<script src="PixelTile.js"></script>
<script src="user.js"></script>
<script src="script.js"></script>
<script type="text/javascript">
var canvas_orig, ctx_orig, canvas, ctx;
function init(img){
canvas_orig = document.getElementById("original");
ctx_orig = canvas_orig.getContext("2d");
canvas = document.getElementById("new");
ctx = canvas.getContext("2d");
function loadHandler(){
Drawr.init(img, 1);
Drawr.drawWithPalette(user_palette);
}
img.onload = loadHandler;
if (img.complete) loadHandler();
}
var img = new Image();
img.src = "parrot.png";
init(img);
</script>
<div style="position:absolute; left: 3px; bottom: 3px;">
<a href="http://cakeandturtles.nfshost.com/"><< back to cakeandturtles</a>
</div>
</body>
</html>