手册   游戏   WEB   字典   单词   在线工具  

MUI 拍照或者相册上传 调用百度识别身份证 api [MUI,API]

html 代码

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  6.     <title></title>
  7.     <link href="CSS/mui.min.css" rel="stylesheet"/>
  8.     <style type="text/css">
  9.         *{margin: 0px;padding: 0px;}
  10.         .imgs-box{width: 300px;height: 200px;margin: 20px auto;overflow: hidden;border: 1px solid #ccc;}
  11.         .imgs-box img{height: 100%;display: block;margin: 0px auto;border: none;}
  12.     </style>
  13. </head>
  14. <body>
  15.     <header class="mui-bar mui-bar-nav">
  16.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  17.         <h1 class="mui-title"> 标题 </h1>
  18.     </header>
  19.     <div class="mui-content">
  20.         <div class="imgs-box" id="headImage">
  21.             <img src=""alt="" id="choosedpic"/>
  22.         </div>
  23.         <div class="imgs-text">
  24.             <form action=""method="">
  25.                 <input type="text" name=""id="num1"value="" placeholder="自动识别身份证姓名"/>
  26.                 <input type="text" name=""id="num2"value="" placeholder="自动识别身份证号码"/>
  27.             </form>
  28.         </div>
  29.     </div>
  30. </body>
  31.     <script src="js/mui.min.js"></script>
  32.     <script type="text/javascript" charset="utf-8">
  33.         mui.init();
  34.         // 点击头像触发
  35.         document.getElementById("headImage").addEventListener('tap',function(){
  36.             if(mui.os.plus){
  37.                 var a=[{title:"拍照"},{title:"从手机相册选择"}];
  38.                 plus.nativeUI.actionSheet({
  39.                     title:"修改用户头像",
  40.                     cancel:"取消",
  41.                     buttons:a
  42.                 },function(b){/*actionSheet 按钮点击回调事件 */
  43.                     switch(b.index){
  44.                         case 0:
  45.                             break;
  46.                         case 1:getImage();// 拍照
  47.                             break;
  48.                         case 2:galleryImg();// 打开相册
  49.                             break;
  50.                         default:
  51.                             break;
  52.                     }
  53.                 });
  54.             }
  55.         },false);
  56.         // 拍照
  57.         function getImage() {
  58.             var c = plus.camera.getCamera();
  59.             c.captureImage(function(e) {
  60.                 plus.io.resolveLocalFileSystemURL(e, function(entry) {
  61.                     var s = entry.toLocalURL();
  62.                     console.log(s)
  63.                     uploadHead(s); /* 上传图片 */
  64.                 }, function(e) {
  65.                     console.log("读取拍照文件错误:" + e.message);
  66.                 });
  67.                 plus.gallery.save( e );
  68.             }, function(s) {
  69.                 console.log("error" + s);
  70.             }, {
  71.                 filename: "_doc/"
  72.             })
  73.         }
  74.         // 从相册添加文件
  75.         function galleryImg(){
  76.             plus.gallery.pick(function(path){
  77.                  uploadHead(path);
  78.             });
  79.         }
  80.         // 上传头像图片
  81.         // 身份证姓名
  82.         var inputText = document.getElementById("num1");
  83.         // 身份证号码
  84.         var inputText2 = document.getElementById("num2");
  85.         var mainImage = document.getElementById("choosedpic");
  86.         function uploadHead(imgPath) {
  87.             mainImage.src = imgPath;
  88. //          mainImage.style.width = "300px";
  89. //          mainImage.style.height = "200px";
  90.             var image = new Image();
  91.             image.src = imgPath;
  92.             image.onload = function() {
  93.                 var imgData = getBase64Image(image).toString();
  94.                 /* 在这里调用上传接口 */
  95.                 mui.ajax("https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=24.6de055adc677dd1b05b655448de8e979.2592000.1512612354.282335-10326617", {
  96.                     data: {
  97.                         detect_direction:true,
  98.                         id_card_side:"front",
  99.                         image: imgData
  100.                     },
  101.                     headers:{'Content-Type':'application/x-www-form-urlencoded'},
  102.                     dataType: 'json',
  103.                     type: 'post',
  104.                     timeout: 5000,
  105.                     success: function(data) {
  106. //                      plus.nativeUI.showWaiting("正在为您自动识别中...")
  107.                         console.log(JSON.stringify(data))
  108.                         // 当图片上传不正确时, 如上传非身份证, 或者无法识别身份证
  109.                         if(data.error_code==216633)
  110.                         {
  111.                             mui.alert("无法识别身份证, 请检查是否正确上传了身份证照片!")
  112.                         }
  113. inputText.value=data.words_result['姓名'].words;
  114. inputText2.value=data.words_result['公民身份号码'].words;
  115. mui.alert('已经为您识别完毕','温馨提示','确认');
  116. //                      plus.nativeUI.closeWaiting();
  117.                         console.log('上传成功');
  118.                     },
  119.                     error: function(xhr, type, errorThrown) {
  120.                         console.log('网络异常');
  121.                         mui.toast('网络异常, 请稍后再试!');
  122.                     }
  123.                 });
  124.             }
  125.     }
  126.         // 将图片压缩转成 base64
  127.         function getBase64Image(img) {
  128.             var canvas = document.createElement("canvas");
  129.             var width = img.width;
  130.             var height = img.height;
  131.             if (width> height) {
  132.                 if (width> 500) {
  133.                     height = Math.round(height *= 500 / width);
  134.                     width = 500;
  135.                 }
  136.             } else {
  137.                 if (height> 500) {
  138.                     width = Math.round(width *= 500 / height);
  139.                     height = 500;
  140.                 }
  141.             }
  142.             canvas.width = width;   /* 设置新的图片的宽度 */
  143.             canvas.height = height; /* 设置新的图片的长度 */
  144.             var ctx = canvas.getContext("2d");
  145.             ctx.drawImage(img, 0, 0, width, height); /* 绘图 */
  146.             var dataURL = canvas.toDataURL("image/png", 0.8);
  147.             console.log(dataURL);
  148.             var newdataurl=dataURL.substring(dataURL.indexOf(",")+1);
  149.             console.log(newdataurl)
  150.             return newdataurl;
  151.         }
  152.     </script>
  153. </html>

来源: http://www.qdfuns.com/article/42561/7fd0cc47a381f13248cbad7c14af956c.html


与本文相关文章

  1. HTML5 file API 加 canvas 实现图片前端 JS 压缩并上传
  2. vue 项目 封装 API
  3. 百度地图API自动定位和3种导航
  4. Web 音频 API
  5. 百度地图 API 图标, 文本, 图例与连线
  6. 百度地图API应用
  7. HTML5 文件上传 FileReader API
  8. 基于百度地图 JavaScript API, 员工住址统计
这个转base64会报错
  • 2020-03-26
更多





黑ICP备17005318号-1