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> & ...
随机推荐
- NC24870 [USACO 2009 Dec G]Video Game Troubles
题目链接 题目 题目描述 Farmer John's cows love their video games! FJ noticed that after playing these games th ...
- CSS浮动&定位&布局
浮动简介 浮动最早起设计出来是为了实现文字环绕图片或者文字环绕的效果,现在浮动是主流的页面布局方式之一 float:浮动属性,值可以是left.right对应向左和向右浮动 元素浮动之后的特点 脱离文 ...
- WPF仿win10加载动画 可用于loading加载
直接上xaml 没有cs代码 (自己琢磨了好久感觉这样能接受) <UserControl x:Class="WpfApp1.Loading" xmlns="http ...
- NVME(学习笔记四)—概念解读
1. 综述 NVMe over PCIe协议,定义了NVMe协议的使用范围.指令集.寄存器配置规范等. 名词解释 1.1.1 Namespace Namespace是一定数量逻辑块(LB)的集合,属性 ...
- Slot 的含义
Slot 解释 1)slot就是槽的意思,是一个资源单位,只有给task分配了一个slot之后,这个task才可以运行.slot分两种,map slot沪蓉reduce slot.另外,slot是一个 ...
- springboot和jquery.form.js实现监听文件上传进度
说明 文件上传作为程序开发最常用的功能之一,上传进度展示也是必须的.但是有时候进度并不准,进度100%了实际上后台尚未接收完毕,本篇就介绍如何利用jquery的form插件来实时反馈文件上传进度. 实 ...
- 超简单JSP人员信息管理系统（适合新手练手用）
自己以前闲着没事写的JSP小项目,适合刚学完JSP拿来练手的朋友. 源码地址: https://github.com/mudfish/userManager 项目说明: 软件需求: 开发工具:ecli ...
- Innodb之事务
目录 一.事务基本概念 事务的特性:ACID 事务类型 1.扁平事务 2.带保存点的扁平事务 3.链式事务 4.嵌套事务 5.分布式事务 二.事务的实现概述 三.redo log 1)组成 2)red ...
- 以二进制文件安装K8S之高可用部署架构
在Kubernetes系统中,Master节点扮演着总控中心的角色,通过不间断地与各个工作节点(Node)通信来维护整个集群的健康工作状态,集群中各资源对象的状态则被保存在etcd数据库中. 在正式环 ...
- 前后端分离解决跨域cors问题
修改windows的hosts文件 vim C:\Windows\System32\drivers\etc\hosts 添加域名 前端:www.luffycity.cn 后端:api.luffycit ...