识别图片中的文字（ocr）

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>

第三步：

语言库下载地址：https://github.com/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;}

识别图片中的文字（ocr）相关推荐

OCR如何识别图片中的文字？
生活处处可见OCR的身影,OCR如何识别图片中的文字?OCR文字识别技术其实很简单,但还是有很多人不会,这里分享一个方法给大家. 1.首先要在百度或者下载站去搜索捷速OCR文字识别软件,熟悉操作后接着 ...
怎样用ocr软件识别图片中的文字
现在文件格式越来越多,一个个处理起来也是很麻烦,想要有效快速的完成工作任务,我们就必须要利用一些辅助工具的帮助,比如说怎样用ocr软件识别图片中的文字?这个问题我们该如何处理,其实只要使用一个文字识别 ...
java 图片识别_JAVA识别图片中的文字
最近在需求上有一个识别图片中的文字功能,查询了不少资料,发现可以使用tess4j识别图像文字:话不多说现在开始: 首先创建Spring Boot项目:导入以下依赖 net.sourceforge.te ...
C# pdf 转图片 and 创建百度AI文字识别应用（识别图片中的文字和数字）
/// <summary>/// pdf 转图片/// </summary>public static void Turnpicture(){string str = &quo ...
Python批量识别图片中的文字并保存到txt文档中
Python OCR工具pytesseract,之前是惠普的产品,被Google收了之后就给开源了. 1.需要下载并安装Google Tesseract,下载地址看图片上有,要下载4.0.0版本的 2 ...
识别图片文字怎么弄？我来教大家怎么识别图片中的文字
有时,我们需要从图片中提取文本以进行编辑或搜索.虽然手动转录是一种选项,但这是费时费力的工作,而且容易出错.为了解决这个问题,出现了各种各样的技术和工具,可以帮助我们自动识别图片中的文字.在本文中,我 ...
通过Python的pytesseract库识别图片中的文字
文章目录前言一.pytesseract 1.pytesseract是什么? 2.安装pytesseract 3.查看pytesseract版本 4.安装PIL 5.查看PIL版本二.Tesser ...
手写识别字体的步骤是什么？怎么识别图片中的文字？
手写识别字体的步骤是什么?怎么识别图片中的文字? 1. 打开信风工具网,点击拍照按钮,选择拍图识字模式,对准需要识别的文件进行拍摄｡在线工具地址: https://ocr.bytedance.zj.c ...
pytesseract提取识别图片中的文字
目录 1.获取tesseract版本号 2.获取语言包列表 3.识别图片中的文字 4.获取图片中文字的详细信息 5.识别图片中的文字和位置 6.识别osd信息 7.识别并生成xml文件避坑指南: p ...
使用百度云识别图片中的文字（二）：获取图片中的文字
使用百度云识别图片中的文字(二):获取图片中的文字上一篇文章中提到怎样获取access_token.此篇文章就是通过access_token来识别图片中的文字. 先来看看:官方的介绍吧: 本文档主要 ...

识别图片中的文字（ocr）

识别图片中的文字（ocr）相关推荐

最新文章

热门文章