增加视频文件生成关键帧图片的处理逻辑，以关键帧图片作为源文件生成特征文件。

2018-10-19 20:33:40 +08:00
parent b5dc246b08
commit c837930c12
8 changed files with 462 additions and 61 deletions
--- a/src/main/webapp/WEB-INF/views/cfg/av/fileSampleForm.jsp
+++ b/src/main/webapp/WEB-INF/views/cfg/av/fileSampleForm.jsp
@@ -28,8 +28,49 @@ $(function(){
 	$("#uploadSrc,#srcFileInfo").on('click',function(){
 		$("#srcFile").trigger("click");
 	});
+
 	$("#srcFile").on('change',function(){
 		$("#srcFileInfo").val($("#srcFile").val());
+		var videoToPicture = $("#videoToPicture").val();
+		if(videoToPicture=="true"){
+			
+	    	var fd = new FormData($('#cfgFrom')[0]);
+	    	$.ajax({
+	    		url: "${ctx}/ntc/av/sample/videoToPicture",
+	    		type: "POST",
+	    		processData: false,
+	    		contentType: false,
+	    		data: fd,
+	    		async: true,  
+	            cache: false, 
+	            beforeSend: function(){
+	            	loading('onloading...');
+	            },
+	    		success: function(data) {
+	    			top.$.jBox.closeTip();
+	    			if(data.status==1){
+	    				$("#picPath").val(data.picFilePath);
+	    				$("#showPicture").removeClass("hidden");
+		    			var url = "${ctx}/ntc/av/sample/selectVedioPicture?picFilePath="+encodeURIComponent(data.picFilePath);
+		    			$.jBox("iframe:"+url, {
+		    			    title: "",
+		    			    width: 1350,
+		    			    height:800,
+		    			    dragLimit: true,
+		    			    buttons: { 'close': true,"ok":"ok" }
+		    			});
+	    			}else{
+	    				alert(data.msg);
+	    			}
+	    			
+	    		},
+				error:function(jqXHR, textStatus, errorThrown){ 
+					top.$.jBox.closeTip();
+					alert(errorThrown);
+					return false;
+				} 
+	    	});
+		}
 	});
 	/* $("#uploadSample,#sampleFileInfo").on('click',function(){
 		$("#sampleFile").trigger("click");
@@ -64,17 +105,27 @@ $(function(){
 			var srcFile = $("#srcFile").val();
 			//var sampleFile = $("#sampleFile").val();
 			var srcUrl = $("#srcUrl").val();
+			var srcPath = $("#srcPath").val();
 			//var sampleUrl = $("#sampleUrl").val();
-			if((srcUrl==null||srcUrl=="") && (srcFile==null || srcFile=="")){
-				$("div[for='srcFile']").append("<label id='level-error' class='error' for='srcFile'><spring:message code='required'></spring:message></label>");
-				return false;
-			}/* else if((sampleUrl==null || sampleUrl=="") && (sampleFile==null || sampleFile=="")){
-				$("div[for='sampleFile']").append("<label id='level-error' class='error' for='sampleFile'><spring:message code='required'></spring:message></label>");
-				return false;
-			} */else{
-				loading('onloading...');
-				form.submit();
+			var videoToPicture = $("#videoToPicture").val();
+			if(videoToPicture=="true"){
+				if((srcUrl==null||srcUrl=="") && (srcPath==null || srcPath=="")){//srcUrl判断修改时未重新上传文件，srcPath判断修改时重新上传文件但未选择关键帧图片
+					$("div[for='srcFileInfo']").append("<label id='level-error' class='error' for='srcFile'><spring:message code='keyframe_pic_required'></spring:message></label>");
+					return false;
+				}else if(srcFile!=null && srcFile!=""){//选择视频文件
+					if(srcPath==null || srcPath==""){//单位选择关键帧图片
+						$("div[for='srcFileInfo']").append("<label id='level-error' class='error' for='srcFile'><spring:message code='keyframe_pic_required'></spring:message></label>");
+						return false;
+					}
+				}
+			}else{
+				if((srcUrl==null||srcUrl=="") && (srcFile==null || srcFile=="")){
+					$("div[for='srcFileInfo']").append("<label id='level-error' class='error' for='srcFile'><spring:message code='required'></spring:message></label>");
+					return false;
+				}
 			}
+			loading('onloading...');
+			form.submit();
 			
 		},
 		errorContainer: "#messageBox",
@@ -82,6 +133,17 @@ $(function(){
 			$(element).parents(".form-group").find("div[for='"+element.attr("name")+"']").append(error);
 		},
 	});
+	$("#showPicture").on('click',function(){
+		var srcPath = $("#srcPath").val()
+		var url = "${ctx}/ntc/av/sample/selectVedioPicture?picFilePath="+encodeURIComponent($("#picPath").val())+"&srcPath="+encodeURIComponent(srcPath);
+		$.jBox("iframe:"+url, {
+		    title: "",
+		    width: 1350,
+		    height:800,
+		    dragLimit: true,
+		    buttons: { 'close': true,"ok":"ok" }
+		});
+	})
 });

 function hiddenlevel(){
@@ -123,8 +185,9 @@ function hiddenlevel(){
                      <form id="cfgFrom" action="${ctx}/ntc/av/sample/saveFileSample" enctype="multipart/form-data" method="post" class="form-horizontal">
                      	<input type="hidden" name="cfgId" value="${_cfg.cfgId}">
                       	<input type="hidden" name="compileId" value="${_cfg.compileId}">
-                       	<input type="hidden" name="functionId" value="${_cfg.functionId}">
+                       	<input type="hidden" name="functionId" id="functionId" value="${_cfg.functionId}">
                       	<input type="hidden" id="serviceId" name="serviceId" value="${_cfg.serviceId}">
+                       	<input type="hidden" name="picPath" id="picPath" value="">
                       	<!-- 配置域类型 -->
                   		<c:forEach items="${regionList}" var="region">
                   			<c:if test="${_cfg.functionId eq region.functionId}">
@@ -176,18 +239,42 @@ function hiddenlevel(){
 							            <label class="control-label col-md-3"><font color="red">*</font><spring:message code="src_file"/></label>
 							            <div class="col-md-6">
 							            	 <%-- <input class="form-control required" type="text" name="srcUrl" value="${_cfg.srcUrl }"> --%>
-							            	 <input id="srcFile" name="srcFile" type="file" style="width: 330px;display:none" />
-							            	 <div class="input-group">
-								            	 <input id="srcFileInfo" name="srcFileInfo" readonly="readonly" data-msg-required="" 
-								            	 placeholder="<spring:message code="select_file"/>" class="required form-control" style=" background-color:transparent" 
-								            	 aria-required="true" type="text" value="${_cfg.srcUrl }">
-								            	 
-								            	 <div class="input-group-btn">
-										             <a id="uploadSrc" class="btn btn-default btn-search" href="javascript:" style=""><i class="fa fa-search"></i></a>
-										        </div>
-										        <%-- <span id="srcFileInfo" style="margin-top:20px;margin-left:10px;">${_cfg.srcUrl }</span> --%>
-									        </div>
-							            	 <input id="srcUrl" name="srcUrl" type="hidden" value="${_cfg.srcUrl }"/>
+							            	 <input id="srcFile" type="file" name="srcFile" style="width: 330px;display:none" />
+							            	 <c:set var="videoToPicture" value="${fns:getDictLabel('VIDEO_TO_PICTURE', _cfg.functionId, 'false')}" />
+							            	 <input type="hidden" name="videoToPicture" id="videoToPicture" value="${videoToPicture }">
+							            	 <c:choose>
+							            	 		
+							            	 		<c:when test="${videoToPicture}">
+							            	 			<input id="srcPath" name="srcPath" type="hidden" style="width: 330px;" />
+							            	 			<div class="input-group">
+								            	 			<input id="srcFileInfo" name="srcFileInfo" readonly="readonly" data-msg-required="" 
+											            	 placeholder="<spring:message code="select_file"/>" class="required form-control" style=" background-color:transparent" 
+											            	 aria-required="true" type="text" value="${_cfg.srcUrl }">
+											            	 
+											            	 <div class="input-group-btn">
+													             <a id="uploadSrc" class="btn btn-default btn-search " href="javascript:" style=""><i class="fa fa-search"></i></a>
+													         </div>
+													        
+												        </div>
+												        <input id="srcUrl" name="srcUrl" type="hidden" value="${_cfg.srcUrl }"/>
+															<button type="button" id="showPicture" class="btn btn-warning hidden ">
+																<i class="fa btn-search"></i>
+															<spring:message code="show"></spring:message></button>
+							            	 		</c:when>
+							            	 		<c:otherwise>
+								            	 		<div class="input-group">
+								            	 			<input id="srcFileInfo" name="srcFileInfo" readonly="readonly" data-msg-required="" 
+											            	 placeholder="<spring:message code="select_file"/>" class="required form-control" style=" background-color:transparent" 
+											            	 aria-required="true" type="text" value="${_cfg.srcUrl }">
+											            	 
+											            	 <div class="input-group-btn">
+													             <a id="uploadSrc" class="btn btn-default btn-search" href="javascript:" style=""><i class="fa fa-search"></i></a>
+													        </div>
+													    <%-- <span id="srcFileInfo" style="margin-top:20px;margin-left:10px;">${_cfg.srcUrl }</span> --%>
+										        		</div>
+										        		<input id="srcUrl" name="srcUrl" type="hidden" value="${_cfg.srcUrl }"/>
+							            	 		</c:otherwise>
+							            	 	</c:choose>
 							            </div>
 							            <div for="srcFileInfo"></div>
 							        </div>
--- a/src/main/webapp/WEB-INF/views/cfg/av/videoPictureList.jsp
+++ b/src/main/webapp/WEB-INF/views/cfg/av/videoPictureList.jsp
@@ -0,0 +1,156 @@
+<%@ page contentType="text/html;charset=UTF-8"%>
+<%@ include file="/WEB-INF/include/taglib.jsp"%>
+<html>
+<head>
+<title><spring:message code="${cfgName}"></spring:message></title>
+<script>
+ 	$(document).ready(function() {
+ 		$("#submitButton").on('click',function(){
+ 			var selectPic = "";
+ 			$("div[name='checkPic']").each(function(){
+ 	            if($(this).attr("ischecked")=="true")
+ 	            {
+ 	            	selectPic += $(this).attr("value")+"|";
+ 	            }
+ 	          });
+ 			if(selectPic==""){
+ 				top.$.jBox.tip("<spring:message code='one_more'/>", "<spring:message code='info'/>");
+ 				return false;
+ 			}else{
+ 				$("#srcPath",parent.document).val(selectPic);
+ 	 			//关闭此窗口
+ 				window.parent.window.jBox.close();
+ 			}
+ 			
+ 		});
+ 		$("div[name='checkPic']").on('click',function(){
+ 			if($(this).attr("ischecked")=="true"){
+ 				$(this).attr("ischecked","false");
+ 				$(this).find(".icon-check").css("display","none");
+ 			}else{
+ 				$(this).attr("ischecked","true");
+ 				$(this).find(".icon-check").css("display","block");
+ 			}
+ 		});
+ 		$(".checkAll").on('click',function(){
+ 			if($(this).hasClass("checkAll-cancel")){
+ 				$(this).addClass("checkAll-check");
+ 				$(this).removeClass("checkAll-cancel");
+ 				$("div[name='checkPic']").attr("ischecked","true");
+ 				$("div[name='checkPic']").find(".icon-check").css("display","block");
+ 			}else{
+ 				$(this).addClass("checkAll-cancel");
+ 				$(this).removeClass("checkAll-check");
+ 				$("div[name='checkPic']").attr("ischecked","false");
+ 				$("div[name='checkPic']").find(".icon-check").css("display","none");
+ 			}
+ 		})
+ 		
+ 	});
+ 	
+</script>
+<style type="text/css">
+.selectImgDiv .item{width:150px;height:150px;border:solid thin #aaa;float:left;margin:10px;cursor:pointer;overflow:hidden}
+.selectImgDiv .item:hover{border:solid thin #09f}.selectImgDiv .item .img_show{width:100%;height:100%;overflow:hidden}
+.selectImgDiv .item .img_show img{width:100%;height:100%}
+.selectImgDiv .item:hover .img_show img{transform:scale(1.3);transition:all 1s ease 0s;-webkit-transform:scale(1.3);-webkit-transform:all 1s ease 0s}
+.selectImgDiv .item .img_title{height:30px;text-align:center;font-size:16px;line-height:30px;background-color:rgba(102,102,102,.6);position:relative;color:#fff;font-weight:700}
+.selectImgDiv .item:hover .img_title{top:-30px}
+.selectImgDiv .item .img_isCheck{position:relative;top:-168px;text-align:right}
+.selectImgDiv .item .img_isCheck i{font-size:30px;display:none;color:#fdfdfd;padding-top:3px;}
+.checkAll{font-size:30px;display:none;color:#6f3}
+/* @font-face{
+	font-family:iconfont;
+	src:url(../font/iconfont.eot?t=1495283771116);
+	src:url(../font/iconfont.eot?t=1495283771116#iefix) format('embedded-opentype'),url(../font/iconfont.woff?t=1495283771116) format('woff'),url(../font/iconfont.ttf?t=1495283771116) format('truetype'),url(../font/iconfont.svg?t=1495283771116#iconfont) format('svg')
+} */
+.iconfont{
+	background-color: #6f3;
+    width: 25px;
+    height: 25px;
+    float: right;
+    margin-right: 5px;
+} 
+.icon-check:before{content:"\2714"}
+.checkAll-check:before{content:"\2611"}
+.checkAll-cancel:before{content:"\2610"}
+</style>
+</head>
+<body>
+
+<div class="page-content">
+
+		<div class="col-md-12">
+			<div class="portlet">
+				<div class="portlet-body">
+					<div class="row" style="margin-top:10px">
+						<input type="hidden" id="picFilePath" name="picFilePath" value="${picFilePath }"/>
+						<div class="col-md-12">
+							<div class="pull-right">
+									<button type="button" id="submitButton" class="btn btn-warning" style="margin-right:10px">
+									<i class="fa fa-plus"></i>
+									<spring:message code="ok"></spring:message></button>
+							</div>
+							<div class="pull-right">
+									<i class="checkAll checkAll-cancel" style="display:block;font-style:normal;margin:-5px 8px 0px 0px"></i>
+							</div>
+							
+						</div>
+	
+					</div>
+					<div class="container" style="margin-top:30px">
+						<%-- <table id="contentTable" class="table table-striped table-bordered table-condensed text-nowrap">
+							<thead>
+								<tr>
+									<th><input type="checkbox" class="i-checks" id="checkAll"></th>
+									<th><spring:message code="index"/></th>
+									<th><spring:message code="thumbnail"/></th>
+								</tr>
+							</thead>
+							<tbody>
+								<c:forEach items="${fileList}" var="file" varStatus="status" step="1">
+									<tr>
+									<td><input type="checkbox" name="checkPic" ${file.checked } class="i-checks" id="${status.index+1}" value="${file.picName }"></td>
+									<td>${status.index+1}</td>
+									<td>
+										<a href="${pageContext.request.contextPath}/${file.picUrl }" target="_blank">
+											<img alt="" src="${pageContext.request.contextPath}/${file.picUrl }" width="100px" height="100px">
+										</a>
+									</td>
+								</tr>
+								</c:forEach>
+							</tbody>
+						</table> --%>
+						<div class="selectImgDiv" id="selectItemDiv">
+							<c:forEach items="${fileList}" var="file" varStatus="status" step="1">
+								<div class="item i-checks" name="checkPic" id="checkPic${status.index }" ischecked="${file.checked }" value="${file.picName }">
+									<div class="img_show">
+										<img alt="" src="${pageContext.request.contextPath}/${file.picUrl }" width="120px" height="120px">
+									</div>
+									<div class="img_title">
+										${file.picName }
+									</div>
+									<div class="img_isCheck">
+										<i class="iconfont icon-check" style="<c:if test='${file.checked }'>display:block</c:if>"></i>
+									</div>
+								</div>
+							</c:forEach>
+						</div>
+						<%-- <c:forEach items="${fileList}" var="file" varStatus="status" step="1">
+						
+						<input type="checkbox" name="checkPic" ${file.checked } class="i-checks" id="${status.index+1}" value="${file.picName }">
+						<a href="${pageContext.request.contextPath}/${file.picUrl }" target="_blank">
+							<img alt="" src="${pageContext.request.contextPath}/${file.picUrl }" width="120px" height="120px">
+						</a>
+						
+						<c:if test="${(status.index+1) mod 8 eq 0 }">
+						<br><br>
+						</c:if>
+						</c:forEach> --%>
+					</div>
+				</div>
+			</div>
+</div>
+</div>
+</body>
+</html>