仿 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();
                }
            })
                
        })
    
    }

});