基于深度学习的图像的风格迁移创新实训9

其他 2018-06-21 02:14:12 阅读次数: 3

完成了整个项目在自己电脑上的部署和图像检索模块页面的编写。

部署的细节不一一赘述了，下面放上图像检索模块页面的部分代码。

<!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>

猜你喜欢

转载自blog.csdn.net/geek_geeker/article/details/80734273
今日推荐
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
国产云输入法——仅华为无云端数据上传安全问题
开源日报 | 工业开源项目OGG 1.0；姐姐，你要和我一起配置火狐吗；苹果AI遥遥落后？Fedora 40
开放签电子签章：停止新增，优化体验，前进更进（五一假期前工作）
周排行
Metasploit文件目录与入侵基本概念
跨域(CORS)请求问题[No 'Access-Control-Allow-Origin' header is present on the requested resource]常见解决方案
CodeIgniter 源码解读之 CodeIgniter.php（二）
SAS入门之（四）改变数据类型
初识元组
[数学建模]数学建模算法和模型（B站视频）（二）
Nginx 服务器源码安装配置流程
C#实现语音视频录制 【基于MCapture + MFile】
开发进度4
下载安装vue的方法网址
每日归档
更多
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)
2024-04-21(0)
2024-04-20(6)
2024-04-19(5)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022