master

分支 (1)

管理

管理

master

ocr01
/
index_ocr.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>图片文字识别</title>
	<link href="./bootstrap.min.css" rel="stylesheet">
	<script src="./eejs-api.min.js"></script>
	<script src="./jquery-1.12.4.min.js"></script>

	<style>
	html, body {width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;background: #f0f0f0;}
	.box {width: 100%; height: calc(100% - 50px); float: left;}
	.line{ line-height: 32px; width: 100%; margin: 5px; float: left;}
	#processPath{ width: 400px;}
	.box-left {width: 400px; height: 450px;overflow: auto; float: left;}
	.box-right {width: 300px; float: right;}
	.cover {width: 100%; height: 100%; position: absolute; left: 0; top: 0; text-align: center; background-color: #555555; opacity: 0.5; z-index: 2;}
	.cover img {margin-top: 200px;}
	.hidden {display: none;}
	#result {width: 400px; height: 432px; margin: 3px;float: left;}
	#path {margin-bottom: 0; width:450px; }
	.viewer {
		width: 440px; height: 440px; position: relative; overflow: auto;
		float: left; margin: 3px; border-radius: 4px;
		border: 1px solid #dddddd;
	}
	#pic {margin-left: 0; margin-top: 0px;}
	.rect{position: absolute;z-index: 1; border: 1px solid #ff0000;}
	</style>
</head>

<body>
	<div class="cover hidden">
		<img src="240.gif" width="128" height="128"/>
	</div>
	<div class="line">
		<button id="screenshot2" class="btn btn-primary">截图2 (F4)</button>
		<input type="text" class="form-control" id="path" placeholder="截图保存为jpg格式，然后拖到此窗口"/>
		<button id="ocr1" class="btn btn-success">本地图片识别 (F5)</button>
		<button id="ocr2" class="btn btn-primary">网络图片识别 (F6)</button>
	</div>
	<div class="box">
		<div class="viewer">
			<img src="" id="pic" class="hidden"/>
		</div>
		<textarea id="result" placeholder="截图保存为jpg格式，然后拖到此窗口"></textarea>
	</div>

	<script type="text/javascript">
		ee.AppConfig({
			"title": "图片文字识别（只支持.jpg格式）",
			"width": 880,
			"height": 520,
			"debug": true,
			"max": false,
			"min": true,
			"close": true,
			"resize": false,
			"border": true
		});

		var hotindex = -1;
		var hotkeyCall = function(ret){
			console.object(ret);
			if(ret.flag == 1){
				openScreenshot(1);
			} else if(ret.flag == 2){
				ocr(1);
			} else if(ret.flag == 3){
				ocr(2);
			}
		}
		window.onload = function(){
			ee.windowRegHotkey({"hwnd": -1, "keyCode": 115, "flag": 1}, hotkeyCall);
			ee.windowRegHotkey({"hwnd": -1, "keyCode": 116, "flag": 2}, hotkeyCall);
			ee.windowRegHotkey({"hwnd": -1, "keyCode": 117, "flag": 3}, hotkeyCall);

			$('#screenshot2').on('click', function(){
				openScreenshot(2);
			});
			$('#ocr1').on('click', function(){
				ocr(1);
			});
			$('#ocr2').on('click', function(){
				ocr(2);
			});
		};

		ee.onWindowClose = function(){
			console.info('窗口关闭');
			ee.windowUnregAllHotkey({"hwnd": -1});
		}

		ee.windowCreateFiledrag({"hwnd": -1}, function(ret){
			console.object(ret);
			if(ret.list){
				$('#path').val(ret.list[0]);
				$('#pic').attr('src', ret.list[0] + '?r=' + new Date().valueOf()).removeClass('hidden');
			}
		});

		function openScreenshot(f){
			ee.processCreateEx({"path": f == 1 ? "Screener.exe" : "Snapshot.exe", "showway": 2}, function(ret){
				//console.object(ret);
			});
		}

		function ocr(f){
			var path = $('#path').val();
			$('.viewer .rect').remove();
			if(f == 1){
				$('#pic').attr('src', path + '?r=' + new Date().valueOf()).removeClass('hidden');
			}
			$('#result').val('');
			ee.netSougouOcr({"path": path, "pathtype": f - 1}, function(res){
				console.object(res);
				if(res.success == 1){
					var aa = [];
					for(var i = 0; i < res.result.length; i++){
						aa.push(res.result[i].content);
						var f = res.result[i].frame;
						var d = $('<div class="rect"></div>');
						var arr = f[0].split(',');
						var w = f[1].split(',')[0] - arr[0];
						var h = f[2].split(',')[1] - f[1].split(',')[1];
						d.css({
							left: arr[0] + 'px',
							top: arr[1] + 'px',
							width: w + 'px',
							height: h + 'px'
						});
						$('.viewer').append(d);
					}
					$('#result').val(aa.join('\n'));
				}
			});
		}

	</script>

</body>

</html>