-
Notifications
You must be signed in to change notification settings - Fork 2
/
colormat.html
86 lines (86 loc) · 4.79 KB
/
colormat.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
<html>
<head>
<meta name="copyright" content="Copyright © 2017/04/02- [email protected] . All Rights Reserved.">
<meta charset="utf-8">
<title> Color Matrix </title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div id="controlPanel" style="float:left">
<div style="float:left">
Filter Category: <br />
<select id="categorySelect" size="5">
<option value="all" selected> 全て表示 </option>
<option value="emp" > 色強調 </option>
<option value="cont" > コントラスト </option>
<option value="rep" > 色入替え </option>
<option value="gray" > グレースケール </option>
<option value="cvd" > 色覚多様性(色弱) </option>
<option value="etc" > その他 </option>
</select>
</div>
<div style="float:left">
Color Filter: <br />
<select id="colorSelect" size="7">
<option value="ident" selected> 元のまま </option>
<option value="red-add" data-category="emp"> 赤+0.5 </option>
<option value="green-add" data-category="emp"> 緑+0.5 </option>
<option value="blue-add" data-category="emp"> 青+0.5 </option>
<option value="red-mul" data-category="emp"> 赤x1.5 </option>
<option value="green-mul" data-category="emp"> 緑x1.5 </option>
<option value="blue-mul" data-category="emp"> 青x1.5 </option>
<option value="cont0.5" data-category="cont"> コントラストx0.5 </option>
<option value="cont2.0" data-category="cont"> コントラストx2.0 </option>
<option value="rgb2gbr" data-category="rep"> RGB2GBR </option>
<option value="rgb2brg" data-category="rep"> RGB2BRG </option>
<option value="rgb2bgr" data-category="rep"> RGB2BGR </option>
<option value="rgb2grb" data-category="rep"> RGB2GRB </option>
<option value="rgb2rbg" data-category="rep"> RGB2RBG </option>
<option value="grayBT601" data-category="gray"> グレースケール(BT.601) </option>
<option value="grayBT709" data-category="gray"> グレースケール(BT.709) </option>
<option value="protanopia" data-category="cvd"> 1型2色覚 (Protanopia) </option>
<option value="protanomaly" data-category="cvd"> 1型3色覚 (Protanomaly) </option>
<option value="deuteranopia" data-category="cvd"> 2型2色覚 (Deuteranopia) </option>
<option value="deuteranomaly" data-category="cvd"> 2型3色覚 (Deuteranomaly) </option>
<option value="tritanopia" data-category="cvd"> 3型2色覚 (Tritanopia) </option>
<option value="tritanomaly" data-category="cvd"> 3型3色覚 (Tritanomaly) </option>
<option value="achromatopsia" data-category="cvd"> 1色覚(色盲) (Achromatopsia) </option>
<option value="achromatomaly" data-category="cvd"> 1色覚(色弱) (Achromatomaly) </option>
<option value="protanomaly2" data-category="cvd"> P型 (Protanomaly) 2 </option>
<option value="deuteranomaly2" data-category="cvd"> D型 (Deuteranomaly) 2 </option>
<option value="tritanomaly2" data-category="cvd"> T型 (Tritanomaly) 2 </option>
<option value="negate" > ネガポジ反転 </option>
<option value="sepia" > セピア調 </option>
<option value="sepia2" > セピア調2 </option>
<option value="sepia3" > セピア調3(BAD) </option>
</select>
</div>
<div style="float:left">
<div>
colorMatrix:<table id="colorMatrixTable" style="border:1 "> </table>
</div>
<div>
linearRGB :<input id="linearCheckbox" type="checkbox" checked/>
amount:<input id="amountRange" type="range" min="0.0" max="1.0" step="0.01" value="1.0">:<input type="text" id="amountText" size="5">
</div>
<div>
maxWidthHeight:<input id="maxWidthHeightRange" type="range" min="16" max="2048" step="1" value="480">:<input type="text" id="maxWidthHeightText" size="5">
</div>
</div>
</div> <!-- controlPanel -->
<div style="clear:both">
<canvas id="srcCanvas" class="borderRed" width=200 height=200> srcCanvas </canvas>
<canvas id="dstCanvas" class="borderBlue" width=200 height=200> dstCanvas </canvas>
</div>
</div> <!-- container -->
<script type="text/javascript" src="lib/drop.js"> </script>
<script type="text/javascript" src="lib/bind.js"> </script>
<script type="text/javascript" src="lib/canvas.js"> </script>
<script type="text/javascript" src="lib/color.js"> </script>
<script type="text/javascript" src="lib/matrix.js"> </script>
<script type="text/javascript" src="lib/loading.js"> </script>
<script type="text/javascript" src="lib/worker.js"> </script>
<script type="text/javascript" src="colormat.js"> </script>
</body>
</html>