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> & ...
随机推荐
- LLaMA 2 - 你所需要的一切资源
摘录 关于 LLaMA 2 的全部资源,如何去测试.训练并部署它. LLaMA 2 是一个由 Meta 开发的大型语言模型,是 LLaMA 1 的继任者.LLaMA 2 可通过 AWS.Hugging ...
- Redis+Lua实现简易的秒杀抢购
1 商品抢购 主要逻辑是:减库存,记录抢购成功的用户 @RestController public class DemoController { @Resource private StringRe ...
- STC8A/STC8H通用的最小系统板
STC8(包括之前的STC15)因为自带晶振, 所以最小电路需要的外围元件几乎为0 -- 手册上画的两个电容不加也没问题, 直接加上5V电源就能跑. 这样只需要用排针把管脚都引出就行了. 唯一不方便的 ...
- QT - Day 5
1 event事件 用途:用于事件的分发 也可以做拦截操作,不建议 bool event( QEvent * e); 返回值 如果是true 代表用户处理这个事件,不向下分发了 e->ty ...
- 如何在矩池云上运行 AI 图像编辑工具 DragGAN
5 月,DragGAN 横空出世,在开源代码尚未公布前,就在Github上斩获近 20000 Star,彼时,页面上只有效果图和一句"Code will be released in Jun ...
- 智联招聘基于 Nebula Graph 的推荐实践分享
本文首发于 Nebula Graph Community 公众号 本文整理自智联招聘资深工程师李世明在「智联招聘推荐场景应用」的实践分享 搜索推荐架构 在讲具体的应用场景之前,我们先看下智联招聘搜索和 ...
- 为SQL Server配置连接加密
前言 很多客户在对数据库做安全审计时要求配置连接加密,本文就如何配置加密以及使用证书做一个系统的整理. 连接加密 首先,连接加密不是透明数据加密,很多人经常把两个概念混淆.连接加密是指客户端程序和SQ ...
- Java 演示线程的死锁问题
1 package bytezero.deadlock; 2 3 /** 4 * 演示线程的死锁问题: 5 * 6 * 1.死锁的理解:不同的线程分别占用对方需要的同步资源不放弃,都在等待对方放弃 7 ...
- C++ //统计元素个数 //统计内置数据类型 //统计自定义数据类型
1 //统计元素个数 2 3 #include<iostream> 4 #include<string> 5 #include<vector> 6 #include ...
- Redis 常见数据类型(对象类型)和应用案列
前言: 每次你在游戏中看到玩家排行榜,或者在音乐应用中浏览热门歌单,有没有想过这个排行榜是如何做到实时更新的?当然,依靠 Redis 即可做到. 在技术领域,我们经常听到「键值存储」 这个词.但在 R ...