ocrad+glfx+jcrop通过摄像头拍照识别照片文字转换成文字效果代码
代码语言:html
所属分类:其他
代码描述:ocrad+glfx+jcrop通过摄像头拍照识别照片文字转换成文字效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/jquery.Jcrop.css"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> /* Space out content a bit */ body { padding-top: 20px; padding-bottom: 20px; } /* Everything but the jumbotron gets side spacing for mobile first views */ .header, .marketing, .footer { padding-right: 15px; padding-left: 15px; } /* Custom page header */ .header { border-bottom: 1px solid #e5e5e5; } /* Make the masthead heading the same height as the navigation */ .header h3 { padding-bottom: 19px; margin-top: 0; margin-bottom: 0; line-height: 40px; } /* Custom page footer */ .footer { padding-top: 19px; color: #777; border-top: 1px solid #e5e5e5; } /* Customize container */ @media (min-width: 768px) { .container { max-width: 730px; } } .container-narrow > hr { margin: 30px 0; } /* Main marketing message and sign up button */ .jumbotron { text-align: center; border-bottom: 1px solid #e5e5e5; } .jumbotron .btn { padding: 14px 24px; font-size: 21px; } .jumbotron figure { padding-top: 10px; padding-bottom: 10px; } .jumbotron blockquote { border-left: 5px solid gray; text-align: left; } /* Supporting marketing content */ .marketing { margin: 40px 0; } .marketing p + h4 { margin-top: 28px; } /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { /* Remove the padding we set earlier */ .header, .marketing, .footer { padding-right: 0; padding-left: 0; } /* Space out the masthead */ .header { margin-bottom: 30px; } /* Remove the bottom border on the jumbotron for visual effect */ .jumbotron { border-bottom: 0; } } body.step1 #step2, body.step1 #step3 { display: none; } body.step2 #step1, body.step2 #step3 { display: none; } body.step3 #step1, body.step3 #step2 { display: none; } .alert { display: none; } .jumbotron #step1 video, .jumbotron #step2 figure > img, .jumbotron #step3 figure > canvas { max-width: 100%; } .jumbotron .tooltip { opacity: 1; } .jumbotron .popover { width: 272px; } .popover img { width: 100%; } #step1 figure.not-ready video { border: solid gray 1px; width: 100%; height: 300px; } #step1 figure.not-ready { position: relative; } #step1 figure.not-ready:after { content: 'Please enable the camera.'; position: absolute; left: 50%; top: 50%; margin-left: -85px; margin-top: -10px; } </style> </head> <body class="step1"> <div class="container"> <div class="alert alert-danger"><strong>Oops!</strong> <span></span></div> <div class="jumbotron"> <div id="step1"> <h1><i class="glyphicon glyphicon-camera"></i></h1> <p class="lead"> 拍一张带有比较大含有英文的照片 </p> <figure class="not-ready"> <video autoplay></video> </figure> <button class="btn btn-lg btn-success" disabled id="takePicture">拍照</button> </div> <div id="step2"> <h1><i class="glyphicon glyphicon-pencil"></i></h1> <p class="lead"> 剪裁图片让文字更加清晰可见 <i class="glyphicon glyphicon-question-sign help" data-placement="bottom" data-content="<img src='img/step2.png' />" data-html="true"></i> </p> <figure> <canvas style="display:none"></canvas> <img src=""/> </figure> <p>Brightness: <input type="range" min="0" max="100" id="brightness" value="20"></p> <p>Contrast: <input type="range" min="0" max="100" id="contrast" value="90"></p> <button class="btn btn-lg btn-success" id="adjust" disabled>Done</button> </div> <div id="step3"> <h1><i class="glyphicon glyphicon-text-height"></i></h1> <p class="lead">图中的文字如下:</p> <figure> <canvas></canvas> </figure> <blockquote> <p id="result"></p> <footer></footer> </blockquote> <button class="btn btn-lg btn-default" id="go-back">Go back</button> <button class="btn btn-lg btn-default" id="start-over">Start over</button> </div> </div> <div class="header"> <ul class="nav nav-pills pull-right"> <li class="active"><a href="#" data-step="1">#1 <i class="glyphicon glyphicon-camera"></i></a></li> <li class="disabled"><a href="#" data-step="2">#2 <i class="glyphicon glyphicon-pencil"></i></a></li> <li class="disabled"><a href="#" data-step="3">#3 <i class="glyphicon glyphicon-text-height"></i></a></li> </ul> <h3 class="text-muted">JavaScript OCR 演示</h3> </div> </div> <!-- /container --> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.1.11.min.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/modernizr.2.7.1.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bootstrap-3.3.4.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery.Jcrop.0.9.12.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/ocrad.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/glfx.min.js"></script> <script > (function () { var video = document.querySelector('video'); var pictureWidth = 640; var pictureHeight = 360; var fxCanvas = null; var texture = null; function checkRequirements() { var deferred = new $.Deferred(); //Check if getUserMedia is available if (!Modernizr.getusermedia) { deferred.reject('Your browser doesn\'t support getUserMedia (according to Modernizr).'); } //Check if WebGL is available if (Modernizr.webgl) { try { //setup glfx.js fxCanvas = fx.canvas(); } catch (e) { deferred.reject('Sorry, glfx.js failed to initialize. WebGL issues?'); } } else { deferred.reject('Your browser doesn\'t support WebGL (accor.........完整代码请登录后点击上方下载按钮下载查看
网友评论0