html 本地预览图片 图片上绘制矩形框
效果如图
完整html代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>通用OCR识别</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
crossorigin="anonymous" />
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.0/jquery-1.8.0.js"></script>
<style>
.sk-circle {
margin: 40px auto;
width: 40px;
height: 40px;
position: relative; }
.sk-circle .sk-child {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0; }
.sk-circle .sk-child:before {
content: '';
display: block;
margin: 0 auto;
width: 15%;
height: 15%;
background-color: #333;
border-radius: 100%;
-webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; }
.sk-circle .sk-circle2 {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg); }
.sk-circle .sk-circle3 {
-webkit-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg); }
.sk-circle .sk-circle4 {
-webkit-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg); }
.sk-circle .sk-circle5 {
-webkit-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg); }
.sk-circle .sk-circle6 {
-webkit-transform: rotate(150deg);
-ms-transform: rotate(150deg);
transform: rotate(150deg); }
.sk-circle .sk-circle7 {
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg); }
.sk-circle .sk-circle8 {
-webkit-transform: rotate(210deg);
-ms-transform: rotate(210deg);
transform: rotate(210deg); }
.sk-circle .sk-circle9 {
-webkit-transform: rotate(240deg);
-ms-transform: rotate(240deg);
transform: rotate(240deg); }
.sk-circle .sk-circle10 {
-webkit-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg); }
.sk-circle .sk-circle11 {
-webkit-transform: rotate(300deg);
-ms-transform: rotate(300deg);
transform: rotate(300deg); }
.sk-circle .sk-circle12 {
-webkit-transform: rotate(330deg);
-ms-transform: rotate(330deg);
transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
-webkit-animation-delay: -1s;
animation-delay: -1s; }
.sk-circle .sk-circle4:before {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
-webkit-animation-delay: -0.7s;
animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
-webkit-animation-delay: -0.5s;
animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
-webkit-animation-delay: -0.3s;
animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s; }
@-webkit-keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
40% {
-webkit-transform: scale(1);
transform: scale(1); } }
@keyframes sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0); }
40% {
-webkit-transform: scale(1);
transform: scale(1); } }
.meng_div {
width:100%;
height:100%;
background-color:#000;
position:absolute;
top:0;
left:0;
z-index:2;
opacity:0.3;
/*兼容IE8及以下版本浏览器*/
filter: alpha(opacity=30);
display:none;
}
.log_window {
width:200px;
height:200px;
margin: auto;
position: absolute;
z-index:3;
top: 0;
bottom: 0;
left: 0;
right: 0;
display:none;
}
</style>
</head>
<body>
<div class="sk-circle log_window">
<div class="sk-circle1 sk-child">
</div>
<div class="sk-circle2 sk-child">
</div>
<div class="sk-circle3 sk-child">
</div>
<div class="sk-circle4 sk-child">
</div>
<div class="sk-circle5 sk-child">
</div>
<div class="sk-circle6 sk-child">
</div>
<div class="sk-circle7 sk-child">
</div>
<div class="sk-circle8 sk-child">
</div>
<div class="sk-circle9 sk-child">
</div>
<div class="sk-circle10 sk-child">
</div>
<div class="sk-circle11 sk-child">
</div>
<div class="sk-circle12 sk-child">
</div>
</div>
<div class="container">
<br />
<div class="row">
<div class="panel panel-default">
<div class="panel-body">
<p>
通用OCR识别</p>
<p>
可以使用post方式访问以下接口</p>
<p>
http://127.0.0.1:8082/ocr/stream //接收文件流，接收参数[file]，返回识别信息</p>
<p>
http://127.0.0.1:8082/ocr/base64 //接收base64字符串，接收参数[base64str]，返回识别信息</p>
</div>
</div>
</div>
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="label label-primary">选择文件</span>
<br />
</div>
<div class="panel-body">
<form action="test" method="post" enctype="multipart/form-data" id="fm">
<input type="file" name="file" id="photo"></br></br>
<input type="button" value="提交" id="sub_btn"></br> </br>
</form>
</div>
</div>
</div>
<div class="row">
<img id="imgId" src="" style="display: none;" />
<canvas id="canvas" width="10" height="10"></canvas>
</div>
<div class="row">
<div class="panel panel-primary">
<div class="panel-heading">
<span class="label label-primary">识别出的信息</span><br />
</div>
<div class="panel-body">
消息:
<textarea class="form-control" id="msg" style="height: 30px;"></textarea></br> 数据:
<textarea class="form-control" id="data" style="height: 350px;"></textarea></br>
</div>
</div>
</div>
</body>
<script type="text/jscript">
$(function () {
$("#sub_btn").click(function () {
$("#msg").val("");
$("#data").val("");
clearCanvas();
var formData1 = new FormData($("#fm")[0]);
$.ajax({
type: "post",
url: "http://127.0.0.1:8082/ocr/stream",
dataType: "json",
data: formData1,
beforeSend: function () {
$('#meng_div').show();
$('.log_window').show();
}, error: function () {
console.log("网络连接出错！");
$('#meng_div').hide();
$('.log_window').hide();
},
//是否缓存
cache: false,
//当设置为false的时候,jquery 的ajax 提交的时候会序列化 data
processData: false,
/*contentType都是默认的值：application/x-www-form-urlencoded；
*表单中设置的contentType为"multipart/form-data"；
* ajax 中 contentType 设置为 false ，是为了避免 JQuery对要提交
* 的表单中的enctype值修改*/
contentType: false,
success: function (d) {
console.log(d)
//图片本地预览
var docObj = document.getElementById("photo"); //file文本框id
var imgObjPreview = document.getElementById("imgId"); //预显示的图片
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
//展示数据
$("#msg").val(d.msg + ";耗时" + d.time + "毫秒")
var info = "";
$.each(d.data, function (i, n) {
info = info + n.text + "\r\n"
});
$("#data").val(info)
$('#meng_div').hide();
$('.log_window').hide();
//绘图
draw(d.data);
}
})
})
})
function init() {
var c = document.getElementById("canvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FFFFFF";
cxt.beginPath();
cxt.fillRect(0, 0, 10, 10);
cxt.closePath();
}
//清空canvas
function clearCanvas() {
var c = document.getElementById("canvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#FFFFFF";
cxt.beginPath();
cxt.fillRect(0, 0, 0, 0);
cxt.closePath();
}
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d'); //getContext() 方法可返回一个对象
var img = document.getElementById("imgId");
//绘图
function draw(data) {
img.onload = function () {
canvas.width = img.width;
canvas.height = img.height;
context.drawImage(img, 0, 0)
$.each(data, function (i, n) {
context.beginPath()
$.each(n.boxPoints, function (j, item) {
context.strokeStyle = 'red'
context.lineWidth = 1
context.lineTo(item.x, item.y)
});
context.lineTo(n.boxPoints[0].x, n.boxPoints[0].y)
context.stroke()
})
}
}
</script>
</html>
后台返回数据如下
{
"code": 1,
"msg": "成功",
"data": [
{
"boxPoints": [
{
"x": 6,
"y": 4
},
{
"x": 155,
"y": 4
},
{
"x": 155,
"y": 44
},
{
"x": 6,
"y": 44
}
],
"text": "7788.com",
"score": 0.936056435
},
{
"boxPoints": [
{
"x": 65,
"y": 56
},
{
"x": 308,
"y": 56
},
{
"x": 308,
"y": 88
},
{
"x": 65,
"y": 88
}
],
"text": "D188B008242",
"score": 0.921756744
},
{
"boxPoints": [
{
"x": 594,
"y": 66
},
{
"x": 725,
"y": 65
},
{
"x": 726,
"y": 105
},
{
"x": 595,
"y": 107
}
],
"text": "南京",
"score": 0.9982848
},
{
"boxPoints": [
{
"x": 342,
"y": 109
},
{
"x": 482,
"y": 107
},
{
"x": 482,
"y": 146
},
{
"x": 342,
"y": 148
}
],
"text": "K360次",
"score": 0.996395
},
{
"boxPoints": [
{
"x": 136,
"y": 119
},
{
"x": 281,
"y": 119
},
{
"x": 281,
"y": 169
},
{
"x": 136,
"y": 169
}
],
"text": "南京",
"score": 0.9974499
},
{
"boxPoints": [
{
"x": 530,
"y": 119
},
{
"x": 674,
"y": 121
},
{
"x": 673,
"y": 171
},
{
"x": 529,
"y": 169
}
],
"text": "西安",
"score": 0.9761604
},
{
"boxPoints": [
{
"x": 568,
"y": 180
},
{
"x": 632,
"y": 180
},
{
"x": 632,
"y": 213
},
{
"x": 568,
"y": 213
}
],
"text": "Xian",
"score": 0.9384411
},
{
"boxPoints": [
{
"x": 157,
"y": 177
},
{
"x": 264,
"y": 180
},
{
"x": 263,
"y": 214
},
{
"x": 156,
"y": 211
}
],
"text": "NanJing",
"score": 0.9177119
},
{
"boxPoints": [
{
"x": 518,
"y": 227
},
{
"x": 752,
"y": 225
},
{
"x": 752,
"y": 258
},
{
"x": 518,
"y": 260
}
],
"text": "12车009号下铺",
"score": 0.921657562
},
{
"boxPoints": [
{
"x": 87,
"y": 230
},
{
"x": 464,
"y": 231
},
{
"x": 464,
"y": 261
},
{
"x": 87,
"y": 259
}
],
"text": "2013年11月01日13:26开",
"score": 0.913147569
},
{
"boxPoints": [
{
"x": 91,
"y": 275
},
{
"x": 305,
"y": 275
},
{
"x": 305,
"y": 318
},
{
"x": 91,
"y": 318
}
],
"text": "￥279.50元",
"score": 0.8542404
},
{
"boxPoints": [
{
"x": 505,
"y": 281
},
{
"x": 651,
"y": 281
},
{
"x": 651,
"y": 311
},
{
"x": 505,
"y": 311
}
],
"text": "新空调硬卧",
"score": 0.9957591
},
{
"boxPoints": [
{
"x": 88,
"y": 330
},
{
"x": 292,
"y": 330
},
{
"x": 292,
"y": 359
},
{
"x": 88,
"y": 359
}
],
"text": "限乘当口当次车",
"score": 0.8572439
},
{
"boxPoints": [
{
"x": 422,
"y": 366
},
{
"x": 591,
"y": 366
},
{
"x": 591,
"y": 399
},
{
"x": 422,
"y": 399
}
],
"text": "请由一楼软",
"score": 0.817313969
},
{
"boxPoints": [
{
"x": 416,
"y": 402
},
{
"x": 522,
"y": 400
},
{
"x": 523,
"y": 433
},
{
"x": 417,
"y": 435
}
],
"text": "席进站",
"score": 0.857233346
},
{
"boxPoints": [
{
"x": 91,
"y": 410
},
{
"x": 399,
"y": 408
},
{
"x": 399,
"y": 440
},
{
"x": 91,
"y": 442
}
],
"text": "6101211955****5579",
"score": 0.9501841
},
{
"boxPoints": [
{
"x": 403,
"y": 416
},
{
"x": 416,
"y": 416
},
{
"x": 416,
"y": 429
},
{
"x": 403,
"y": 429
}
],
"text": "推",
"score": 0.0774203539
},
{
"boxPoints": [
{
"x": 98,
"y": 460
},
{
"x": 366,
"y": 460
},
{
"x": 366,
"y": 482
},
{
"x": 98,
"y": 482
}
],
"text": "16805201881028B008242",
"score": 0.961176634
}
],
"time": 1125.9881
}
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？