完成了整个项目在自己电脑上的部署和图像检索模块页面的编写。
部署的细节不一一赘述了,下面放上图像检索模块页面的部分代码。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<?php
$path1 = "image/8.jpg";
$path2 = "image/8.jpg";
if(is_array($_GET)&&count($_GET)>0){
$path1 = "retrieval/user.jpg";
if($_GET['c'] == 1){
}else if($_GET['c'] == 2){
$path2 = "retrieval/ori.jpg";
}else if($_GET['c'] == 3){
$path2 = "retrieval/mosaic.jpg";
}else{
$path2 = "retrieval/feather.jpg";
}
}
?>
</head>
<style type = "text/css">
#b{
background-image: url(image/1.jpg);
background-repeat: no-repeat;
background-size: 100% 60px;
background-attachment:scroll;
}
h1{
text-align: center;
position: relative;
top:-20px;
}
img{
height:400px;
top:90px;
}
input[type="file" ]{
opacity: 0;
padding:10px;
width:97px;
height:20px;
top:-30px;
left:-10px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
position:relative;
text-align: center;
}
input[type="submit"]{
opacity: 0;
padding:10px;
width:125px;
height:40px;
top:-29px;
left:-10px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
position:relative;
text-align: center;
top=90px;
}
#upload{
display:inline-block;
padding:10px;
width:100px;
height:20px;
top:290px;
left:440px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
text-decoration:none;
color:#ffffff;
font-family:MV Boli;
font-weight:bold;
font-size:30px;
line-height:19px;
background:url(image/2.jpg);
position:relative;
text-align:center;
}
#submit{
display:inline-block;
padding:10px;
width:100px;
height:20px;
top:180px;
left:140px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
text-decoration:none;
color:#ffffff;
font-family:MV Boli;
font-weight:bold;
font-size:30px;
line-height:19px;
background:url(image/2.jpg);
position:relative;
text-align:center;
top:178px;
left:160px;
}
.biaoti{
font-family:Baskerville, Palatino Linotype, Palatino, Century Schoolbook L, Times New Roman, serif;
font-size: 20px;
color: white;
top:-88px;
position: relative;
}
textarea{
position: absolute;
display: block;
top : 560px;
left : 400px;
width: 700px;
height : 130px;
border-radius: 15px;
border-width: 3px;
border-color: #c5d7ed;
font-size:18px;
cursor: default;
font-family: Consolas;
}
</style>
<script language="javascript" type="text/javascript">
// h5 file reader
function getBase64( thisFiles ) {
var reader = new FileReader();
reader.readAsDataURL( thisFiles );
reader.onload = function(e){
console.log('预览图片的base64编码为:' + this.result);
}
};
// send form data
function sendData( file ) {
var formData = new FormData();
formData.append('file', file);
var request = new XMLHttpRequest();
request.onload = function() {
console.log("上传成功!");
}
request.open("POST", "http://foo.com/submitform.php");
request.send(formData);
};
var uploaded = false;
function check()
{
uploaded = true;
// alert("1");
var img=document.getElementById("img1");
var img2 = document.getElementById("img2");
// alert("2");
var fileinput = document.getElementById("x");
// alert("3");
var aa=document.getElementById("x").value.toLowerCase().split('.');//以“.”分隔上传文件字符串
// alert("4");
var url = window.URL.createObjectURL(fileinput.files[0]);
if(document.form1.x.value=="")
{
alert('图片不能为空!');
return false;
}
else
{
if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp'
||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判断图片格式
{
img.src = url;
// var fso = new ActiveXObject("Scripting.FileSystemObject");
// if(fso.FileExists("retrieval/ori.jpg")){
// var f1 = fso.GetFile("retrieval/ori.jpg");
// f1.Delete();
// }
// if(fso.FileExists("retrieval/mosaic.jpg")){
// var f2 = fso.GetFile("retrieval/mosaic.jpg");
// f2.Delete();
// }
// if(fso.FileExists("retrieval/feather.jpg")){
// var f3 = fso.GetFile("retrieval/feather.jpg");
// f3.Delete();
// }
var form = document.getElementById("form1");
form.submit();
alert("文件上传成功!");
// img2.src = "image/mosaic.jpg";
return true;}
else
{
alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片');//jpg和jpeg格式是一样的只是系统Windows认jpg,Mac OS认jpeg,
return false;
}
}
}
function Down(){
var image = document.getElementById("img2");
var down = document.getElementById("down");
down.href=image.src;
down.download="img";
down.click();
}
var controlShow = false;
function showHistory(){
controlShow = !controlShow;
var t = new Array();
t[0] = document.getElementById("CodeArea");
t[1] = document.getElementById("fakeOriginal");
t[2] = document.getElementById("fakeCubist");
t[3] = document.getElementById("fakeFeather");
if(controlShow){
for(var i=0;i<4;i++)
t[i].style.display = "";
}else{
for(var i=0;i<4;i++)
t[i].style.display = "none";
}
}
function test()
{
var img=document.getElementById("img1");
var fileinput = document.getElementById("x");
var aa=document.getElementById("x").value.toLowerCase().split('.');//以“.”分隔上传文件字符串
var url = window.URL.createObjectURL(fileinput.files[0]);
// var aa=document.form1.userfile.value.toLowerCase().split('.');//以“.”分隔上传文件字符串
if(document.form1.x.value=="")
{
alert('图片不能为空!');
return false;
}
else
{
if(aa[aa.length-1]=='gif'||aa[aa.length-1]=='jpg'||aa[aa.length-1]=='bmp'
||aa[aa.length-1]=='png'||aa[aa.length-1]=='jpeg')//判断图片格式
{
img.src=url;
return true;}
else
{
alert('请选择格式为*.jpg、*.gif、*.bmp、*.png、*.jpeg 的图片');//jpg和jpeg格式是一样的只是系统Windows认jpg,Mac OS认jpeg,
return false;
}
}}
function changeToFeather(){
var img2 = document.getElementById("img2");
img2.src = "retrieval/feather.jpg";
}
function changeToMosaic() {
var img2 = document.getElementById("img2");
img2.src = "retrieval/mosaic.jpg";
}
function changeToOriginal(){
var img2 = document.getElementById("img2");
img2.src = "retrieval/ori.jpg";
}
</script>
<?php
echo "
<script >
function retrieval(){
var hist = document.getElementById('histo');
hist.style.display = '';
alert('正在检索其他用户的图片库,请耐心等待...');
window.location = 'RunRetrieval.php';
}
</script>
" ;
?>
<body id="b">
<a href="procss.php">
<h1 style="color:white;font-size:40px;font-weight:bold;">
IMAGE STYLE TRANSFER </h1>
</a>
<a class="biaoti" href="myimage.html"
style="left: 1000px;
"
>my image</a>
<a class="biaoti" href="community.html"
style="left: 40px;
"
>community</a>
<a class="biaoti" href="mypost.html"
style="left: 80px;
"
>my post</a>
<a class="biaoti" href="myname.html"
style="left: 980px;"
>my name</a>
<?php
echo "<img src= $path1 id='img1'
style='position:absolute;right:820px;'>
<img src=$path2 id='img2'
style='position:absolute;left:820px;'> "
?>
<center>
<button2 style="
display:inline-block;
padding:10px;
width:80px;
height:40px;
top:120px;
border:1px solid;
text-decoration:none;
color:#ffffff;
font-family:MV Boli;
font-weight:bold;
font-size:20px;
line-height:20px;
background:url(image/5.jpg);
position:relative;
text-align: center;">
similar pictures
</button2>
</center>
<div>
<form id='form1' name='form1' method='post' action='retrieval_upload.php' enctype='multipart/form-data'>
<p>
<a href="" id="upload">
upload
<input name="x" id="x" type="file" placeholder="" οnchange="check()" />
</a>
<!--<a href="" id="submit">-->
<!--submit-->
<!--<input type="submit" name="submit" value="Submit" />-->
<!--</a>-->
</p>
</form>
</div>
<button6 style="display:inline-block;
padding:10px;
width:100px;
height:20px;
cursor: pointer;
top:217px;
left:705px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
text-decoration:none;
color:#ffffff;
font-family:MV Boli;
font-weight:bold;
font-size:30px;
line-height:19px;
background:url(image/2.jpg);
position:relative;
text-align:center;"
onclick = "retrieval()";
>
match
</button6>
<a href="#" id="down">
<button8
id = "histo";
style="padding:10px;
width:100px;
height:20px;
top:216px;
left:830px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
text-decoration:none;
color:#ffffff;
font-family:MV Boli;
font-weight:bold;
font-size:30px;
line-height:19px;
background:url(image/2.jpg);
position:relative;
text-align:center;"
οnclick="showHistory()">
history
</button8>
</a>
<textarea id="CodeArea" readonly="readonly" style="display: none">
This user has transferred two styles:
cubist feather
Back to his original picture
</textarea>
<a href="#" >
<button id="fakeCubist";
οnclick= "changeToMosaic()"
style="position: absolute;
padding:10px;
display: none;
cursor: pointer;
width:130px;
height:40px;
top:596px;
left:520px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
text-decoration:none;
color:#ffffff;
font-family:MV Boli;
font-weight:bold;
font-size:30px;
line-height:19px;
background:url(image/mosaic.jpg);
text-align: center;">
mosaic
</button>
</a>
<a href="#" >
<button id="fakeFeather";
οnclick="changeToFeather()"
style="position: absolute;
padding:10px;
cursor: pointer;
display: none;
width:130px;
height:40px;
top:596px;
left:850px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
text-decoration:none;
color:#000000;
font-family:MV Boli;
font-weight:bold;
font-size:30px;
line-height:19px;
background:url(image/feathers.jpg);
text-align: center;">
feather
</button>
</a>
<a href="#" >
<button id="fakeOriginal";
οnclick="changeToOriginal()";
style="position: absolute;
display: none;
cursor: pointer;
padding:10px;
width:100px;
height:34px;
top:642px;
left:710px;
border:1px solid;
-moz-border-radius: 45px;
-webkit-border-radius: 45px;
border-radius:15px;
text-decoration:none;
color:#ffffff;
font-family:MV Boli;
font-weight:bold;
font-size:24px;
line-height:19px;
background:url(image/2.jpg);
text-align: center;">
original
</button>
</a>
</body>
</html>
后台管理图片的上传:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
<?php
//获取上传文件信息
$upfile=$_FILES["x"];
//定义允许类型
$typelist=array("image/jpeg","image/jpg","image/png","image/gif");
$path="./retrieval/";
$info="";
//对上传的文件进行错误的定义编写
//过滤上传文件的错误号
if($upfile["error"]>0){
switch($upfile['error']){
case 1:
$info="上传得文件超过了 php.ini中upload_max_filesize 选项中的最大值.";
break;
case 2:
$info="上传文件大小超过了html中MAX_FILE_SIZE 选项中的最大值.";
break;
case 3:
$info="文件只有部分被上传";
break;
case 4:
$info="没有文件被上传.";
break;
case 6:
$info="找不到临时文件夹.";
break;
case 7:
$info="文件写入失败!";
break;
}
die("上传错误的原因:".$info);
}//die是直接把错误输出并且停止继续执行}
//文件大小过滤
//文件类型过滤
if (!in_array($upfile["type"],$typelist)){
die("上传文件类型非法!".$upfile["type"]);
}
//上传后的文件名定义(随机获取一个文件名)
$fileinfo=pathinfo($upfile["name"]);
$newfile= "user.jpg";
//盘算是否是一个上传的文件
if(is_uploaded_file($upfile["tmp_name"])){
//实行文件上传(移动上传文件)--需要移动文件到当前的路径
if(move_uploaded_file($upfile["tmp_name"],$path.$newfile)){
echo "<script>alert('文件上传成功!');</script>";
}else{
die("上传文件失败!");
}
}else{
die("不是一个上传文件!");
}
header("location:./Retrieval.php?c=1");
?>
</body>
</html>
后台处理检索请求:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<?php
$c = "E:/programming/C++workbench/test/Image_Retrieval/x64/Debug/Image_Retrieval.exe D:\\wampserver\\www\\mypro\\wangye\\phps\\retrieval\\user.jpg";
echo $c;
$r = exec($c);
echo $r;
echo "123";
// header("location:procss.php?userId=$userId&imgId=$imgId&genImgId=$generatedImgId&style=$style");
$c = "python E:/programming/PYworkbench/Style-Transformer-Website/eval.py 4 ".
"D:\\wampserver\\www\\mypro\\wangye\\phps\\retrieval\\ori.jpg ".
"D:\\wampserver\\www\\mypro\\wangye\\phps\\retrieval\\feather.jpg";
exec($c);
$c = "python E:/programming/PYworkbench/Style-Transformer-Website/eval.py 5 ".
"D:\\wampserver\\www\\mypro\\wangye\\phps\\retrieval\\ori.jpg ".
"D:\\wampserver\\www\\mypro\\wangye\\phps\\retrieval\\mosaic.jpg";
exec($c);
header("location:Retrieval.php?c=2")
?>
</head>
<body>
</body>
</html>