-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (115 loc) · 6.84 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
<!DOCTYPE html>
<html>
<head>
<title>color theater</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="numberInput.css" />
<script src="lib/rasterizer.js"></script>
<script src="lib/photopea.min.js"></script>
<script src="lib/base64ArrayBuffer.js"></script>
</head>
<body>
<div id="previewspace">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1280">
<defs>
<filter id="colorgrade">
<feColorMatrix
type="matrix"
values="1 0 0 0 0
0 1 0 0 0
0 0 1 0 0
0 0 0 1 0"
color-interpolation-filters="sRGB"
/>
</filter>
<radialGradient id="vignetteGradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
<stop offset="50%" style="stop-color: transparent; stop-opacity: 1;" />
<stop offset="100%" style="stop-color: #000000; stop-opacity: 1;" />
</radialGradient>
<clipPath id="imagemask">
<rect x="0" y="0" width="100%" height="100%" />
</clipPath>
</defs>
<image id="baseImage" href="test-image.jpg" filter="brightness(1) contrast(1) saturate(1) sepia(0) url(#colorgrade)" image-rendering="optimizeQuality" clip-path="url(#imagemask)" />
<rect id="tintlayer" x="0" y="0" width="100%" height="100%" style="mix-blend-mode: soft-light; fill: #004080;" fill-opacity="0"></rect>
<rect id="tintlayerXtra" x="0" y="0" width="100%" height="100%" style="mix-blend-mode: soft-light; fill: #004080;" fill-opacity="0"></rect>
<rect id="toningH" x="0" y="0" width="100%" height="100%" style="mix-blend-mode: color-dodge; fill: #ff5400; filter: brightness(0);"></rect>
<rect id="toningS" x="0" y="0" width="100%" height="100%" style="mix-blend-mode: color-burn; fill: #0081ff; filter: invert(100%) brightness(0) invert(100%);"></rect>
<ellipse id="vignetteRect" cx="50%" cy="50%" rx="72%" ry="72%" fill="url(#vignetteGradient)" style="mix-blend-mode: multiply;" fill-opacity="0" clip-path="url(#imagemask)" image-rendering="optimizeQuality"></ellipse>
</svg>
<canvas></canvas>
</div>
<div id="controlpanel">
<div style="text-align: center;">
<select id="importPresetBtn">
<option disabled selected hidden value="nothing">Use a Preset</option>
<option value="import_preset">Import .ctxml File</option>
<optgroup label="Built-in Presets" id="builtInPresetsGroup"></optgroup>
</select>
<button id="exportPresetBtn">Export Preset</button>
</div>
<hr />
<i>Basic Adjustments</i> <br />
Brightness: <input type="number" id="brightnessCtrl" value="100" min="0" max="200" /> <br />
Contrast: <input type="number" id="contrastCtrl" value="100" min="0" max="200" /> <br />
Saturation: <input type="number" id="saturationCtrl" value="100" min="0" max="200" /> <br />
Sepia: <input type="number" id="sepiaCtrl" value="0" min="0" max="100" /> <br />
<hr />
<i>Color Matrix</i> <br />
<table style="width: 100%;" id="cmatrixTable">
<tr>
<td></td><td style="color: #800000">R</td><td style="color: #008000">G</td><td style="color: #000080">B</td><td style="color: #808080">A</td><td style="color: #EEEEEE">+/-</td>
</tr>
<tr>
<td style="color: #800000">R</td><td id="cmatrixcell00"></td><td id="cmatrixcell01"></td><td id="cmatrixcell02"></td><td id="cmatrixcell03"></td><td id="cmatrixcell04"></td>
</tr>
<tr>
<td style="color: #008000">G</td><td id="cmatrixcell10"></td><td id="cmatrixcell11"></td><td id="cmatrixcell12"></td><td id="cmatrixcell13"></td><td id="cmatrixcell14"></td>
</tr>
<tr>
<td style="color: #000080">B</td><td id="cmatrixcell20"></td><td id="cmatrixcell21"></td><td id="cmatrixcell22"></td><td id="cmatrixcell23"></td><td id="cmatrixcell24"></td>
</tr>
<tr>
<td style="color: #808080">A</td><td id="cmatrixcell30"></td><td id="cmatrixcell31"></td><td id="cmatrixcell32"></td><td id="cmatrixcell33"></td><td id="cmatrixcell34"></td>
</tr>
</table>
<hr />
<i>Tint</i> <br />
Color: <input type="color" id="tintcolorcontrol" value="#004080" /> <br />
Amount: <input type="number" id="tintfillcontrol" value="0" min="0" max="200" step="1" />
<hr />
<i>Split Toning</i> <br />
Highlights: <br />
- Color: <input type="color" id="toningHColorCtrl" value="#ff5400" /> <br />
- Amount: <input type="number" id="toningHAmntCtrl" value="0" min="0" max="100" /> <br />
Shadows: <br />
- Color: <input type="color" id="toningSColorCtrl" value="#0081ff" /> <br />
- Amount: <input type="number" id="toningSAmntCtrl" value="0" min="0" max="100" /> <br />
<hr />
<i>Vignette</i> <br />
Color: <input type="color" id="vignettecolorcontrol" value="#000000" /> <br />
Size: <input type="number" id="vignettescalecontrol" value="50" min="0" max="100" /> <br />
Opacity: <input type="number" id="vignettefillcontrol" value="0" min="0" max="100" step="1" /> <br />
Blending: <select value="multiply" id="vignetteBlendingCtrl">
<option value="multiply">Multiply</option>
<option value="overlay">Overlay</option>
<option value="soft-light">Soft Light</option>
<option value="screen">Screen</option>
</select>
</div>
<div id="bottompanel">
<button id="exportbutton">Export as PNG</button>
</div>
<div id="welcomescreen">
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;">
<img src="banner.png" draggable="false" width="420px" /> <br />
<button id="startbutton">Upload image</button>
<input type="file" accept="image/*" />
</div>
</div>
<script src="canvStuff.js"></script>
<script src="code.js"></script>
<script src="builtInPresets.js"></script>
<script src="newColourInput.js"></script>
</body>
</html>