hummingbird
/
java_opencv
Not watched
2
0
Fork 0
Code
Releases 0 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: 9983f3ce7d
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '9983f3ce7d'
${ noResults }
java_opencv/src/main/webapp/view/base/findtemplate.jsp

373 lines
17 kB
Raw Blame History 

  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

  2. <%@include file="/module/include/common.jsp"%>

  3. <!DOCTYPE html>

  4. <html>

  5. <head>

  6.     <sys:header title="首页" extLibs=""></sys:header>

  7. 	<link rel="stylesheet" href="${ctxStatic}/plugins/bootstrap-slider/slider.css">

  8. 	<link rel="stylesheet" href="${ctxStatic}/plugins/iCheck/all.css?t=${version}">

  9. 	<link rel="stylesheet" href="${ctxStatic}/plugins/iCheck/minimal/blue.css?t=${version}">

  10. 	<link rel="stylesheet" href="${ctxStatic}/plugins/jcrop/Jcrop-0.9.12/css/jquery.Jcrop.min.css?t=${version}">

  11.     <script type="text/javascript">

  12. 		$(function(){

  13. 			var baseImageFile = "/statics/sourceimage/lena.png"

  14. 			var newImagePath = "/statics/distimage/lena.png"

  15. 			var matchImagePath = "/statics/sourceimage/template.png"

  16. 			$("#oldimg").attr("src",baseUrl+baseImageFile);

  17. 			$("#match").attr("src",baseUrl+baseImageFile);

  18. 			//$("#newimg").attr("src",baseUrl+baseImageFile); 

  19. 			

  20. 			//缩放

  21. 			$("#findtemplate").click(function(){

  22. 				var method = $("input[name='method']:checked").val();

  23. 				var imageType = $("input[name='imageType']:checked").val();

  24. 				var imagefile = baseImageFile;

  25. 	 	        var x1= $("#x1").val();

  26. 	 	        var y1 = $("#y1").val();

  27. 		        var x2 = $("#x2").val();

  28. 		        var y2= $("#y2").val();

  29. 		        var width = $("#width").val();

  30. 		        var height = $("#height").val(); 

  31. 				var srcurl = ctxPath+"/base/findtemplate?_" + $.now()+"&method="+method+"&imageType="+imageType+"&imagefile="+baseImageFile

  32. 						+"&x1="+x1+"&y1="+y1+"&x2="+x2+"&y2="+y2+"&width="+width+"&height="+height;

  33. 				$("#newimg").attr("src",srcurl);

  34. 			});

  35. 			

  36. 			//重置

  37. 			$("#reset").click(function(){

  38. 				var baseImageFile = "/statics/sourceimage/lena.png";

  39. 				$("#oldimg").attr("src",baseUrl+baseImageFile);

  40. 				$("#newimg").attr("src",'');

  41. 				layer.msg('重置成功!', {icon: 1});

  42. 			});

  43. 			

  44.  			

  45. 			//iCheck样式加载

  46. 		  	$("input[name='imageType']").iCheck({

  47. 			    checkboxClass: 'icheckbox_flat',

  48. 			    radioClass: 'iradio_flat'

  49. 			 });

  50. 		  	

  51. 			//type类型更换时自动生成

  52. 		  	$("input[name='imageType']").on('ifChecked', function(event){

  53. 		  		$("#findtemplate").click();

  54. 		  	 	 //alert($(event).text());

  55. 		  	});

  56. 			

  57. 			//iCheck样式加载

  58. 		  	$("input[name='method']").iCheck({

  59. 			    checkboxClass: 'icheckbox_flat',

  60. 			    radioClass: 'iradio_flat'

  61. 			 });

  62. 		  	

  63. 			//type类型更换时自动生成

  64. 		  	$("input[name='method']").on('ifChecked', function(event){

  65. 		  		$("#findtemplate").click();

  66. 		  	 	 //alert($(event).text());

  67. 		  	});

  68.  			

  69. 		  	//begin jcrop

  70. 		    var jcrop_api,

  71. 	        boundx,

  72. 	        boundy,

  73. 

  74. 	        // Grab some information about the preview pane

  75. 	        $preview = $("#preview-pane"),

  76. 	        $pcnt = $("#preview-pane .preview-container"),

  77. 	        $pimg = $("#preview-pane .preview-container img"),

  78. 

  79. 	        xsize = $pcnt.width(),

  80. 	        ysize = $pcnt.height();

  81. 	    

  82. 		    console.log("init",[xsize,ysize]);

  83. 		    $("#oldimg").Jcrop({

  84. 		      maxSize:[100,100],

  85. 		      onChange: updatePreview,

  86. 		      onSelect: updatePreview,

  87. 		      aspectRatio: xsize / ysize

  88. 		    },function(){

  89. 		      // Use the API to get the real image size

  90. 		      var bounds = this.getBounds();

  91. 		      boundx = bounds[0];

  92. 		      boundy = bounds[1];

  93. 		      // Store the API in the jcrop_api variable

  94. 		      jcrop_api = this;

  95. 	

  96. 		      // Move the preview into the jcrop container for css positioning

  97. 		      $preview.appendTo(jcrop_api.ui.holder);

  98. 		    });

  99. 	

  100. 		    function updatePreview(c){

  101. 		    	console.log(c.x+"_"+c.y+"_"+c.x2+"_"+c.y2+"_"+c.w+"_"+c.h);

  102. 			      if (parseInt(c.w) > 0){

  103. 		 	        $('#x1').val(c.x);

  104. 			        $('#y1').val(c.y);

  105. 			        $('#x2').val(c.x2);

  106. 			        $('#y2').val(c.y2);

  107. 			        $('#width').val(c.w);

  108. 			        $('#height').val(c.h); 

  109. 			      /*   var rx = xsize / c.w;

  110. 			        var ry = ysize / c.h; */

  111. 			        //此处不是放大镜效果，只是想截取1：1的比例图片

  112. 			          var rx = 1;

  113. 			        var ry = 1;

  114. 			        console.log(Math.round(rx * c.w)+"_"+Math.round(ry * c.h)+"_"+Math.round(rx * c.x)+"_"+Math.round(ry * c.y));

  115. 			        $preview.css({//控制截图样式，让其紧贴原图

  116. 			        	right :-20 -c.w+"px"

  117. 			        });

  118. 			        $pcnt.css({//控制图片宽高，让其在小于截图区域时缩小

  119. 			        	 width:c.w+"px",

  120. 			       		 height:c.h+"px",

  121. 			        })

  122. 			        $pimg.css({

  123. 			          width: Math.round(rx * boundx) + "px",

  124. 			          height: Math.round(ry * boundy) + "px",

  125. 			          marginLeft: "-" + Math.round(rx * c.x) + "px",

  126. 			          marginTop: "-" + Math.round(ry * c.y) + "px"

  127. 			        });

  128. 			      }

  129. 		    };

  130. 	    	//end jcrop

  131. 		});

  132. 		

  133. 		

  134. 		

  135. 	</script>

  136. 	<style type="text/css">

  137. 

  138. /* Apply these styles only when #preview-pane has

  139.    been placed within the Jcrop widget */

  140. .jcrop-holder #preview-pane {

  141.   display: block;

  142.   position: absolute;

  143.   z-index: 2000;

  144.   top: 0px;

  145.   right: -120px;

  146.   padding: 6px;

  147.   border: 1px rgba(0,0,0,.4) solid;

  148.   background-color: white;

  149. 

  150.   -webkit-border-radius: 6px;

  151.   -moz-border-radius: 6px;

  152.   border-radius: 6px;

  153. 

  154.   -webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);

  155.   -moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);

  156.   box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);

  157. }

  158. 

  159. /* The Javascript code will set the aspect ratio of the crop

  160.    area based on the size of the thumbnail preview,

  161.    specified here */

  162. #preview-pane .preview-container {

  163. /*   width: 250px;

  164.   height: 170px; */

  165.   width: 100px;

  166.   height: 100px; 

  167.   overflow: hidden;

  168. }

  169. 

  170. </style>

  171. </head>

  172. <body>

  173. 

  174.               <div class="box-group" id="accordion">

  175.                 <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->

  176.                 <div class="panel box box-primary">

  177.                   <div class="box-header with-border">

  178.                     <h4 class="box-title">

  179.                       <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">

  180.                         模板匹配方法说明

  181.                       </a>

  182.                     </h4>

  183.                   </div>

  184.                   <div id="collapseOne" class="panel-collapse collapse"><!--class="panel-collapse collapse in"中的 in 控制展开 -->

  185.                     <div class="box-body">

  186.                     <h4>

  187.                     参考资料:<br>

  188.                     <a href="http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/imgproc/histograms/template_matching/template_matching.html#template-matching">http://www.opencv.org.cn/opencvdoc/2.3.2/html/doc/tutorials/imgproc/histograms/template_matching/template_matching.html#template-matching</a><br>

  189.                     <a href="https://docs.opencv.org/2.4.13.6/modules/imgproc/doc/object_detection.html#matchtemplate">https://docs.opencv.org/2.4.13.6/modules/imgproc/doc/object_detection.html#matchtemplate</a><br>

  190.                       		public static void matchTemplate(Mat image, Mat templ, Mat result, int method); 各参数说明：</h4>

  191.                       		<table class="table table-bordered">

  192. 				                <tbody><tr>

  193. 				                  <th style="width: 10px">#</th>

  194. 				                  <th style="width: 20%">参数</th>

  195. 				                  <th>说明</th>

  196. 				                </tr>

  197. 				                <tr>

  198. 				                  <td>1.</td>

  199. 				                  <td>Mat src</td>

  200. 				                  <td>源文件Mat对象8bit或32bit float单通道，彩色也可以</td>

  201. 				                </tr>

  202. 				                <tr>

  203. 				                  <td>2.</td>

  204. 				                  <td>Mat templ</td>

  205. 				                  <td>寻找的区域，不能超过源图像大小</td>

  206. 				                </tr>

  207. 				                <tr>

  208. 				                  <td>3.</td>

  209. 				                  <td> Mat result</td>

  210. 				                  <td>查找的结果，必须是单通道32bit float，且尺寸规定为：(image.width-templ.width+1)*(image.height-templ.height+1)</td>

  211. 				                </tr>

  212. 				                <tr>

  213. 				                  <td>4.</td>

  214. 				                  <td>int method</td>

  215. 				                  <td>平方差匹配：Imgproc.TM_SQDIFF=0;标准平方差匹配：Imgproc.TM_SQDIFF_NORMED=1；相关性匹配：Imgproc.TM_CCORR=2；

  216. 				                  标准相关匹配：Imgproc.TM_CCORR_NORMED=3；相关性系数匹配：Imgproc.TM_CCOEFF=4；标准相关性系数匹配：Imgproc.TM_CCOEFF_NORMED=5</td>

  217. 				                </tr>

  218. 				              </tbody></table>

  219.               

  220.               

  221.                       </div>

  222.                   </div>

  223.                 </div>

  224.                 

  225.                 

  226.                 <div class="panel box box-success">

  227.                   <div class="box-header with-border">

  228.                     <h4 class="box-title">

  229.                       <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">

  230.                         模板匹配算法说明

  231.                       </a>

  232.                     </h4>

  233.                   </div>

  234.                   <div id="collapseTwo" class="panel-collapse collapse">

  235.                     <div class="box-body">

  236.                     <h4>模板匹配方法是利用原图与模板图之间重叠的部分进行对比，来得出最近似的结果集。具体的匹配算法如下Method参数所示。Imgproc.TM_SQDIFF=0;标准平方差匹配：Imgproc.TM_SQDIFF_NORMED=1；相关性匹配：Imgproc.TM_CCORR=2；

  237. 				                  标准相关匹配：Imgproc.TM_CCORR_NORMED=3；相关性系数匹配：Imgproc.TM_CCOEFF=4；标准相关性系数匹配：Imgproc.TM_CCOEFF_NORMED=5<br>

  238. 				                  当完成对比后，最佳匹配结果将通过 minMaxLoc()函数获取，当TM_SQDIFF时最佳匹配结果取函数获取到的最小值minimums；当为CV_TM_CCORR 或 CV_TM_CCOEFF时，最佳匹配结果取函数获取到的最大值maximums

  239. 				                  当为彩色图像时，分子和分母中的每一个总和都是在所有通道上完成的，每个通道使用单独的平均值。也就是说虽然函数可以接受彩色模板和彩色图像。但结果仍然是一个单通道图像，因为这样更容易分析</h4>

  240. 							 <table class="table table-bordered">

  241. 				                <tbody><tr>

  242. 				                  <th style="width: 10px">#</th>

  243. 				                  <th style="width: 10%">匹配算法</th>

  244. 				                  <th>公式</th>

  245. 				                  <th>解释说明</th>

  246. 				                </tr>

  247. 				                <tr>

  248. 				                  <td>0.</td>

  249. 				                  <td>TM_SQDIFF</td>

  250. 				                  <td><img alt="" src ="${ctxStatic}/images/TM_SQDIFF.png"></td>

  251. 				                  <td>该方法使用平方差进行匹配，因此最佳的匹配结果在结果为0处，值越大匹配结果越差。图中最黑的部分表示最好的匹配</td>

  252. 				                </tr>

  253. 				                <tr>

  254. 				                  <td>1.</td>

  255. 				                  <td>TM_SQDIFF_NORMED</td>

  256. 				                  <td><img alt="" src ="${ctxStatic}/images/TM_SQDIFF_NORMED.png"></td>

  257. 				                  <td>该方法使用归一化的平方差进行匹配，最佳匹配也在结果为0处.图中最黑的部分表示最好的匹配</td>

  258. 				                </tr>

  259. 				                <tr>

  260. 				                  <td>2.</td>

  261. 				                  <td>TM_CCORR</td>

  262. 				                  <td><img alt="" src ="${ctxStatic}/images/TM_CCORR.png"></td>

  263. 				                  <td>该方法使用源图像与模板图像的卷积结果进行匹配，因此，最佳匹配位置在值最大处，值越小匹配结果越差。图中最白的部分表示最好的匹配</td>

  264. 				                </tr>

  265. 				                <tr>

  266. 				                  <td>3.</td>

  267. 				                  <td>TM_CCORR_NORMED</td>

  268. 				                  <td><img alt="" src ="${ctxStatic}/images/TM_CCORR_NORMED.png"></td>

  269. 				                  <td>归一化的相关性匹配方法，与相关性匹配方法类似，最佳匹配位置也是在值最大处。图中最白的部分表示最好的匹配</td>

  270. 				                </tr>

  271. 				                <tr>

  272. 				                  <td>4.</td>

  273. 				                  <td>TM_CCOEFF</td>

  274. 				                  <td><img alt="" src ="${ctxStatic}/images/TM_CCOEFF_1.png"><img alt="" src ="${ctxStatic}/images/TM_CCOEFF_2.png"></td>

  275. 				                  <td>相关性系数匹配方法，该方法使用源图像与其均值的差、模板与其均值的差二者之间的相关性进行匹配，最佳匹配结果在值等于1处，最差匹配结果在值等于-1处，值等于0直接表示二者不相关。图中最白的部分表示最好的匹配</td>

  276. 				                </tr>

  277. 				                <tr>

  278. 				                  <td>5.</td>

  279. 				                  <td>TM_CCOEFF_NORMED</td>

  280. 				                  <td><img alt="" src ="${ctxStatic}/images/TM_CCOEFF_NORMED.png"></td>

  281. 				                  <td>归一化的相关性系数匹配方法，正值表示匹配的结果较好，负值则表示匹配的效果较差，也是值越大，匹配效果越好。图中最白的部分表示最好的匹配</td>

  282. 				                </tr>

  283. 				              </tbody>

  284. 				             </table>

  285.                     </div>

  286.                   </div>

  287.                 </div>   

  288.                 

  289.                 

  290.                 

  291.             </div>

  292.             <!-- /.box-body -->

  293.             

  294.             <h4>&nbsp;&nbsp;模板匹配测试</h4>	

  295.     			 <div class="box-body">

  296.     			<table class="table table-bordered">

  297.                 <tbody><tr>

  298.                   <th style="width:50%">匹配算法</th>

  299.                   <th style="width:20%">显示过程|结果</th>

  300.                   <th style="">操作</th>

  301.                 </tr>

  302.                 <tr>

  303.                   <td>

  304.                    		<input type="radio" name="method" value="0" checked="checked"/>&nbsp;TM_SQDIFF=0 &nbsp;<br> 

  305.                   		<input type="radio" name="method" value="1"/>&nbsp;TM_SQDIFF_NORMED=1 &nbsp;<br>

  306.                   		<input type="radio" name="method" value="2"/>&nbsp;TM_CCORR=2&nbsp;<br>

  307.                   		<input type="radio" name="method" value="3"/>&nbsp;TM_CCORR_NORMED=3&nbsp;<br>

  308.                   		<input type="radio" name="method" value="4"/>&nbsp;TM_CCOEFF=4&nbsp;<br>

  309.                   		<input type="radio" name="method" value="5"/>&nbsp;TM_CCOEFF_NORMED=5&nbsp;

  310.                   </td>

  311.                   <td>

  312.                    		<input type="radio" name="imageType" value="0" checked="checked"/>&nbsp;显示匹配过程 &nbsp;<br> 

  313.                   		<input type="radio" name="imageType" value="1"/>&nbsp;显示匹配结果 &nbsp;<br>

  314.                   </td>

  315.                   <td>

  316.                   	   <a class="btn btn-info" id="findtemplate"><i class="fa fa-object-ungroup"></i>模板匹配</a>

  317. 			          <a class="btn btn-info" id="reset"><i class="fa fa-refresh"></i>重置</a>

  318. 			       </td>

  319.                 </tr>

  320.               </tbody></table></div>

  321.     			

  322.     			

  323. 	

  324. 			   

  325. 			<div class="row">

  326. 			    <div class="col-sm-6">

  327. 			      <div class="box box-primary">

  328. 			        <div class="box-header with-border">

  329. 			          <h3 class="box-title">原图</h3>

  330. 			          <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>

  331. 			        </div><!-- /.box-header -->

  332. 			        <div class="box-body">

  333. 			          <p>未识别前的原文件。</p>

  334. 					      <img id="oldimg" src=""  alt="原图" />

  335. 		          		  <div id="preview-pane">

  336. 							    <div class="preview-container">

  337. 		          						<img id="match" src="" class="jcrop-preview" alt="匹配的模板图片" />

  338. 							    </div>

  339. 						   </div>

  340. 						   

  341. 			        </div><!-- /.box-body -->

  342. 			       <div class="inline-labels">

  343. 				    <label>X1 <input type="text" size="4" id="x1" name="x1" value="0"/></label>

  344. 				    <label>Y1 <input type="text" size="4" id="y1" name="y1" value="0"/></label>

  345. 				    <label>X2 <input type="text" size="4" id="x2" name="x2" value="100"/></label>

  346. 				    <label>Y2 <input type="text" size="4" id="y2" name="y2" value="62"/></label>

  347. 				    <label>W <input type="text" size="4" id="width" name="width" value="100"/></label>

  348. 				    <label>H <input type="text" size="4" id="height" name="height" value="62"/></label>

  349. 				    </div>

  350. 			      </div><!-- /.box -->

  351. 			    </div><!-- /.col -->

  352. 			    <div class="col-sm-6">

  353. 			      <div class="box box-danger">

  354. 			        <div class="box-header with-border">

  355. 			          <h3 class="box-title">识别后的图片</h3>

  356. 			          <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>

  357. 			        </div><!-- /.box-header -->

  358. 			        <div class="box-body">

  359. 			          <p>点击识别按钮后，将显示识别后的文件。</p>

  360. 			          <img  id="newimg" src=""  alt="识别后的图" />

  361. 

  362. 			        </div><!-- /.box-body -->

  363. 			      </div><!-- /.box -->

  364. 			    </div><!-- /.col -->

  365. 			  </div>

  366. 						

  367. 			

  368. </body>

  369. <script src="${ctxStatic}/plugins/bootstrap-slider/bootstrap-slider.js?t=${version}"></script>

  370. <script src="${ctxStatic}/plugins/iCheck/icheck.js?t=${version}"></script>

  371. <script src="${ctxStatic}/plugins/jcrop/Jcrop-0.9.12/js/jquery.Jcrop.min.js?t=${version}"></script>

  372. </html>