java实现,使用opencv合成全景图,前端使用krpano展示

这周花三天做了一demo,算上之前的,怎么也有五天,上一篇是opencv介绍,以及定义native方法,通过本地图片路径传参,底层调用Opencv图像库合成,有兴趣的可以看看,这篇重点在于krpano的全景图展示,话说刚才上传了22张片照片合成全景图,感觉有半个小时也没有合成完,我这电脑是有多垃圾

那我们代码走一走(都说不上代码是老流氓)

这是demo的目录结构

@Controller
public class PanoramaController {

     /**
         *    @Description:  文件上传以及全景合成
         *    @Date:  15:58  2018/7/6
         *    @Params:   * @param null
         */

    @RequestMapping("/upload")
    public ModelAndView login07(@RequestParam(value = "file", required = false)MultipartFile[] files,
                          @RequestParam(value = "title",defaultValue = "未命名") String title,HttpServletRequest request) {
        ModelAndView mv=new ModelAndView("success.html");
        MultipartFile tempMultipartFile;
        //基本路径
        StringBuffer sb=new StringBuffer();
        String baseURL="E:/demo";
        String tempStr = "/" + UUID.randomUUID().toString();
        for (int j = 0; j < files.length; j++) {
            tempMultipartFile = files[j];
            // 获得上传的文件名称-带有后缀
            String fileNameAndSuffixName = tempMultipartFile.getOriginalFilename();
            // 获取上传的文件名称
            //String fileName = fileNameAndSuffixName.substring(0, fileNameAndSuffixName.lastIndexOf("."));
            String urlPath;
            urlPath = Imgeupload.fileUpdata(tempMultipartFile, "E:/demo", "" + tempStr);
            System.out.println("=====" + urlPath);
            if (j==files.length-2){
                sb.append(baseURL+tempStr+"/"+urlPath);
                break;
            }else if (j<files.length-2){
                sb.append(baseURL+tempStr+"/"+urlPath+",");
            }else {
                System.out.println();
            }

        }
        //拼接URL
        System.out.println("拼接URL"+sb.toString());
        //调用native
        String result= OpenCVUtil.changeArrValue(sb.toString());

        if(!result.contains(",")){
            mv.setViewName("failure.html");
            return mv;
        }
        //System.out.println(result);
        //复制图片
        String basedirNew=UUID.randomUUID().toString()+","+title;
        String dirNew="D:\\tupian\\img\\"+basedirNew+"\\";
        try {
            copyFile(new File("D:/result.jpg"),new File(dirNew+title+".jpg"),dirNew);
        } catch (IOException e) {
            e.printStackTrace();
        }
        mv.addObject("imgUrl","/img/"+basedirNew+"/"+title+".jpg");
        mv.addObject("title",title);
        mv.addObject("fileName",basedirNew);
        return mv;
    }

    @RequestMapping("/index")
    public String login06() {
        return "upload.html";
    }

     /**
         *    @Description:  复制生成的图片到全景图静态区
         *    @Date:  9:45  2018/7/5
         *    @Params:   * @param null
         */

    public void copyFile(File fromFile, File toFile,String fromUrl) throws IOException {
        File file=new File(fromUrl);
        if (!file.exists()) {
            file.mkdir();
        }
        FileInputStream ins = new FileInputStream(fromFile);
        FileOutputStream out = new FileOutputStream(toFile);
        byte[] b = new byte[1024];
        int n=0;
        while((n=ins.read(b))!=-1){
            out.write(b, 0, n);
        }

        ins.close();
        out.close();
    }

}

　　这个主要是文件上传以及全景图合成调用native,生成result.jpg全景图,利用生成的全景图通过krpano工具,生成相应的文件放在tomcat对应webapp,启动tomcat即可访问,这是最开始使用krpano看效果的流程,当然java项目不可能手动复制粘贴文件吧,一切都是通过程序控制,所以不可避免java IO操作,这时遇到一个很大的坑,听我细细道来

　　当时想已经通过krpano生成的相应的文件复制到webapp这部分的操作通过io进行操作,后来才发现,用IO发现权限不够,我使用的是spring boot 项目,tomcat是嵌入式,所以复制到当前项目classes文件下,那换一条路既然生成的都是静态文件,那从当前的项目,引用绝对路径,从本地获取静态资源,呵呵,通过指定端口当用的项目,静态资源权限只限当前项目,从网上收集许多资料,最终使用

spring:
  resources:
    static-locations: //相当于,这块空间和static目录下,resource下,webjar下同级,
//而这块空间可以io进行操作

好了,这个问题解决了,那java代码如何将某个图片拖到本地某个应用XX.bat上看如下代码

public class CmdBat {

	/*public static void main(String[] args) {
		Room r = new Room();
		//项目的位置
		String dpath = "D:\\tupian\\vshow";
		//全景图的位置
		String file = "3";
		String[] fn1 = { "2",
				"3" };
		String[] fn2 = { "客厅", "卧室","大客厅" };
		String title = "哈哈哈哈哈哈哈哈";
		String music = "vshow/backgroundmusic/default.mp3";
		try {
			setKrpano(r,dpath, file, fn1, fn2, title,music);
		} catch (InterruptedException e) {
			e.printStackTrace();
			System.out.println("上传失败");
		}

	}*/
	     /**
	         *    @Description:
	         *    @Date:  10:15  2018/7/6
	         *    @Params:   * @param null
	         */

	public static void setKrpano(final Room r, final String dpath, final String file,
								 final String[] fn1, final String[] fn2, final String title, final String music)
			throws InterruptedException {
		//全景图存的位置
		final String temppath = "D:\\tupian\\img\\";
		String path = temppath+file;
		String ex = "krpanotools32.exe makepano -config=templates\\vtour-multires.config "
				+ path + "\\*.jpg";
		//执行
		Runtime runtime = Runtime.getRuntime();
		boolean b = true;
		Process p = null;
		try {
			//krpano  安装位置
			p = runtime.exec("cmd /c start D:\\Krpano\\krpano.1.19.pr16\\krpano-1.19-pr16\\" + ex);
		} catch (Exception e) {
			b = false;
		}
		if (b) {
			final InputStream is1 = p.getInputStream();
			final InputStream is2 = p.getErrorStream();
			new Thread() {
				public void run() {
					BufferedReader br1 = new BufferedReader(
							new InputStreamReader(is1));
					try {
						String line1 = null;
						while ((line1 = br1.readLine()) != null) {
							if (line1 != null) {
								System.out.println("=AA==========line1======"
										+ line1);
							}
						}
					} catch (IOException e) {
						e.printStackTrace();
					} finally {
						try {
							is1.close();
							// 执行文件复制
							File f = new File(dpath + "\\" + file);
							f.mkdirs();// 创建目录
							// 复制文件
							boolean b1 = copyFile(temppath + file
									+ "\\vtour\\tour.js", dpath + "\\" + file
									+ "\\tour.js");
							if (b1) {
								boolean b2 = copyFile(temppath + file
										+ "\\vtour\\tour.swf", dpath + "\\"
										+ file + "\\tour.swf");
								if (b2) {
									boolean b3 = copyFile(temppath
											+ file + "\\vtour\\tour.xml", dpath
											+ "\\" + file + "\\tour.xml");
									if (b3) {
										// 复制文件夹
										boolean b4 = copyFolder(
												temppath + file
														+ "\\vtour\\panos",
												dpath + "\\" + file + "\\panos");
										if (b4) {
											// 删除临时生成文件
											delFolder(temppath + file);
											// 修改krpano文件内容
											String xmlPath = dpath + "\\"
													+ file + "\\tour.xml";
											File xmlFile = new File(xmlPath);
											DocumentBuilderFactory dbFactory = DocumentBuilderFactory
													.newInstance();
											DocumentBuilder dBuilder;
											try {
												dBuilder = dbFactory
														.newDocumentBuilder();
												Document doc = dBuilder
														.parse(xmlFile);
												doc.getDocumentElement()
														.normalize();
												for (int i = 0; i < fn1.length; i++) {
													updateAttributeValue(doc,
															fn1[i], fn2[i]);
												}

												// update Element value
												updateElementValue(doc, title);

												// delete element
												deleteElement(doc);

												// add new element
												addElement(doc);

												updateAttributeColorValue(doc,
														"0x000000");
												addMusicElement(doc,music);
												// write the updated document to
												// file or console
												doc.getDocumentElement()
														.normalize();
												TransformerFactory transformerFactory = TransformerFactory
														.newInstance();
												Transformer transformer = transformerFactory
														.newTransformer();
												DOMSource source = new DOMSource(
														doc);
												StreamResult result = new StreamResult(
														new File(xmlPath));
												transformer.setOutputProperty(
														OutputKeys.INDENT,
														"yes");
												transformer.transform(source,
														result);
												//生成成功
												r.setMark("1");
											//	AdminService as = ContextUtil.getBean(AdminService.class, "adminService");
											//	as.updateRoom(r);
												/*System.out
														.println("XML file updated successfully");*/

											} catch (
													SAXException
													| ParserConfigurationException
													| IOException
													| TransformerException e1) {
												e1.printStackTrace();
												//生成失败
												r.setMark("2");
											//	AdminService as = ContextUtil.getBean(AdminService.class, "adminService");
											//	as.updateRoom(r);
											}

										}
									}
								}
							}
						} catch (IOException e) {
							e.printStackTrace();
						}
					}
				}
			}.start();
			new Thread() {
				public void run() {
					BufferedReader br2 = new BufferedReader(
							new InputStreamReader(is2));
					try {
						String line2 = null;
						while ((line2 = br2.readLine()) != null) {
							if (line2 != null) {
								System.out.println("=AA==========line2======"
										+ line2);
							}
						}
					} catch (IOException e) {
						e.printStackTrace();
					} finally {
						try {
							is2.close();
						} catch (IOException e) {
							e.printStackTrace();
						}
					}
				}
			}.start();
			p.waitFor();
			p.destroy();
		} else {
			System.out.println("上传失败");
		}

	}

	/**
	 * 复制单个文件
	 *
	 * @param oldPath
	 *            String 原文件路径 如：c:/fqf.txt
	 * @param newPath
	 *            String 复制后路径 如：f:/fqf.txt
	 * @return boolean
	 */
	public static boolean copyFile(String oldPath, String newPath) {
		try {
			int bytesum = 0;
			int byteread = 0;
			File oldfile = new File(oldPath);
			if (oldfile.exists()) { // 文件存在时
				InputStream inStream = new FileInputStream(oldPath); // 读入原文件
				FileOutputStream fs = new FileOutputStream(newPath);
				byte[] buffer = new byte[1444];
				int length;
				while ((byteread = inStream.read(buffer)) != -1) {
					bytesum += byteread; // 字节数 文件大小
					// System.out.println(bytesum);
					fs.write(buffer, 0, byteread);
				}
				inStream.close();
			}
		} catch (Exception e) {
			// System.out.println("复制单个文件操作出错");
			e.printStackTrace();
			return false;
		}
		return true;
	}

	/**
	 * 复制整个文件夹内容
	 *
	 * @param oldPath
	 *            String 原文件路径 如：c:/fqf
	 * @param newPath
	 *            String 复制后路径 如：f:/fqf/ff
	 * @return boolean
	 */
	public static boolean copyFolder(String oldPath, String newPath) {
		try {
			(new File(newPath)).mkdirs(); // 如果文件夹不存在 则建立新文件夹
			File a = new File(oldPath);
			String[] file = a.list();
			File temp = null;
			for (int i = 0; i < file.length; i++) {
				if (oldPath.endsWith(File.separator)) {
					temp = new File(oldPath + file[i]);
				} else {
					temp = new File(oldPath + File.separator + file[i]);
				}

				if (temp.isFile()) {
					FileInputStream input = new FileInputStream(temp);
					FileOutputStream output = new FileOutputStream(newPath
							+ "/" + (temp.getName()).toString());
					byte[] b = new byte[1024 * 5];
					int len;
					while ((len = input.read(b)) != -1) {
						output.write(b, 0, len);
					}
					output.flush();
					output.close();
					input.close();
				}
				if (temp.isDirectory()) {// 如果是子文件夹
					copyFolder(oldPath + "/" + file[i], newPath + "/" + file[i]);
				}
			}
		} catch (Exception e) {
			// System.out.println("复制整个文件夹内容操作出错");
			e.printStackTrace();
			return false;
		}
		return true;
	}

	// 删除文件夹
	public static void delFolder(String folderPath) {
		try {
			delAllFile(folderPath); // 删除完里面所有内容
			String filePath = folderPath;
			filePath = filePath.toString();
			File myFilePath = new File(filePath);
			myFilePath.delete(); // 删除空文件夹
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	public static boolean delAllFile(String path) {
		boolean flag = false;
		File file = new File(path);
		if (!file.exists()) {
			return flag;
		}
		if (!file.isDirectory()) {
			return flag;
		}
		String[] tempList = file.list();
		File temp = null;
		for (int i = 0; i < tempList.length; i++) {
			if (path.endsWith(File.separator)) {
				temp = new File(path + tempList[i]);
			} else {
				temp = new File(path + File.separator + tempList[i]);
			}
			if (temp.isFile()) {
				temp.delete();
			}
			if (temp.isDirectory()) {
				delAllFile(path + "/" + tempList[i]);// 先删除文件夹里面的文件
				delFolder(path + "/" + tempList[i]);// 再删除空文件夹
				flag = true;
			}
		}
		return flag;
	}

	private static void addElement(Document doc) {
		NodeList employees = doc.getElementsByTagName("krpano");
		Element emp = null;

		// loop for each employee
		for (int i = 0; i < employees.getLength(); i++) {
			emp = (Element) employees.item(i);
			Element vtourskin = doc.createElement("include");
			vtourskin.setAttribute("url", "../skin/vtourskin.xml");
			emp.appendChild(vtourskin);
			Element skinselect = doc.createElement("include");
			skinselect.setAttribute("url", "../skinselect.xml");
			emp.appendChild(skinselect);
		}
	}
	private static void addMusicElement(Document doc,String music) {
		NodeList employees = doc.getElementsByTagName("krpano");
		Element emp = null;

		// loop for each employee
		for (int i = 0; i < employees.getLength(); i++) {
			emp = (Element) employees.item(i);
			Element musicEl = doc.createElement("action");
			musicEl.setAttribute("name", "bgsnd_action");
			musicEl.setAttribute("autorun", "onstart");
			musicEl.appendChild(doc.createTextNode("playsound(bgsnd, '"+music+"', 0);"));
			emp.appendChild(musicEl);
		}
	}
	private static void deleteElement(Document doc) {
		NodeList employees = doc.getElementsByTagName("krpano");
		Element emp = null;
		// loop for each employee
		for (int i = 0; i < employees.getLength(); i++) {
			emp = (Element) employees.item(i);
			Node genderNode = emp.getElementsByTagName("include").item(0);
			emp.removeChild(genderNode);
		}

	}

	private static void updateElementValue(Document doc, String title) {
		NodeList employees = doc.getElementsByTagName("krpano");
		Element emp = null;
		// loop for each employee
		for (int i = 0; i < employees.getLength(); i++) {
			emp = (Element) employees.item(i);
			emp.setAttribute("title", title);
		}
	}

	private static void updateAttributeValue(Document doc, String oldname,
			String newname) {
		NodeList employees = doc.getElementsByTagName("scene");
		Element emp = null;
		// loop for each employee
		for (int i = 0; i < employees.getLength(); i++) {
			emp = (Element) employees.item(i);
			if (emp.getAttribute("title").equals(oldname)) {
				emp.setAttribute("title", newname);
				break;
			}
		}
	}

	private static void updateAttributeColorValue(Document doc, String newname) {
		NodeList employees = doc.getElementsByTagName("skin_settings");
		Element emp = null;
		// loop for each employee
		for (int i = 0; i < employees.getLength(); i++) {
			emp = (Element) employees.item(i);
			emp.setAttribute("design_bgcolor", newname);
			emp.setAttribute("design_bgalpha", "0.8");
		}
	}
}　　

去掉mian函数的注释,启动一下,看看执行结果,这段代码相当于手动拖动图片到.bat上,其中可以修改krpano下的templates下的vtour-multires.config文件

# basic settings
include basicsettings.config
panotype=sphere
# panotype=autodetect
hfov=360
makescenes=true

　　自动生成一种固定的全景图(柱型,球型...)

Ok,看一下生成文件中哪些是固定的公用的

@Controller
public class FileLibraryController {
         /**
             *    @Description:  从文件中获取全景图
             *    @Date:  17:13  2018/7/5
             *    @Params:   * @param null
             */

    @RequestMapping("/all")
    public ModelAndView list(Model model){
       // List<File> wjList = new ArrayList<File>();//新建一个文件集合
        List<PanoramaDO> list=new ArrayList<>();
        File file=new File(ConstantBank.PANORAMA_BANK_URL);
        ModelAndView mv=new ModelAndView("list.html");
        File[] fileList = file.listFiles();//将该目录下的所有文件放置在一个File类型的数组中
        for (int i = 0; i < fileList.length; i++) {
            if (fileList[i].isDirectory()) {//判断是否为文件
              //  wjList.add(fileList[i]);
                String directoryName=fileList[i].getName();

                if (!directoryName.equals(ConstantBank.EXCLUSIVE_SECOND_DIR_NAEM)&&!directoryName.equals(ConstantBank.EXCLUSIVE_FIRST_DIR_NAME)){
                    //分割文件名
                    String title =directoryName.substring(directoryName.indexOf(",")+1);
                    PanoramaDO panoramaDO=new PanoramaDO();
                    panoramaDO.setId(directoryName);
                    if (title==null||title.equals("")){
                        panoramaDO.setTitle("未命名");
                    }else {
                        panoramaDO.setTitle(title);
                    }
                    list.add(panoramaDO);
                    //System.out.println(directoryName);
                    //System.out.println(title);
                }

            }
        }
        System.out.println(list);
        mv.addObject("list",list);
        return mv;

    }

    @RequestMapping("/{id}/temp")
    public ModelAndView jump(@PathVariable("id") String vid){

        ModelAndView mv =new ModelAndView("vr.html");
        //mv.getView().
        mv.addObject("vid",vid);
        String title =vid.substring(vid.indexOf(",")+1);
        if (title==null||title.equals("")){
            mv.addObject("title","未命名");
        }else {
            mv.addObject("title",title);
        }
        System.out.println("===>"+vid);
       return mv;
    }

    @RequestMapping("/compound/{fileName}/{title}")
    public ModelAndView compound(@PathVariable("fileName") String fileName,
                            @PathVariable("title") String title){

        ModelAndView mv =new ModelAndView("redirect:/all");
        //mv.getView().
        Room r = new Room();
        //项目的位置
        String dpath = "D:\\tupian\\vshow";
        //全景图的文件名
        String file = fileName;
        String[] fn1 = { "2",
                "3" };
        String[] fn2 = { "客厅", "卧室","大客厅" };
        //String title = "哈哈哈哈哈哈哈哈";
        String music = "vshow/backgroundmusic/default.mp3";
        try {
            CmdBat.setKrpano(r,dpath, file, fn1, fn2, title,music);
        } catch (InterruptedException e) {
            e.printStackTrace();
            System.out.println("上传失败");
        }

        return mv;
    }

}

　vr.html  公用的vr.html

<!--<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" isELIgnored="false"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!DOCTYPE html>
<html>
<head>
<base href="/">
	<title th:text="${title}"> </title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
	<meta name="apple-mobile-web-app-capable" content="yes" />
	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta http-equiv="x-ua-compatible" content="IE=edge" />
	<link rel="shortcut icon" href="images/favicon.png">
	<style>
		@-ms-viewport { width:device-width; }
		@media only screen and (min-device-width:800px) { html { overflow:hidden; } }
		html { height:100%; }
		body { height:100%; overflow:hidden; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
	</style>
</head>
<body>
<div style="position: absolute;z-index: 1;margin-top: 10px;margin-left: 10px">
<a href="/all"><img src="img/logo.jpg" style="height: 50px"></a>
</div>

<script th:src="'/vshow/'+${vid }+'/tour.js'"></script>
<div id="pano" style="width:100%;height:100%;">
	<noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript>
	<script>
        /*<![CDATA[*/

        var vid = "[[${vid}]]";
        embedpano({swf:"/vshow/"+vid+"/tour.swf", xml:"/vshow/"+vid+"/tour.xml", target:"pano", html5:"prefer", mobilescale:1.0, passQueryParameters:true});

     /*   ]]>*/

	</script>
</div>

</body>
</html>

　　upload.html  这是文件上传以及回显,下面的js等待加载过度

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/default.css">
    <!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
    <link rel="stylesheet" href="css/demo.css">
    <link rel="stylesheet" href="css/fakeLoader.css">

    <style>
        .uploadImgBtn {

            width: 100px;
            height: 100px;
            cursor: pointer;
            position: relative;
            background: url("img/plus.png") no-repeat;
            -webkit-background-size: cover;
            background-size: cover;
        }

        .uploadImgBtn .uploadImg {
            position: absolute;
            right: 0;
            top:0;
            width: 100%;
            height: 100%;
            opacity: 0;
            cursor: pointer;
        }
        //这是一个用做回显的盒子的样式
          .pic{
              width: 100px;
              height: 100px;
          }
        .pic img {
            width: 200px;
            height: 100px;
        }
    </style>

</head>

<body>

    <div class="fakeloader"></div>

<form action="/upload" method="post" enctype="multipart/form-data">
    <div class="uploadImgBtn" id="uploadImgBtn">
        <input class="uploadImg" type="file" name="file" multiple id="file">
    </div>
    <div>合成全景图片的名字<input type="text" name="title" id="title"></div>
    <input type="submit" onclick="haha()" value="上传">
</form>

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/fakeLoader.min.js"></script>

<script>

    function haha() {
        var html01='<h4>全景图正在合成请稍等...</h4>';
        $(".fakeloader").append($(html01));
        $(".fakeloader").fakeLoader({
            timeToHide:1200000,
            bgColor:"#d9d2e9",
            spinner:"spinner2"
        });
    }
    $(document).ready(function(){

        //为外面的盒子绑定一个点击事件
        $("#uploadImgBtn").click(function(){
            /*
            1、先获取input标签
            2、给input标签绑定change事件
            3、把图片回显
             */
//            1、先回去input标签
            var $input = $("#file");
            console.log($input)
//            2、给input标签绑定change事件
            $input.on("change" , function(){
                console.log(this)
                //补充说明：因为我们给input标签设置multiple属性，因此一次可以上传多个文件
                //获取选择图片的个数
                var files = this.files;
                var length = files.length;
                console.log("选择了"+length+"张图片");
                //3、回显
                $.each(files,function(key,value){
                    //每次都只会遍历一个图片数据
                    var div = document.createElement("div"),
                        img = document.createElement("img");
                    div.className = "pic";

                    var fr = new FileReader();
                    fr.onload = function(){
                        img.src=this.result;
                        div.appendChild(img);
                        document.body.appendChild(div);
                    }
                    fr.readAsDataURL(value);
                })

            })

            //4、我们把当前input标签的id属性remove
            $input.removeAttr("id");
            //我们做个标记，再class中再添加一个类名就叫test
            var newInput = '<input class="uploadImg test" type="file" name="file" multiple id="file">';
            $(this).append($(newInput));

        })

    })

</script>
</body>
</html>

　　这写到这把,后续会弄全景漫游....这些都要整合项目里面