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
}html 本地预览图片 图片上绘制矩形框的更多相关文章
- Android摄像头：只拍摄SurfaceView预览界面特定区域内容（矩形框）---完整（原理：底层SurfaceView+上层绘制ImageView）
Android摄像头:只拍摄SurfaceView预览界面特定区域内容(矩形框)---完整实现(原理:底层SurfaceView+上层绘制ImageView) 分类: Android开发 Androi ...
- 如何用 matlab 在图片上绘制矩形框 和 添加文字 ？
如何给图像添加矩形框?以及添加想要输入的文字 ? 案例程序,如下所示: clc; close all; clear all;image = imread('/home/wangxiao/Picture ...
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- jQuery图片上传前先在本地预览（不经过后端处理）
前段时间遇到一个问题,前端想实现图片上传预览(不经过后端PHP或JAVA处理),用户点击file按钮上传文件,点击确定马上就能看到预览的效果,但在实现的时候无论怎样都取不到file上图片的真实路径,得 ...
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- JQuery插件：图片上传本地预览插件，改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
- jQuery图片上传前先在本地预览
js代码: /* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持saf ...
- web 图片上传实现本地预览
在说上传之前先说说如何替换or美化浏览器自带的简陋上传按钮(自定义自己的上传按钮 如:img): 1.将自定义上传按钮上方添加 input file 框,实现input实现透明处理. 2.对自定义上传 ...
- 图片上传-本地图片转base64+ie8支持+本地预览支持
最近项目由于flash同学没在了,图片上传只能前端重新做,后台希望用base64数据上传,复用之前接口 问题来了, 1.ie8 不支持canvas转base64 2.本地预览 base64数据,ie8 ...
- js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...
随机推荐
- 【Unity3D】线段渲染器LineRenderer
1 LineRenderer 简介 LineRenderer 组件用于绘制线段,可以调整线段条数.端点坐标.颜色.宽度等属性,其属性面板如下: Materials:线段材质,最好设置为 Defau ...
- Linux下SQLPLUS替代工具rlwrap安装使用
rlwrap工具可以解决linux下sqlplus 提供浏览历史命令行的功能,和删除先前输入错误的字母等问题 1.安装 需要readline包 这个安装光盘就有 [root@asm RedHat]# ...
- 我的小程序之旅六：微信公众号授权登录(适用于H5小程序)
实现步骤 1 第一步:用户同意授权,获取code 2 第二步:通过code换取网页授权access_token 3 第三步:刷新access_token(如果需要) 4 第四步:拉取用户信息(需sco ...
- win10 wsl 运行后没有反应
wsl 运行一段时间后执行没有反应, 需要重启LxssManager 管理员模式打开 powshell 找到pid, 结束pid >tasklist /svc /fi "service ...
- h5页面在微信打开，ios底部存在返回横条的问题
我的问题比较简单,一个处理链接的页面,二次跳转进入真正的页面,导致ios出现返回横条,点击后退回到了处理链接页面.因为这个后退不会重新加载,导致一直处在处理链接的这个空页面. 所以我用replace代 ...
- Java是解释型语言么
基础概念 JVM虚拟机会将.java类文件编译成.class文件--字节码文件,这大家都知道. 代码运行时还需要将.class字节码文件翻译成机器码才能执行. 解释执行:将编译好的字节码一行一行地翻译 ...
- 【Azure Function App】Java Function在运行中遇见内存不足的错误
问题描述 在Function的Code+Test界面进行函数触发可以成功.因为Function为Blob Trigger,当在Blob容器下上传文件后,Function可以被正常触发但是报 outof ...
- C++ 多线程笔记2 线程同步
C++ 多线程笔记2 线程同步 并发(Concurrency)和并行(Parallelism) 并发是指在单核CPU上,通过时间片轮转的方式,让多个任务看起来像是同时进行的.实际上,CPU在一个时间段 ...
- 【教程】navicat配合HTTP通道远程连接SQLite数据库
前言 缘由 好奇的我想查看服务器上宝塔面板的SQLite数据库 久别一月,特来水文.起因是我看到服务器上搭建的宝塔面板,好奇其中使用的SQLite数据库,想用navicat远程连接看一下,奈何不会玩, ...
- Java 数组嵌套
1 public static void main(String[] args) 2 { 3 int[] arr = new int[] {8,6,3,1,9,5,4,7}; 4 int[] inde ...