mirror of
https://github.com/RapidAI/RapidOCR.git
synced 2026-11-11 13:30:51 +08:00
233 lines
8.9 KiB
HTML
233 lines
8.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>RapidOCR Demo</title>
|
|
<link rel=stylesheet type="text/css" href="/static/css/main.css">
|
|
<link rel="shortcut icon" href="/static/favicon.ico" type="image/x-icon" />
|
|
<style>
|
|
h1 {
|
|
text-align: center;
|
|
margin: 0;
|
|
}
|
|
|
|
div.header {
|
|
padding: 10px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<h1>
|
|
Rapid🗲OCR Demo
|
|
 
|
|
<a href="https://github.com/RapidAI/RapidOCR" class="verysmall">欢迎Star</a> 
|
|
<a href="https://github.com/RapidAI/RapidOCR/tree/main/ocrweb#readme" class="verysmall">了解Demo</a>
|
|
</h1>
|
|
</div>
|
|
<div class="area">
|
|
<input type="file" style="display: none;" name="pic" id="target_image" />
|
|
<div class="row">
|
|
<span id="input-hint" class="btn-gen">选择图片 <span class="small">支持拖拽/粘贴/点击; 支持常见图片格式; 大小不超过3M</span></span>
|
|
</div>
|
|
<div class="row">
|
|
<span>选择语言:</span>
|
|
<span id="langs"></span>
|
|
</div>
|
|
</div>
|
|
<div class="area">
|
|
<div class="leftarea" id="detectDiv">
|
|
<span class="span_title">文 本 检 测 结 果</span><br /><br />
|
|
<div id="result_view">
|
|
<img src="/static/hint.svg" alt="目标图片" style="display: none">
|
|
<canvas id="overlay"></canvas>
|
|
<div id="wrapper" style="display: none"></div>
|
|
</div>
|
|
</div>
|
|
<div class="rightarea" id="recogDiv">
|
|
<span id="rec_res" class="span_title">文 本 识 别 结 果</span>
|
|
<br /><br />
|
|
<table id="locTable" class="table" cellspacing="0" cellpadding="5"></table>
|
|
</div>
|
|
</div>
|
|
<script src="/static/js/jquery-3.0.0.min.js"></script>
|
|
<script type="text/javascript">
|
|
const cvs = $('canvas')[0];
|
|
const ctx = cvs.getContext('2d');
|
|
var targetFile = null;
|
|
$(function () {
|
|
// onload
|
|
$.ajax({
|
|
url: '/lang',
|
|
type: 'GET',
|
|
success: (data) => {
|
|
console.log(data);
|
|
let langs = $('#langs');
|
|
langs.html('');
|
|
let checked = ' checked';
|
|
for (let item of data.data) {
|
|
langs.append(`<label class="btn-gen"><input name="lang" type="radio" value="${item.code}"${checked}>${item.name}</label>`);
|
|
checked = '';
|
|
}
|
|
$('input[name=lang]').on('change', requestOCR);
|
|
}
|
|
})
|
|
})
|
|
|
|
$('#input-hint').on('click', function (e) {
|
|
$('#target_image').click();
|
|
});
|
|
$('body').on('dragover', function (e) {
|
|
e.preventDefault();
|
|
});
|
|
function handleData(trans) {
|
|
if (trans.items) {
|
|
for (let i = 0; i < trans.items.length; i++) {
|
|
// If dropped items aren't files, reject them
|
|
if (trans.items[i].kind === 'file') {
|
|
targetFile = trans.items[i].getAsFile();
|
|
console.log(`handleData: items[${i}].name = ${targetFile.name}`);
|
|
requestOCR();
|
|
return;
|
|
}
|
|
}
|
|
} else {
|
|
// Use DataTransfer interface to access the file(s)
|
|
for (let i = 0; i < trans.files.length; i++) {
|
|
targetFile = trans.files[i];
|
|
console.log(`handleData: files[${i}].name = ${targetFile.name}`);
|
|
requestOCR();
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
$('body').on('paste', function (e) {
|
|
let trans = e.originalEvent.clipboardData;
|
|
handleData(trans);
|
|
})
|
|
$('body').on('drop', function (e) {
|
|
e.preventDefault();
|
|
let trans = e.originalEvent.dataTransfer;
|
|
handleData(trans);
|
|
});
|
|
$("#target_image").on('change', function () {
|
|
targetFile = $("#target_image")[0].files[0];
|
|
console.log('Use file', targetFile)
|
|
requestOCR();
|
|
});
|
|
$('#result_view > img').on('load', function (e) {
|
|
let img = $('#result_view > img')[0];
|
|
cvs.width = e.target.naturalWidth;
|
|
cvs.height = e.target.naturalHeight;
|
|
ctx.clearRect(0, 0, cvs.width, cvs.height);
|
|
ctx.drawImage(img, 0, 0);
|
|
});
|
|
function getTs(ts, keys) {
|
|
let t = 0;
|
|
for (let key of keys) {
|
|
t += (ts[key] || 0);
|
|
}
|
|
return t.toFixed(4);
|
|
}
|
|
function drawPolyLines(points) {
|
|
ctx.moveTo(points[0][0], points[0][1]);
|
|
for (let pt of points) {
|
|
ctx.lineTo(pt[0], pt[1]);
|
|
}
|
|
ctx.lineTo(points[0][0], points[0][1]);
|
|
ctx.stroke();
|
|
}
|
|
function requestOCR() {
|
|
if (!targetFile) {
|
|
return;
|
|
}
|
|
// 判断图像格式是否匹配
|
|
let imageName = targetFile.name;
|
|
let index = imageName.lastIndexOf('.');
|
|
let extName = imageName.substr(index + 1);
|
|
let imgArr = ['webp', 'jpg', 'bmp', 'png', 'jpeg'];
|
|
if (!(imgArr.includes(extName.toLocaleLowerCase()))) {
|
|
alert("图像文件格式不支持！");
|
|
return;
|
|
}
|
|
|
|
// 判断图像大小是否符合
|
|
let imageSize = targetFile.size / 1024 / 1024;
|
|
if (imageSize >= 3) {
|
|
alert("图像大小超过3M!");
|
|
return;
|
|
}
|
|
var reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
$('#result_view > img').attr('src', e.target.result);
|
|
};
|
|
reader.readAsDataURL(targetFile);
|
|
|
|
var formdata = new FormData();
|
|
var token = location.hash.slice(1);
|
|
formdata.set('token', token);
|
|
formdata.set('image', targetFile);
|
|
formdata.set('lang', $('input[name=lang]:checked').val());
|
|
|
|
$.ajax({
|
|
url: "/ocr",
|
|
type: "POST",
|
|
data: formdata,
|
|
processData: false,
|
|
contentType: false,
|
|
beforeSend: function () {
|
|
$("#wrapper").show();
|
|
$("#locTable").hide();
|
|
$("#rec_res").html("文本识别结果");
|
|
},
|
|
error: function (evt) {
|
|
console.log(evt);
|
|
alert('检测失败: ' + evt.status + ', ' + evt.statusText);
|
|
},
|
|
success: function (resp) {
|
|
$("#wrapper").hide();
|
|
if (resp.msg !== 'OK') {
|
|
console.log(resp);
|
|
alert('检测失败: ', resp.msg);
|
|
return;
|
|
}
|
|
let data = resp.data;
|
|
$("#rec_res").html("文 本 检 测 结 果(Total:" + data.ts.total.toFixed(3) + "s)")
|
|
$("#rec_res").show();
|
|
let html = [];
|
|
html.push('<tr>' +
|
|
'<th align="right">Det: ' + getTs(data.ts, ['detect', 'post-detect']) + 's</th>' +
|
|
'<th align="center">Cls: ' + getTs(data.ts, ['classify', 'post-classify']) + 's</th>' +
|
|
'<th align="left">Rec: ' + getTs(data.ts, ['recognize', 'post-recognize']) + 's</th>' +
|
|
"</tr>")
|
|
html.push("<tr>" +
|
|
'<th bgcolor="#C0C0C0">序号</th>' +
|
|
'<th bgcolor="#C0C0C0">识别结果</th>' +
|
|
'<th bgcolor="#C0C0C0">置信度</th>' +
|
|
"</tr>")
|
|
ctx.strokeStyle = '#ff0000'
|
|
ctx.font = '16px sans-serif'
|
|
for (let idx = 0; idx < data.results.length; idx++) {
|
|
let result = data.results[idx];
|
|
drawPolyLines(result.box);
|
|
ctx.fillText(idx, result.box[0][0], result.box[0][1]);
|
|
ctx.strokeText(idx, result.box[0][0], result.box[0][1]);
|
|
html.push('<tr><td>');
|
|
html.push(idx);
|
|
html.push('</td><td>');
|
|
html.push(result.text);
|
|
html.push('</td><td>');
|
|
html.push(result.score.toFixed(4));
|
|
html.push('</td></tr>');
|
|
}
|
|
$("#locTable").html(html.join(''));
|
|
$("#locTable").show();
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |