-
Notifications
You must be signed in to change notification settings - Fork 7
/
Copy pathindex.html
105 lines (86 loc) · 4.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
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8">
<title>Shaffer by baidut</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="stylesheets/normalize.css" media="screen">
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/github-light.css" media="screen">
<script type="text/javascript" src="shaffer.js"></script>
</head>
<body onload="onLoad();">
<section class="page-header">
<h1 class="project-name">Shaffer</h1>
<h2 class="project-tagline">SHAdow-Free Feature ExtractoR</h2>
<a href="https://github.com/baidut/Shaffer" class="btn">View on GitHub</a>
<a href="https://github.com/baidut/Shaffer/zipball/master" class="btn">Download .zip</a>
<a href="https://github.com/baidut/Shaffer/tarball/master" class="btn">Download .tar.gz</a>
</section>
<section class="main-content">
<h3>
<a id="overview" class="anchor" href="#overview" aria-hidden="true"><span aria-hidden="true" class="octicon octicon-link"></span></a>Overview</h3>
<p>Code for ACM MM2016 paper "A Novel Shadow-Free Feature Extractor for Real-Time Road Detection" ( <a>ieeexplore</a> <a>paper</a> <a>html</a> <a>pdf</a> )</p>
<p>This project is part of <a href="https://github.com/baidut/OpenVehicleVision/">OpenVehicleVision</a>.</p>
<!-- Example -->
<p>Shaffer takes a color image as input and outputs a grayscale image, where the shadows are disappeared (as shown below). The required parameter, <i>bias</i>, is camera dependent, so we only need to calibrate once for images captured with same camera settings. </p>
<div align="center">
<div style="display:inline-block;">
<b>Before:</b>
<br/>
<img id="before_image" style="max-width:100%; border:1px solid black;" />
</div>
<div style="display:inline-block;">
<br/>
<b>After:</b>
<br/>
<canvas id="after_image" style="max-width:100%; border:1px solid black;">Your browser does not support the canvas tag.</canvas>
</div>
</div>
<ul>
<li>
Select an image:
<select onchange="reset(this.value,-0.07);">
<option value="h49-50_1-2.png">h49-50_1-2.png</option>
<option value="h53_1-3.png">h53_1-3.png</option>
<option value="h87-90_1.png">h87-90_1.png</option>
</select>
</li>
<li>
Choose Filter:
<b><a href="javascript:setFilter(grayscale);">grayscale</a></b>
|
<b><a href="javascript:input_bias.onchange();">shaffer</a>
(<i>bias</i> =
<!-- note number type is not support yet in mobile browser-->
<input type="text" id="input_bias" style="width:60px;" onchange="setFilter(shaffer(this.value));" />
<!-- min="-2" max="2" step="0.01" -->
<button onclick="input_bias.value = input_bias.value - 0.01;input_bias.onchange();">-</button>
<button onclick="input_bias.value = input_bias.value - (-0.01);
input_bias.onchange();">+</button>
)</b>
</li>
<li>
To try your own image: <span id="filename"></span>, just
Click <button onclick="openFile(handleFiles);">upload</button> or drag and drop an image to this window.
<input id="fileinput" style="display:none;" type="file">
</li>
<li><i>Bias</i> may be different for different images, e.g.
<button onclick="reset('h54-55_1-2.png',-0.01);">h54-55_1-2.png</button>
<button onclick="reset('h64-65_1-3.png',-0.05);">h64-65_1-3.png</button>.
</li>
<li>
Use uncompressed image (*.png) to get better results. Performance is poorer using compressed image (*.jpg) since the loss of color information, e.g.
<button onclick="reset('h49_2.png',-0.07);">h49_2.png</button>
<button onclick="reset('h49_2.jpg',-0.07);">h49_2.jpg</button>.
</li>
</ul>
<!-- END Example -->
<footer class="site-footer">
<span class="site-footer-owner"><a href="https://github.com/baidut/Shaffer">Shaffer</a> is maintained by <a href="https://github.com/baidut">baidut</a>.</span>
<span class="site-footer-credits">This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the <a href="https://github.com/jasonlong/cayman-theme">Cayman theme</a> by <a href="https://twitter.com/jasonlong">Jason Long</a>.</span>
</footer>
</section>
</body>
</html>