-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
126 lines (116 loc) · 6.13 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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<!-- Design by Design Profesionals Released for free under a Creative Commons Attribution 2.5 License Title : Essence Version : 1.0 Released : 20110518 Description: A two-column fixed-width template. Suitable for blogs and small business websites. -->
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Computational Photography MENG Zhixiang</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<!-- Image Preloader -->
<script src="jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
setInterval(function(){
if(window.scrollY>=300){
$('#updates').css('top',0);
$('#updates').css('width',200);
$('#updates').css('position','fixed');
}
else{
$('#updates').css('position','static');
}
},100)
})
</script>
<body><div id="mask"></div><table id="pic_div" style="z-index:910; width:100%; height:100%; text-align:center; display:none;position:fixed;"><tr><td style="width:100%; text-align:center; background:none;" id="mask_"><img id="pic_img" style=" max-height:500px; border-style:solid; border-color:#FFF; border-width:thick"></td></tr></table>
<table id="readme" style="z-index:910; width:100%; height:100%; display:none;position:fixed;"><tr><td style="width:100%;background:none;x;" id="mask_1"><div style="width:270px; height:170px; background-color:#FFF; padding:40px; margin:auto; line-height:35px"><h2>CSCI3290 Report</h2><p style=" line-height:40p">Available pages:<br>
<ul>
<li>index (pc/mobile)</li>
<li>registration (pc/mobile)</li>
</ul>All functionalities are disabled</p></div></td></tr></table>
<script>
$(document).ready(function(){
$('img').click(function(){
$('body').css('overflow','hidden');
$('#mask').show();
$('#pic_img').attr('src',$(this).attr('src'));
$('#pic_div').fadeIn(200);
})
$('#mask_').click(function(){
$('#pic_div').hide();
$('#mask').hide();
$('body').css('overflow','scroll');
//$('#outer').css('overflow','scroll');
})
$('#mask_1').click(function(){
$('#readme').hide();
$('#mask').hide();
$('body').css('overflow','scroll');
//$('#outer').css('overflow','scroll');
})
})
function readme(){
$('body').css('overflow','hidden');
$('#mask').show();
$('#readme').fadeIn(200);
}
</script>
<div id="fb-root"></div>
<div id="header">
<h1 style="color: white">Computational Photography</h1>
<h2 style="color: white">MENG Zhixiang</h2>
</div>
<div id="page">
<div id="content">
<div class="post" style=" border-bottom:none">
<h1 class="title" id="A1"> <a href="a1.html">Image Filtering and Hybrid Images</a></h1>
<div class="content">
<p style="text-align:justify" >The goal of this project is to use low-pass and high-pass filters to process two images respectively and then combine them to get a hybrid image. Both grayscale image and color image are supported. Also, three padding methods are used: pad zero, pad replicate and pad symmetric. Besides, Fast Fourier Transform is used to accelerate the convolution.</p>
<img src="images/a1_images/hybrid_dc.jpg" alt="" class="photo" style="width: 99%; height: auto" align="right" />
</div>
</div>
<div class="post" style=" border-bottom:none">
<h1 class="title" id="A2"> <a href="a2.html">Image Blending</a></h1>
<div class="content">
<p style="text-align:justify" >This project is to use Laplacian Pyramid and Poisson method to blend an object from a source image into a target image respectively. Our goal is to create seamless blending. At last, we apply the Poisson Blending method to convert a color image into grayscale image.</p>
<table border="1pt" style="float: center; text-align: center;" >
<tr><td>Target Image</td><td>Source Image</td><td>Mask</td></tr>
<tr><td><img src="images/a2_images/ca.png" alt="" class="photo" style="width: 90%; height: auto" /></td>
<td><img src="images/a2_images/ca2.png" alt="" class="photo" style="width: 90%; height: auto" /></td>
<td><img src="images/a2_images/ca_mask.png" alt="" class="photo" style="width: 90%; height: auto" /></td></tr>
<tr><td>Laplacian Pyramid</td><td>My Implementation</td><td>Further Modification</td></tr>
<tr><td><img src="images/a2_images/ca_out_pyramid.png" alt="" class="photo" style="width: 90%; height: auto" /></td>
<td><img src="images/a2_images/ca_out_poisson.png" alt="" class="photo" style="width: 90%; height: auto" /></td>
<td><img src="images/a2_images/ca_out_poisson_mixed.png" alt="" class="photo" style="width: 90%; height: auto" /></td></tr>
</table>
</div>
</div>
<div class="post" style=" border-bottom:none">
<h1 class="title" id="A3"> <a href="a3.html">Tone Mapping</a></h1>
<div class="content">
<p style="text-align:justify" >This project is to use a bunch of LDR images under different exposures to recover the radiance map and then construct a HDR image. Different construction algorithms are implemented and compared.</p>
<img src="images/a3_images/case1/belg001.jpg" alt="" class="photo" style="width: 30%; height: auto" />
<img src="images/a3_images/case1/belg002.jpg" alt="" class="photo" style="width: 30%; height: auto" />
<img src="images/a3_images/case1/belg003.jpg" alt="" class="photo" style="width: 30%; height: auto" />
<img src="images/a3_images/case1/belg004.jpg" alt="" class="photo" style="width: 30%; height: auto" />
<img src="images/a3_images/case1/belg005.jpg" alt="" class="photo" style="width: 30%; height: auto" />
<img src="images/a3_images/case1/belg006.jpg" alt="" class="photo" style="width: 30%; height: auto" />
<img src="images/a3_images/case1/belg007.jpg" alt="" class="photo" style="width: 30%; height: auto" />
<img src="images/a3_images/case1/belg008.jpg" alt="" class="photo" style="width: 30%; height: auto" />
<img src="images/a3_images/case1/belg009.jpg" alt="" class="photo" style="width: 30%; height: auto" />
</div>
</div>
</div>
<div id="sidebar">
<div id="menu">
<ul id="updates">
<li><a></a></li>
<li><a href="#A1" title="">Hybrid Images</a></li>
<li><a href="#A2" title="">Image Blending</a></li>
<li><a href="#A3" title="">Tone Mapping</a></li>
</ul>
</div>
</div>
<div style="clear: both;"> </div>
</div>
<div id="footer">
</div>
</body></html>