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> & ...
随机推荐
- SpringCloud Ribbon负载均衡服务调用实战
介绍 Spring Cloud Ribbon是基于Netflix Ribbon实现的一套客户端 负载均衡的工具. 主要功能是提供客户端的软件负载均衡算法和服务调用.Ribbon客户端组件提供一系列完善 ...
- SpringCloud Bus动态刷新中心化配置
说明 上一篇我们介绍了配置中心实战,并留下了一个配置修改后如何实现自动刷新的问题,下面就实际操作一下,首先是手动刷新单个微服务,其次是利用消息总线实现全部刷新. 手动动态刷新 动态刷新是当远程配置文件 ...
- Java并发编程实例--10.使用线程组
并发API提供的一个有趣功能是可以将多个线程组成一个组. 这样我们就能将这一组线程看做一个单元并且提供改组内线程对象的读取操作.例如 你有一些线程在执行同样的任务并且你想控制他们,不考虑有多少个线程仍 ...
- org.apache.http.client.ClientProtocolException: URI does not specify a valid host name:localhost:xxx
今天部署应用的时候遇到的,总结一下我知道的有2个原因: 1.地址前要加http:// 这就是标题报错的原因,他用的是localhost:xxx 2.地址本身拼错了也会报这个,例如地址:http:// ...
- Taurus.MVC WebMVC 入门开发教程1：框架下载环境配置与运行
前言: 之前有网友说 Mvc系列的教程对新手不友好,因此补充新手入门系列教程. 在开始使用 Taurus.Mvc 进行 Web应用开发之前,建议可以观摩一下之前的文章:WebAPI 系列教程 因为两者 ...
- Redis集群单机环境搭建
概述 目标:在单台物理机上搭建3主3从共6个节点的Redis集群. 版本:Redis 6.2.4 系统:Ubuntu 18.04 Desktop(IP地址:192.168.100.247) 准备工作 ...
- Dockerfile和docker-compose详解
Dockerfile镜像制作 docker/podman中, 镜像是容器的基础,每次执行docker run的时候都会指定哪个基本镜像作为容器运行的基础.我们之前的docker的操作都是使用来自doc ...
- 【Azure 事件中心】Azure Event Hub中的数据能不能存储大于7天呢？如果7天之后是不是会自动删除呢？
问题描述 Event Hub中有个retention的设置为7天,有没有办法增大这个Retention的时间? 如果没办法,是不是超过7天的数据就会被删除? 问题解答 因为Azure Event Hu ...
- Binlog分析利器-binlog_summary.py
Binlog中,除了具体的SQL,其实,还包含了很多有价值的信息,如, 事务的开始时间. 事务的结束时间. 事务的开始位置点. 事务的结束位置点. 操作的开始时间(一个事务通常会包含多个操作). 表 ...
- Java 基本数据类型之间的运算规则
1 /*** 2 * 基本数据类型之间的运算规则 3 * 4 * 前提:7中基本数据类型运算 5 * 6 * 1.自动类型提升: 7 * 当容量小的类型与容量大的数据类型的变量做运算时,结果自动提升为 ...