完成了整个项目在自己电脑上的部署和图像检索模块页面的编写。
部署的细节不一一赘述了,下面放上图像检索模块页面的部分代码。
<!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="" onchange="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;" onclick="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"; onclick= "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"; onclick="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"; onclick="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>