仿 AI 百度图片文字识别
//css
.tip-twitter{
height:200px;
}
.pagebox {
color: #333;
background: #eaedf1;
overflow: auto;
height: 900px;
}
ul {
padding: 0;
}
.tm-m-photos, .tm-m-photos-thumb {
zoom: 1;
}
.tm-m-photos-thumb {
margin: 10px 0;
list-style-type: none;
height: 90px;
}
.tm-m-photos-thumb li {
float: left;
border: 2px solid #f2f2f2;
padding: 2px;
margin-right: 8px;
position: relative;
transition: border-color .2s ease-out;
}
.tm-m-photos-thumb .tm-current {
border: 2px solid #36a3e0;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
cursor: auto;
}
.tm-photos-arrow {
width: 0;
height: 0;
line-height: 0;
font-size: 0;
border: 6px dashed transparent;
border-bottom: 6px solid #36a3e0;
position: absolute;
left: 35px;
filter: alpha(opacity=0);
opacity: 0;
top: -14px;
background: 0 0;
}
.tm-current .tm-photos-arrow {
filter: alpha(opacity=100);
opacity: 1;
}
.tm-m-photos-thumb img {
display: block;
width: 80px;
height: 80px;
cursor: url(../img/T1nTBDFCRbXXbzTk_b-25-20.png), url(http://assets.alicdn.com/img/common/zoom_in.cur), auto;
}
.tm-m-photo-viewer, .tm-m-photo-viewer img, .tm-m-photos-thumb .tm-current img {
cursor: url(../img/T1oq4AFupvXXcu5FDa-20-20.png), url(http://assets.alicdn.com/img/common/zoom_out.cur), auto;
}
.tm-m-photo-viewer {
position: absolute;
margin: 10px 0;
top: -337px;
left: 116px;
/* position: relative;
margin: 10px 0; */
width: 0;
height: 0;
border: 1px solid #ccc;
background: #fff;
padding: 2px;
overflow: hidden;
display: none;
transition: all 0.2s ease-in;
}
.tm-m-photo-viewer-navleft, .tm-m-photo-viewer-navright {
top: 0;
bottom: 0;
position: absolute;
width: 30%;
background: url(http://assets.alicdn.com/s.gif); /*解决IE 下背景透明的空白元素无法触发 click 和 hover 事件*/
}
.tm-m-photo-viewer-navleft {
left: 0;
}
.tm-m-photo-viewer-navright {
right: 0;
}
.tm-m-photo-viewer-navleft i, .tm-m-photo-viewer-navright i{
top: 50%;
margin-top:-24px;
position: absolute;
width: 48px;
height: 48px;
display: none;
}
.tm-m-photo-viewer-navleft i{
left: 0;
background-image: url(../img/arrow-l.png);
}
.tm-m-photo-viewer-navright i{
right: 0;
background-image: url(../img/arrow-r.png);
}
.tm-m-photo-viewer img{
width:100%;
height:100%;
}
//html
<div class="agile-top-grids">
<div class="col-md-12">
<div class="w3l_search">
<form >
<input class="pic" id= "provSelect1" type="text" placeholder="上传网络图片URL" >
<button class="btn btn-default" id="detect">检测</button>
</form>
</div>
<div class="upload" id="upload">
<input type="file" id="upload" >
<a>本地上传</a>
</div>
</div>
<div class="col-md-12" style="text-align: center;color:#999; margin-bottom: 1%;">
<span>提示:可支持PNG、JPG、JPEG、BMP,图片大小不超过4M,长边不大于4096像素,请保证需要识别的部分为图片主体部分</span>
</div>
<div class="col-md-5 agile-bottom-right">
<div class="agile-bottom-grid">
<div class="area-grids-heading">
<h4>原始图片</h4>
</div>
<div id="drop_area" style="position: relative;text-align: center;">
</div>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-5 agile-bottom-left">
<div class="agile-bottom-grid">
<div class="area-grids-heading f-heading">
<h4>识别结果</h4>
</div>
<div class="table-box" style="display:none">
<table class="table table-bordered">
<thead>
<tr>
<td>编号</td>
<td>识别结果</td>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>图像质量检测</td>
</tr>
<tr>
<td>2</td>
<td>图像美观度与清晰度识别,检测图像色彩、构图以及</td>
</tr>
<tr>
<td>3</td>
<td>是否存在模糊、失焦、噪点、锯齿、马賽克等情况</td>
</tr>
<tr>
<td>4</td>
<td>立即使用</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="f-bottom">
<div class="col-md-5 agile-bottom-right" style="border:none">
<div class="tm-m-photos">
<ul class="tm-m-photos-thumb">
<li data-src="./img/01.png">
<b class="tm-photos-arrow"></b>
<img src="./img/01.png">
</li>
<li data-src="./img/02.png">
<img src="./img/02.png">
<b class="tm-photos-arrow"></b>
</li>
<li data-src="./img/03.png">
<img src="./img/03.png">
<b class="tm-photos-arrow"></b>
</li>
<li data-src="./img/04.png">
<img src="./img/04.png">
<b class="tm-photos-arrow"></b>
</li>
</ul>
<div class="tm-m-photo-viewer">
<img src="./img/01.png">
<a class="tm-m-photo-viewer-navleft"><i></i></a>
<a class="tm-m-photo-viewer-navright"><i></i></a>
</div>
</div>
</div>
<div class="col-md-1"></div>
<div class="col-md-5 agile-bottom-left">
<div class="agile-bottom-grid">
<div class="area-grids-heading f-heading">
<h4>JSON</h4>
</div>
<div class="showMessage" style="overflow: auto;">
<pre><code id="json"></code></pre>
</div>
</div>
</div>
</div>
</div>
<script>
$(function () {
$(".tm-m-photos").commentImg({
activeClass: 'tm-current', //缩略图当前状态class,默认'current'
nextButton: '.tm-m-photo-viewer-navright', //向后翻页按钮,默认'.next'
prevButton: '.tm-m-photo-viewer-navleft', //向前翻页按钮,默认'.prev'
imgNavBox:'.tm-m-photos-thumb', //缩略图容器,默认'.photos-thumb'
imgViewBox:'.tm-m-photo-viewer' //浏览图容器,默认'.photo-viewer'
});
})
</script>
//上传本地图片
$(function() {
$("#upload").change(function(e,data) {
var imgBox = e.target;
uploadImg($('#drop_area'), imgBox);
$(".table-box").css("display","block");
$(".tm-m-photo-viewer").css("display","none");
$('#drop_area').html("");
});
function uploadImg(element, tag) {
var file = tag.files[0];
var imgSrc;
if (!/image\/\w+/.test(file.type)) {
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function() {
console.log(this.result);
imgSrc = this.result;
var imgs = document.createElement("img");
$(imgs).css("width","70%");
/* $(imgs).css("height","90px"); */
$(imgs).attr("src", imgSrc);
element.append(imgs);
};
}
})
//上传URL图片
$(function() {
$("#detect").click(function () {
$(".tm-m-photo-viewer").css("display","none");
$('#drop_area').html("");
var imgUrl = $("#provSelect1").val();
$("#drop_area").append("<img style='width:70%;'>");
$("#drop_area").find("img").attr("src",imgUrl) ; //将图片路径存入src中,显示出图片
return false;
});
});
//图片切换
$(function (){
$.fn.commentImg = function(options){
var defaults = {
activeClass: 'current',
nextButton: '.next',
prevButton: '.prev',
imgNavBox:'.photos-thumb',
imgViewBox:'.photo-viewer'
};
var opts = $.extend({},defaults, options);
this.each(function(){
var _this =$(this),
imgNav =_this.find(opts.imgNavBox).children(),
imgViewBox =_this.find(opts.imgViewBox),
prevBtn = _this.find(opts.prevButton),
nextBtn = _this.find(opts.nextButton),
src = '',
img = new Image();
function setViewImg(viewSrc){
img.src = viewSrc;
img.onload = function () {
var imageWidth = img.width;
var imageHeight = img.height;
imgViewBox.show(0,function(){
$(this).css({ "width": "274px", "height": "280px" }).find("img").attr('src', src);
});
}
}
imgNav.on("click",function(){
$(this).toggleClass(opts.activeClass).siblings().removeClass(opts.activeClass);
if($(this).hasClass(opts.activeClass)){
src = $(this).attr('data-src');
setViewImg(src);
}else{
imgViewBox.css({ "width": 0, "height": 0 }).hide();
}
$("#drop_area").find("img").css("display","none");
});
imgViewBox.on("click",function(){
imgNav.removeClass(opts.activeClass);
$(this).css({ "width": 0, "height": 0 }).hide();
});
prevBtn.hover(function () {
var index = imgNav.index(_this.find(opts.imgNavBox).children("." + opts.activeClass));
if (index < 1) {
$(this).css({"cursor":"default"}).children().hide();
} else {
$(this).css({"cursor":"pointer"}).children().show();
}
}, function () {
$(this).css({"cursor":"default"}).children().hide();
});
nextBtn.hover(function () {
var index = imgNav.index(_this.find(opts.imgNavBox).children("." + opts.activeClass));
if (index >= imgNav.length - 1) {
$(this).css({"cursor":"default"}).children().hide();
} else {
$(this).css({"cursor":"pointer"}).children().show();
}
}, function () {
$(this).css({"cursor":"default"}).children().hide();
});
prevBtn.on("click",function (e) {
e.stopPropagation();
var index = imgNav.index(_this.find(opts.imgNavBox).children("." + opts.activeClass));
if (index > 0) {
index--;
imgNav.eq(index).toggleClass(opts.activeClass).siblings().removeClass(opts.activeClass);
src = imgNav.eq(index).attr('data-src');
setViewImg(src);
}
if (index <= 0) {
$(this).css({"cursor":"default"}).children().hide();
}
});
nextBtn.on("click",function (e) {
e.stopPropagation();
var index = imgNav.index(_this.find(opts.imgNavBox).children("." + opts.activeClass));
if (index < imgNav.length - 1) {
index++;
imgNav.eq(index).toggleClass(opts.activeClass).siblings().removeClass(opts.activeClass);
src = imgNav.eq(index).attr('data-src');
setViewImg(src);
}
if (index >= imgNav.length - 1) {
$(this).css({"cursor":"default"}).children().hide();
}
})
})
}
});