识别图片中的文字（ocr）

人生不言弃1

已于 2022-09-05 18:35:16 修改

阅读量736

点赞数

分类专栏：前端文章标签： javascript 前端 html

于 2022-07-26 10:06:08 首次发布

本文链接：https://blog.csdn.net/weixin_50735831/article/details/125988463

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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 part
                    if( mouseX2 < downX && mouseY2 < downY ){
                        rect.style.left = mouseX2;
                        rect.style.top = mouseY2 ;   
                    }
                   
                    // B part
                    if( mouseX2 > downX && mouseY2 < downY){
                        rect.style.left = downX ;
                        rect.style.top = mouseY2;   
                    }
                   
                    // C part
                    if( mouseX2 < downX && mouseY2 > downY){
                        rect.style.left = mouseX2;
                        rect.style.top = downY ;   
                    }
                   
                    // D part
                    if( 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 part
		if( mouseX2 < downX && mouseY2 < downY ){
			rect.style.left = mouseX2;
			rect.style.top = mouseY2 ;
		}

		// B part
		if( mouseX2 > downX && mouseY2 < downY){
			rect.style.left = downX ;
			rect.style.top = mouseY2;
		}
对方未读

 // C part
		if( mouseX2 < downX && mouseY2 > downY){
			rect.style.left = mouseX2;
			rect.style.top = downY ;
		}
		// D part
		if( 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;
	}