1.框选功能的实现
<html><head><meta http-equiv="content-type" content="text/html; charset=gbk"><title>拉框</title></head><body><div id='lay1'onmousedown='down(event)'onmouseup='up(event)'onmousemove='move(event)'style='top:30px;left:30px;width:400px;height:400px;visibility:visible;border:solid 1px blue;'> <div id='rect'style='position:absolute;background-color: #FF99FF' > </div> </div><script language="javascript">// 是否需要(允许)处理鼠标的移动事件,默认识不处理var select = false;var rect = document.getElementById("rect");// 设置默认值,目的是隐藏图层rect.style.width = 0;rect.style.height = 0;rect.style.visibility = 'hidden';//让你要画的图层位于最上层rect.style.zIndex = 1000;// 记录鼠标按下时的坐标var downX = 0;var downY = 0;// 记录鼠标抬起时候的坐标var mouseX2=downX;var mouseY2=downY;//处理鼠标按下事件function down(event){// 鼠标按下时才允许处理鼠标的移动事件select = true;//让你要画框的那个图层显示出来//rect.style.visibility = 'visible';// 取得鼠标按下时的坐标位置downX = event.clientX;downY = event.clientY;//设置你要画的矩形框的起点位置rect.style.left = downX;rect.style.top = downY;}//鼠标抬起事件function up(event){//鼠标抬起,就不允许在处理鼠标移动事件select = false;//隐藏图层rect.style.visibility = 'hidden';}//鼠标移动事件,最主要的事件function move(event){// 取得鼠标移动时的坐标位置mouseX2 = event.clientX;mouseY2 = event.clientY;// 设置拉框的大小 rect.style.width = Math.abs( mouseX2 - downX );rect.style.height = Math.abs( mouseY2 - downY ); /*这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.*/if(select){rect.style.visibility = 'visible';// A partif( mouseX2 < downX && mouseY2 < downY ){rect.style.left = mouseX2;rect.style.top = mouseY2 ; }// B partif( mouseX2 > downX && mouseY2 < downY){rect.style.left = downX ;rect.style.top = mouseY2; }// C partif( mouseX2 < downX && mouseY2 > downY){rect.style.left = mouseX2;rect.style.top = downY ; }// D partif( mouseX2 > downX && mouseY2 > downY ){rect.style.left = downX ;rect.style.top = downY;} }/*这两句代码是最重要的时候,没有这两句代码,你的拉框,就只能拉框,在鼠标松开的时候,拉框停止,但是不能相应鼠标的mouseup事件.那么你想做的处理就不能进行.这两句的作用是使当前的鼠标事件不在冒泡,也就是说,不向其父窗口传递,所以才可以相应鼠标抬起事件,这个部分我也理解的不是特别的清楚,如果你需要的话,你可以查资料.但是这两句话确实最核心的部分,为了这两句话,为了实现鼠标拉框,我搞了几天的时间.*/window.event.cancelBubble = true;window.event.returnValue = false; function getDivOffsetLeft(){var lay1 = document.getElementById("lay1");//var rect = document.getElementById("rect");return lay1.offsetLeft;}function getDivOffsetTop(){var lay1 = document.getElementById("lay1");//var rect = document.getElementById("rect");return lay1.offsetTop;}}</script></body></html>
2.鼠标事件
click：单击事件。
dblclick：双击事件。
mousedown：按下鼠标键时触发。
mouseup：释放按下的鼠标键时触发。
mousemove：鼠标移动事件。
mouseover：移入事件。
mouseout：移出事件。
mouseenter：移入事件。
mouseleave：移出事件。
contextmenu：右键事件。
商用标识管理系统中实现图像识别-框选功能实现
<div id="wrr"><div><button id="cancel-ocr" style="background-color: #4686bd ;color: whitesmoke;float: left;overflow:hidden; width: 5%;">取消</button></div><div style=" width:100%; height:97%; max-height:99%;overflow-y: scroll; overflow-x: scroll; max-height:99%;"><div style="display: inline-block;" id ='pic-container'><img id="wrr-pic"<%-- onmousedown='down(event)'--%><%-- onmouseup='up(event)'--%><%-- onmousemove='move(event)'--%>><div id='rect'style='position:absolute;border:1px solid #41a17b;z-index: 190010'></div></div></div></div>
第一步：框选图片中的文字
$('#cancel-ocr').on('click',function(){$('#wrr').hide();})$('#pic-container').on('mousedown',function(e){down(e);})$('#pic-container').on('mousemove',function(e){move(e);})$('#pic-container').on('mouseup',function(e){up(e);})var select = false;var rect=$('#rect').get(0)var downX = 0;var downY = 0;// 记录鼠标抬起时候的坐标var mouseX2=downX;var mouseY2=downY;function down(event){// 鼠标按下时才允许处理鼠标的移动事件select = true;//让你要画框的那个图层显示出来rect=$('#rect').get(0)rect.style.visibility = 'visible';// 取得鼠标按下时的坐标位置downX = event.clientX;downY = event.clientY;console.log("起点"+downX)console.log("起点"+downY)//设置你要画的矩形框的起点位置rect.style.left = downX +'px';rect.style.top = downY+'px';}//鼠标抬起事件function up(event){//鼠标抬起,就不允许在处理鼠标移动事件rect=$('#rect').get(0)select = false;mouseX2 = event.clientX;mouseY2 = event.clientY;console.log('终点'+mouseX2);console.log('终点'+mouseY2);//隐藏图层rect.style.visibility = 'hidden';}//鼠标移动事件,最主要的事件function move(event){rect=$('#rect').get(0)// 取得鼠标移动时的坐标位置mouseX2 = event.clientX;mouseY2 = event.clientY;// 设置拉框的大小rect.style.width = Math.abs( mouseX2 - downX )+'px';rect.style.height = Math.abs( mouseY2 - downY )+'px';/*这个部分,根据你鼠标按下的位置,和你拉框时鼠标松开的位置关系,可以把区域分为四个部分,根据四个部分的不同,我们可以分别来画框,否则的话,就只能向一个方向画框,也就是点的右下方画框.*/if(select){rect.style.visibility = 'visible';// A partif( mouseX2 < downX && mouseY2 < downY ){rect.style.left = mouseX2;rect.style.top = mouseY2 ;}// B partif( mouseX2 > downX && mouseY2 < downY){rect.style.left = downX ;rect.style.top = mouseY2;}对方未读// C partif( mouseX2 < downX && mouseY2 > downY){rect.style.left = mouseX2;rect.style.top = downY ;}// D partif( mouseX2 > downX && mouseY2 > downY ){rect.style.left = downX ;rect.style.top = downY;}}/*这两句代码是最重要的时候,没有这两句代码,你的拉框,就只能拉框,在鼠标松开的时候,拉框停止,但是不能相应鼠标的mouseup事件.那么你想做的处理就不能进行.这两句的作用是使当前的鼠标事件不在冒泡,也就是说,不向其父窗口传递,所以才可以相应鼠标抬起事件,这个部分我也理解的不是特别的清楚,如果你需要的话,你可以查资料.但是这两句话确实最核心的部分,为了这两句话,为了实现鼠标拉框,我搞了几天的时间.*/window.event.cancelBubble = true;window.event.returnValue = false;function getOffsetLeft(){var lay1 = document.getElementById("wrr-pic");return lay1.offsetLeft;}function getOffsetTop(){var lay1 = document.getElementById("wrr-pic");return lay1.offsetTop;}}
第二步：pom中引用jar包
<dependency>
<groupId>net.sourceforge.tess4j</groupId>
<artifactId>tess4j</artifactId>
<version>4.5.1</version>
</dependency>
第三步：
语言库下载地址：/tesseract-ocr/tessdata 其中chi_sim.traineddata为中文语言库，eng.traineddata为英文语言库。 在任意地方创建一个文件夹tessdata，将下载的chi_sim.traineddata 和 eng.traineddata语言包存放在该目录下，也可以直接存放到自己项目的resources/tessdata目录下。
controller层
public void patternRecognition(HttpServletRequest request, HttpServletResponse response) throws TesseractException {Map<Integer,List<String>> map=new HashMap<>();//获取物料编码String signMateriel = request.getParameter("signMateriel");int len= Integer.parseInt(request.getParameter("lenth"));for (int i=0;i<len;i++) {map.put(i, Arrays.asList(request.getParameterValues("act["+i+"][]")));}String dirName = request.getSession().getServletContext().getRealPath("uploadFile") + "/image_mat/";String fileName = signMateriel + ".PNG";String path=dirName+fileName;//获取框选图片的起点和终点String result= signMaterielInfoService.patternRecognition(map,path);Map<String,String> map1=new HashMap<>();map1.put("res",result);BaseUtil.httpResponse(response, JSONObject.fromObject(map1).toString());}
Service层
@Override@SystemServiceLog(description = "图像识别", operatorType = AppConstant.CURRENT_OPERATOR_SEARCH)public String patternRecognition(Map<Integer,List<String>> map, String path){// 识别图片的路径（修改为自己的图片路径）File file = new File(path);ITesseract instance = new Tesseract();//获得Tesseract的文字库，设置语言库位置URL tessdataPath = SignMaterielInfoServiceImpl.class.getResource("/");System.out.println(tessdataPath.getPath().substring(1));instance.setDatapath(tessdataPath.getPath().substring(1));//chi_sim ：简体中文， eng：英文 根据需求选择语言库instance.setLanguage("chi_sim");//遍历获取鼠标按下和抬起的点int x=0;int y=0;int width=0;int height=0;String result=null;//遍历图片的框选的起点和终点，获取起点坐标和矩形的宽和高for(int i=0;i<map.size();i++){x=Integer.parseInt(map.get(i).get(0));y=Integer.parseInt(map.get(i).get(1));width=Integer.parseInt(map.get(i).get(2))- Integer.parseInt(map.get(i).get(0));height=Integer.parseInt(map.get(i).get(3))- Integer.parseInt(map.get(i).get(1));Rectangle rectangle= new Rectangle(x,y,width,height);System.out.println(rectangle);try {result=instance.doOCR(file,rectangle);} catch (TesseractException e) {e.printStackTrace();}}return result;}
