(个人)基于深度学习的中国传统特色图像的风格迁移创新实训第七周（1）

本周实现了之前编写的界面中一些button的功能。下面将讲解这些界面的实现过程：

首先是登录界面，登录界面只有一个按钮，功能是跳转到操作界面。

只需要在button的属性里加上一句话

onclick="window.location.href='procss.html'

写出要跳转到的界面的地址即可

然后是操作界面，在实现过程中考虑到上传浏览图片应该是两个过程，保存和下载到本地是两个过程才比较合理。于是对操作界面进行了修改，效果如下：

upload：实现从本地选择图片，并显示在左边的画框位置：

其实现的主要思路参考百度：https://jingyan.baidu.com/article/49ad8bceba22795834d8fa18.html?qq-pf-to=pcqq.c2c

但这只能实现上传图片，并不能显示出来，显示的思路是，获取上传的图片的路径，更新左边画框图片的src

var img=document.getElementById("img1");

var url =  window.URL.createObjectURL(fileinput.files[0]);

img.src=url;

效果如图所示：

      

下一步是将图片上传到服务器

参考百度的方法：https://jingyan.baidu.com/article/54b6b9c090bd272d583b47f4.html

但是单纯这样实现会造成界面跳转，所以当界面跳转后必须跳回当前界面。

echo "<script>alert('文件上传成功！');
history.go(-1);</script>";

 button“down”的作用是将右侧画框中的图片下载到本地，实现方法：

<a href="#" download="" id="down">
<button8   style="display:inline-block;
		       padding:10px;
			   width:100px;
			   height:20px;
			   top:102px;
			   left:760px;
			   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="Down()">
down
</button8>

function Down(){
		var image = document.getElementById("img2");
		var down = document.getElementById("down");
		down.href=image.src;
		down.download="img";
		down.click();
	}