新增漫水填充

src/main/java/com/acts/opencv/base/BaseMethodController.java

@@ -348,6 +348,43 @@ public class BaseMethodController extends BaseController {
 		}
 	}
 
+	/**
+	 * 漫水填充
+	 * @Author 王嵩
+	 * @param response
+	 * @param imagefile
+	 * @param ksize
+	 * @param alpha
+	 * @param beta
+	 * @param gamma void
+	 * @Date 2018年5月24日
+	 * 更新日志
+	 * 2018年5月24日 王嵩  首次创建
+	 *
+	 */
+	@RequestMapping(value = "floodfill")
+	public void floodfill(HttpServletResponse response, String imagefile, double graysize, double lodiff,
+			double updiff, int flag) {
+		System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
+		logger.info("\n 锐化操作");
+
+		String sourcePath = Constants.PATH + imagefile;
+		logger.info("url==============" + sourcePath);
+		Mat source = Highgui.imread(sourcePath, Highgui.CV_LOAD_IMAGE_GRAYSCALE);
+		// Mat mask = new Mat(source.rows() + 2, source.cols() + 2, source.type());
+		Mat mask = new Mat();
+		Rect rect = new Rect();
+		Imgproc.floodFill(source, mask, new Point(0, 0), new Scalar(graysize), rect, new Scalar(lodiff), new Scalar(
+				updiff), flag);
+
+		try {
+			byte[] imgebyte = OpenCVUtil.covertMat2Byte1(source);
+			renderImage(response, imgebyte);
+		} catch (IOException e) {
+			e.printStackTrace();
+		}
+	}
+
 	/**
 	 * 图片缩放方法测试
 	 * 创建者 Songer
@@ -733,7 +770,7 @@ public class BaseMethodController extends BaseController {
 			logger.info("轮廓数量已经超出，默认显示所有轮廓，轮廓数量：{}", contours.size());
 			contourNum = -1;
 		}
-		Imgproc.drawContours(destination, contours, contourNum, new Scalar(0, 255, 0), 2);
+		Imgproc.drawContours(destination, contours, contourNum, new Scalar(0, 255, 0), 1);
 		try {
 			byte[] imgebyte = OpenCVUtil.covertMat2Byte1(destination);
 			renderImage(response, imgebyte);
@@ -894,4 +931,121 @@ public class BaseMethodController extends BaseController {
 		}
 
 	}
+
+	// public void qrCode(HttpServletResponse response, String imagefile, Integer binaryType, Double thresh, Double maxval) {
+	// System.loadLibrary(Core.NATIVE_LIBRARY_NAME);
+	// String sourcePath = Constants.PATH + imagefile;
+	// // 加载为灰度图显示
+	// Mat imageGray = Highgui.imread(sourcePath, Highgui.CV_LOAD_IMAGE_GRAYSCALE);
+	// Mat image = new Mat(imageGray.rows(), imageGray.cols(), imageGray.type());
+	// Mat imageGuussian = new Mat(imageGray.rows(), imageGray.cols(), imageGray.type());
+	// Mat imageSobelX,imageSobelY,imageSobelOut;
+	// imageGray.copyTo(image);
+	//
+	// // imshow("Source Image",image);
+	//
+	// GaussianBlur(imageGray,imageGuussian,Size(3,3),0);
+	// Imgproc.GaussianBlur(imageGray, imageGuussian,new Size(5, 5),
+	// Integer.valueOf(sigmaX), Integer.valueOf(sigmaY));
+	//
+	// //水平和垂直方向灰度图像的梯度和,使用Sobel算子
+	// Mat imageX16S,imageY16S;
+	// Sobel(imageGuussian,imageX16S,CV_16S,1,0,3,1,0,4);
+	// Sobel(imageGuussian,imageY16S,CV_16S,0,1,3,1,0,4);
+	// convertScaleAbs(imageX16S,imageSobelX,1,0);
+	// convertScaleAbs(imageY16S,imageSobelY,1,0);
+	// imageSobelOut=imageSobelX+imageSobelY;
+	// imshow("XY方向梯度和",imageSobelOut);
+	// Mat srcImg =imageSobelOut;
+	// //宽高扩充，非必须，特定的宽高可以提高傅里叶运算效率
+	// Mat padded;
+	// int opWidth = getOptimalDFTSize(srcImg.rows);
+	// int opHeight = getOptimalDFTSize(srcImg.cols);
+	// copyMakeBorder(srcImg, padded, 0, opWidth-srcImg.rows, 0, opHeight-srcImg.cols, BORDER_CONSTANT, Scalar::all(0));
+	// Mat planes[] = {Mat_<float>(padded), Mat::zeros(padded.size(), CV_32F)};
+	// Mat comImg;
+	// //通道融合，融合成一个2通道的图像
+	// merge(planes,2,comImg);
+	// dft(comImg, comImg);
+	// split(comImg, planes);
+	// magnitude(planes[0], planes[1], planes[0]);
+	// Mat magMat = planes[0];
+	// magMat += Scalar::all(1);
+	// log(magMat, magMat); //对数变换，方便显示
+	// magMat = magMat(Rect(0, 0, magMat.cols & -2, magMat.rows & -2));
+	// //以下把傅里叶频谱图的四个角落移动到图像中心
+	// int cx = magMat.cols/2;
+	// int cy = magMat.rows/2;
+	// Mat q0(magMat, Rect(0, 0, cx, cy));
+	// Mat q1(magMat, Rect(0, cy, cx, cy));
+	// Mat q2(magMat, Rect(cx, cy, cx, cy));
+	// Mat q3(magMat, Rect(cx, 0, cx, cy));
+	// Mat tmp;
+	// q0.copyTo(tmp);
+	// q2.copyTo(q0);
+	// tmp.copyTo(q2);
+	// q1.copyTo(tmp);
+	// q3.copyTo(q1);
+	// tmp.copyTo(q3);
+	// normalize(magMat, magMat, 0, 1, CV_MINMAX);
+	// Mat magImg(magMat.size(), CV_8UC1);
+	// magMat.convertTo(magImg,CV_8UC1,255,0);
+	// imshow("傅里叶频谱", magImg);
+	// //HoughLines查找傅里叶频谱的直线，该直线跟原图的一维码方向相互垂直
+	// threshold(magImg,magImg,180,255,CV_THRESH_BINARY);
+	// imshow("二值化", magImg);
+	// vector<Vec2f> lines;
+	// float pi180 = (float)CV_PI/180;
+	// Mat linImg(magImg.size(),CV_8UC3);
+	// HoughLines(magImg,lines,1,pi180,100,0,0);
+	// int numLines = lines.size();
+	// float theta;
+	// for(int l=0; l<numLines; l++)
+	// {
+	// float rho = lines[l][0];
+	// theta = lines[l][1];
+	// float aa=(theta/CV_PI)*180;
+	// Point pt1, pt2;
+	// double a = cos(theta), b = sin(theta);
+	// double x0 = a*rho, y0 = b*rho;
+	// pt1.x = cvRound(x0 + 1000*(-b));
+	// pt1.y = cvRound(y0 + 1000*(a));
+	// pt2.x = cvRound(x0 - 1000*(-b));
+	// pt2.y = cvRound(y0 - 1000*(a));
+	// line(linImg,pt1,pt2,Scalar(255,0,0),3,8,0);
+	// }
+	// imshow("Hough直线",linImg);
+	// //校正角度计算
+	// float angelD=180*theta/CV_PI-90;
+	// Point center(image.cols/2, image.rows/2);
+	// Mat rotMat = getRotationMatrix2D(center,angelD,1.0);
+	// Mat imageSource = Mat::ones(image.size(),CV_8UC3);
+	// warpAffine(image,imageSource,rotMat,image.size(),1,0,Scalar(255,255,255));//仿射变换校正图像
+	// imshow("角度校正",imageSource);
+	// //Zbar一维码识别
+	// ImageScanner scanner;
+	// scanner.set_config(ZBAR_NONE, ZBAR_CFG_ENABLE, 1);
+	// int width1 = imageSource.cols;
+	// int height1 = imageSource.rows;
+	// uchar *raw = (uchar *)imageSource.data;
+	// Image imageZbar(width1, height1, "Y800", raw, width1 * height1);
+	// scanner.scan(imageZbar); //扫描条码
+	// Image::SymbolIterator symbol = imageZbar.symbol_begin();
+	// if(imageZbar.symbol_begin()==imageZbar.symbol_end())
+	// {
+	// cout<<"查询条码失败，请检查图片！"<<endl;
+	// }
+	// for(;symbol != imageZbar.symbol_end();++symbol)
+	// {
+	// cout<<"类型："<<endl<<symbol->get_type_name()<<endl<<endl;
+	// cout<<"条码："<<endl<<symbol->get_data()<<endl<<endl;
+	// }
+	// namedWindow("Source Window",0);
+	// imshow("Source Window",imageSource);
+	// waitKey();
+	// imageZbar.set_data(NULL,0);
+	// return 0;
+	//
+	// }
+
 }

src/main/java/com/acts/opencv/base/CardPlusController.java

@@ -33,6 +33,7 @@ import com.acts.opencv.common.web.BaseController;
 import com.acts.opencv.demo.DemoController;
 
 
+
 @Controller
 @RequestMapping(value = "cardPlus")
 public class CardPlusController extends BaseController {
@@ -231,7 +232,7 @@ public class CardPlusController extends BaseController {
 	 *
 	 */
 	public Mat getGrayHistogram(Mat img) {
-		java.util.List<Mat> images = new ArrayList<>();
+		List<Mat> images = new ArrayList<Mat>();
 		images.add(img);
 		MatOfInt channels = new MatOfInt(0); // 图像通道数，0表示只有一个通道
 		MatOfInt histSize = new MatOfInt(256); // CV_8U类型的图片范围是0~255，共有256个灰度级

src/main/java/com/acts/opencv/common/mapper/BeanMapper.java

@@ -12,6 +12,7 @@ import com.google.common.collect.Lists;
  * 2. 返回值类型转换.
  * 3. 批量转换Collection中的所有对象.
  * 4. 区分创建新的B对象与将对象A值复制到已存在的B对象两种函数.
+ * 创建者 张志朋
  * 创建时间	2017年9月28日
  */
 public class BeanMapper {

src/main/java/com/acts/opencv/common/mapper/JaxbMapper.java

@@ -25,6 +25,7 @@ import com.acts.opencv.common.utils.Reflections;
  * 使用Jaxb2.0实现XML<->Java Object的Mapper.
  * 在创建时需要设定所有需要序列化的Root对象的Class.
  * 特别支持Root对象是Collection的情形.
+ * 创建者 张志朋
  * 创建时间	2017年9月28日
  *
  */

src/main/java/com/acts/opencv/common/mapper/JsonMapper.java

@@ -15,8 +15,8 @@ import org.slf4j.LoggerFactory;
 
 import com.fasterxml.jackson.annotation.JsonInclude.Include;
 import com.fasterxml.jackson.core.JsonGenerator;
-import com.fasterxml.jackson.core.JsonParser.Feature;
 import com.fasterxml.jackson.core.JsonProcessingException;
+import com.fasterxml.jackson.core.JsonParser.Feature;
 import com.fasterxml.jackson.databind.DeserializationFeature;
 import com.fasterxml.jackson.databind.JavaType;
 import com.fasterxml.jackson.databind.JsonSerializer;
@@ -29,6 +29,7 @@ import com.fasterxml.jackson.module.jaxb.JaxbAnnotationModule;
 /**
  * 简单封装Jackson，实现JSON String<->Java Object的Mapper. 封装不同的输出风格,
  * 使用不同的builder函数创建实例.
+ * 创建者 张志朋
  * 创建时间	2017年9月28日
  *
  */

src/main/java/com/acts/opencv/common/mapper/adapters/MapAdapter.java

@@ -1,3 +1,6 @@
+/**
+ * Copyright © 2016-2020 公众学业 All rights reserved.
+ */
 package com.acts.opencv.common.mapper.adapters;
 
 import java.util.HashMap;

src/main/java/com/acts/opencv/common/mapper/adapters/MapConvertor.java

@@ -1,3 +1,6 @@
+/**
+ * Copyright © 2016-2020 公众学业 All rights reserved.
+ */
 package com.acts.opencv.common.mapper.adapters;
 
 import java.util.ArrayList;
@@ -12,7 +15,7 @@ import javax.xml.bind.annotation.XmlType;
 @XmlAccessorType(XmlAccessType.FIELD)  
 public class MapConvertor {
 	
-    private final List<MapEntry> entries = new ArrayList<MapEntry>();  
+    private List<MapEntry> entries = new ArrayList<MapEntry>();  
   
     public void addEntry(MapEntry entry) {  
         entries.add(entry);  

src/main/java/com/acts/opencv/common/utils/Reflections.java

@@ -11,23 +11,22 @@ import org.apache.commons.lang3.Validate;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 import org.springframework.util.Assert;
-
 /**
  * 反射工具类.
  * 提供调用getter/setter方法, 访问私有变量, 调用私有方法, 获取泛型类型Class, 被AOP过的真实类等工具函数.
- * 创建者	Songer
+ * 创建者	张志朋
  * 创建时间	2016年8月1日
  *
  */
 @SuppressWarnings("rawtypes")
 public class Reflections {
-
+	
 	private static final String SETTER_PREFIX = "set";
 
 	private static final String GETTER_PREFIX = "get";
 
 	private static final String CGLIB_CLASS_SEPARATOR = "$$";
-
+	
 	private static Logger logger = LoggerFactory.getLogger(Reflections.class);
 
 	/**
@@ -136,7 +135,7 @@ public class Reflections {
 
 	/**
 	 * 循环向上转型, 获取对象的DeclaredField, 并强制设置为可访问.
-	 *
+	 * 
 	 * 如向上转型到Object仍无法找到, 返回null.
 	 */
 	public static Field getAccessibleField(final Object obj, final String fieldName) {
@@ -159,7 +158,7 @@ public class Reflections {
 	 * 循环向上转型, 获取对象的DeclaredMethod,并强制设置为可访问.
 	 * 如向上转型到Object仍无法找到, 返回null.
 	 * 匹配函数名+参数类型。
-	 *
+	 * 
 	 * 用于方法需要被多次调用的情况. 先使用本函数先取得Method,然后调用Method.invoke(Object obj, Object... args)
 	 */
 	public static Method getAccessibleMethod(final Object obj, final String methodName,
@@ -184,7 +183,7 @@ public class Reflections {
 	 * 循环向上转型, 获取对象的DeclaredMethod,并强制设置为可访问.
 	 * 如向上转型到Object仍无法找到, 返回null.
 	 * 只匹配函数名。
-	 *
+	 * 
 	 * 用于方法需要被多次调用的情况. 先使用本函数先取得Method,然后调用Method.invoke(Object obj, Object... args)
 	 */
 	public static Method getAccessibleMethodByName(final Object obj, final String methodName) {
@@ -240,7 +239,7 @@ public class Reflections {
 	/**
 	 * 通过反射, 获得Class定义中声明的父类的泛型参数的类型.
 	 * 如无法找到, 返回Object.class.
-	 *
+	 * 
 	 * 如public UserDao extends HibernateDao<User,Long>
 	 *
 	 * @param clazz clazz The class to introspect
@@ -270,7 +269,7 @@ public class Reflections {
 
 		return (Class) params[index];
 	}
-
+	
 	public static Class<?> getUserClass(Object instance) {
 		Assert.notNull(instance, "Instance must not be null");
 		Class clazz = instance.getClass();
@@ -283,7 +282,7 @@ public class Reflections {
 		return clazz;
 
 	}
-
+	
 	/**
 	 * 将反射时的checked exception转换为unchecked exception.
 	 */

src/main/webapp/index.jsp

@@ -130,6 +130,7 @@ desired effect
 			            <li><a href="#view/base/zxing.jsp"><i class="fa fa-circle-o"></i>zxing识别二维码</a></li>
 			            <li><a href="#view/base/gaussian.jsp"><i class="fa fa-circle-o"></i> 模糊</a></li>
 			            <li><a href="#view/base/sharpness.jsp"><i class="fa fa-circle-o"></i> 图像锐化</a></li>
+			            <li><a href="#view/base/floodfill.jsp"><i class="fa fa-circle-o"></i> 漫水填充</a></li>
 			            <li><a href="#view/base/resize.jsp"><i class="fa fa-circle-o"></i> 缩放</a></li>
 			            <li><a href="#view/base/erosion_dilation.jsp"><i class="fa fa-circle-o"></i>腐蚀膨胀</a></li>
 			            <li><a href="#view/base/morphologyEx.jsp"><i class="fa fa-circle-o"></i>腐蚀膨胀进阶</a></li>
@@ -156,7 +157,7 @@ desired effect
 			            <li><a href="#view/card/pagecheck.jsp"><i class="fa fa-circle-o"></i>页码识别</a></li>
 			           <!--  <li><a href="#view/card/marktest.jsp"><i class="fa fa-circle-o"></i>定位点优化</a></li> -->
 			            <li><a href="#view/card/rectification.jsp"><i class="fa fa-circle-o"></i>图像矫正</a></li>
-			            <!--<li><a href="#view/card/realTest.jsp"><i class="fa fa-circle-o"></i>校正真实测试</a></li> -->
+			            <li><a href="#view/card/realTest.jsp"><i class="fa fa-circle-o"></i>校正真实测试</a></li>
 			          </ul>
 			        </li>
 					

src/main/webapp/view/base/findtemplate.jsp

@@ -81,7 +81,7 @@
 	    
 		    console.log("init",[xsize,ysize]);
 		    $("#oldimg").Jcrop({
-		      maxSize:[100,62],
+		      maxSize:[100,100],
 		      onChange: updatePreview,
 		      onSelect: updatePreview,
 		      aspectRatio: xsize / ysize
@@ -163,7 +163,7 @@
 /*   width: 250px;
   height: 170px; */
   width: 100px;
-  height: 62px; 
+  height: 100px; 
   overflow: hidden;
 }
 

src/main/webapp/view/base/floodfill.jsp

@@ -0,0 +1,227 @@
+<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
+<%@include file="/module/include/common.jsp"%>
+<!DOCTYPE html>
+<html>
+<head>
+    <sys:header title="首页" extLibs=""></sys:header>
+	<link rel="stylesheet" href="${ctxStatic}/plugins/bootstrap-slider/slider.css">
+    <script type="text/javascript">
+		$(function(){
+			var baseImageFile = "/statics/sourceimage/floodfill3.png"
+			var newImagePath = "/statics/distimage/floodfill.png"
+			$("#oldimg").attr("src",baseUrl+baseImageFile);
+			//$("#newimg").attr("src",baseUrl+baseImageFile); 
+			
+			//锐化
+			$("#floodfill").click(function(){
+				var graysize = $("#graysize").val();
+				var lodiff = $("#lodiff").val();
+				var updiff = $("#updiff").val();
+				var flag = $("#flag").val();
+				//alert(graysize+"|"+lodiff+"|"+updiff+"|"+flag);
+				var imagefile = baseImageFile;
+				var srcurl = ctxPath+"/base/floodfill?_" + $.now()+"&graysize="+graysize+"&lodiff="+lodiff+"&updiff="+updiff+"&flag="+flag+"&imagefile="+baseImageFile;
+				$("#newimg").attr("src",srcurl);
+			});
+			
+			//重置
+			$("#reset").click(function(){
+				var baseImageFile = "/statics/sourceimage/floodfill3.png";
+				$("#oldimg").attr("src",baseUrl+baseImageFile);
+				$("#newimg").attr("src",'');
+				layer.msg('重置成功!', {icon: 1});
+			});
+			
+			//滑动插件加载
+			$("#graysize").slider({
+				tooltip: 'always',
+			});
+			$("#lodiff").slider({
+				tooltip: 'always',
+			});
+			$("#updiff").slider({
+				tooltip: 'always',
+			});
+			$("#flag").slider({
+				tooltip: 'always',
+			});
+			
+ 			$("#graysize").on("slide", function(slideEvt) {
+				console.log(slideEvt.value);
+				//$("#binary").click();
+			}).on("change", function (e) {  
+			    //当值发生改变的时候触发  
+			    //console.info(e);  
+			    //获取旧值和新值  
+			    console.info(e.value.oldValue + '--' + e.value.newValue);
+				$("#graysize").val(e.value.newValue);
+			    $("#floodfill").click();
+			});
+ 			
+ 			$("#lodiff").on("slide", function(slideEvt) {
+				console.log(slideEvt.value);
+				//$("#binary").click();
+			}).on("change", function (e) {  
+			    //当值发生改变的时候触发  
+			    //console.info(e);  
+			    //获取旧值和新值  
+			    console.info(e.value.oldValue + '--' + e.value.newValue);
+				$("#lodiff").val(e.value.newValue);
+			    $("#floodfill").click();
+			});
+ 			
+ 			$("#updiff").on("slide", function(slideEvt) {
+				console.log(slideEvt.value);
+				//$("#binary").click();
+			}).on("change", function (e) {  
+			    //当值发生改变的时候触发  
+			    //console.info(e);  
+			    //获取旧值和新值  
+			    console.info(e.value.oldValue + '--' + e.value.newValue);
+				$("#updiff").val(e.value.newValue);
+			    $("#floodfill").click();
+			});
+ 			
+ 			$("#flag").on("slide", function(slideEvt) {
+				console.log(slideEvt.value);
+				//$("#binary").click();
+			}).on("change", function (e) {  
+			    //当值发生改变的时候触发  
+			    //console.info(e);  
+			    //获取旧值和新值  
+			    console.info(e.value.oldValue + '--' + e.value.newValue);
+				$("#flag").val(e.value.newValue);
+			    $("#floodfill").click();
+			});
+		});
+		
+		
+		
+	</script>
+</head>
+<body>
+
+              <div class="box-group" id="accordion">
+                <!-- we are adding the .panel class so bootstrap.js collapse plugin detects it -->
+                <div class="panel box box-primary">
+                  <div class="box-header with-border">
+                    <h4 class="box-title">
+                      <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
+                       addweighted
+                      </a>
+                    </h4>
+                  </div>
+                  <div id="collapseOne" class="panel-collapse collapse"><!--class="panel-collapse collapse in"中的 in 控制展开 -->
+                    <div class="box-body">
+                      		<h4>参考资料：<br>
+                      		<a href="https://docs.opencv.org/2.4.13.6/modules/core/doc/operations_on_arrays.html#addweighted">Opencv官方文档：addweighted</a> <br>
+                      		<br>锐化：dst (I)= saturate ( src1(I)* lodiff +  src2(I)* updiff +  flag )
+                      		 public static void addWeighted(Mat src1, double lodiff, Mat src2, double updiff, double flag, Mat dst); 各参数说明：</h4>
+                      		<table class="table table-bordered">
+				                <tbody><tr>
+				                  <th style="width: 10px">#</th>
+				                  <th style="width: 20%">参数</th>
+				                  <th>说明</th>
+				                </tr>
+				                <tr>
+				                  <td>1.</td>
+				                  <td>Mat src1</td>
+				                  <td>图层1对应的Mat对象</td>
+				                </tr>
+				                <tr>
+				                  <td>2.</td>
+				                  <td>double lodiff</td>
+				                  <td>图层1的透明度权重</td>
+				                </tr>
+				                <tr>
+				                  <td>3.</td>
+				                  <td>Mat src2</td>
+				                  <td>图层2对应的Mat对象</td>
+				                </tr>
+				                <tr>
+				                  <td>4.</td>
+				                  <td>double updiff</td>
+				                  <td>图层2的透明度权重</td>
+				                </tr>
+				                <tr>
+				                  <td>5.</td>
+				                  <td>double flag</td>
+				                  <td>一个加到权重总和上的标量值，越大合并图像越明亮</td>
+				                </tr>
+				                <tr>
+				                  <td>6.</td>
+				                  <td>Mat dst</td>
+				                  <td>目标图像mat</td>
+				                </tr>
+				              </tbody></table>
+              
+              
+                      </div>
+                  </div>
+                </div>
+            </div>
+            <!-- /.box-body -->
+            
+            <h4>&nbsp;&nbsp;漫水填充测试</h4>	
+    			 <div class="box-body">
+    			<table class="table table-bordered">
+                <tbody><tr>
+                  <th style="width:20%">灰度值</th>
+                  <th style="width:20%">lodiff</th>
+                  <th style="width:20%">updiff</th>
+                  <th style="width:20%">flag</th>
+                  <th style="width: 200px">操作</th>
+                </tr>
+                <tr>
+                  <td>
+                  		<input id="graysize" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="255" data-slider-step="1" data-slider-value="40"/>
+				  </td>
+                  <td>
+                  		<input id="lodiff" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="5"/>
+                  </td>
+                  <td>
+                  		<input id="updiff" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="5"/>
+                  </td>
+                  <td>
+                  		<input id="flag" data-slider-id='ex1Slider' type="text" data-slider-min="0" data-slider-max="131072" data-slider-step="1" data-slider-value="131072"/>
+                  </td>
+                  <td><a class="btn btn-info"  id="floodfill"><i class="fa fa-object-ungroup"></i>漫水填充</a>
+			          <a class="btn btn-info" id="reset"><i class="fa fa-refresh"></i>重置</a></td>
+                </tr>
+              </tbody></table></div>
+    			
+    			
+	
+			   
+			<div class="row">
+			    <div class="col-sm-6">
+			      <div class="box box-primary">
+			        <div class="box-header with-border">
+			          <h3 class="box-title">原图</h3>
+			          <span class="label label-primary pull-right"><i class="fa fa-html5"></i></span>
+			        </div><!-- /.box-header -->
+			        <div class="box-body">
+			          <p>未识别前的原文件。</p>
+		          		<img id="oldimg" src=""  alt="原图" />
+			        </div><!-- /.box-body -->
+			      </div><!-- /.box -->
+			    </div><!-- /.col -->
+			    <div class="col-sm-6">
+			      <div class="box box-danger">
+			        <div class="box-header with-border">
+			          <h3 class="box-title">识别后的图片</h3>
+			          <span class="label label-danger pull-right"><i class="fa fa-database"></i></span>
+			        </div><!-- /.box-header -->
+			        <div class="box-body">
+			          <p>点击识别按钮后，将显示识别后的文件。</p>
+			          <img  id="newimg" src=""  alt="识别后的图" />
+
+			        </div><!-- /.box-body -->
+			      </div><!-- /.box -->
+			    </div><!-- /.col -->
+			  </div>
+						
+			
+</body>
+<script src="${ctxStatic}/plugins/bootstrap-slider/bootstrap-slider.js?t=${version}"></script>
+</html>