您现在的位置是:网站首页> 内容页

MUI框架-11-MUI前端 +php后台接入百度文字识别API

  • 老子有钱lzyq88
  • 2019-01-27
  • 438人已阅读
简介MUI框架-11-MUI前端+php后台接入百度文字识别API这里后台不止一种,Python,Java,PHP,Node,C++,C#都可以这里使用的是php来介绍,已经解决所

MUI框架-11-MUI前端 +php后台接入百度文字识别API

这里后台不止一种,Python,Java,PHP,Node,C++,C# 都可以这里使用的是 php 来介绍,已经解决所有问题,因为处理很多错误,可能会比较复杂,请大家坚持按步骤来,大概流程就是:前端发送 Ajax 请求,php 后台实现文字识别,并将识别后的文字返回到前端页面先放上效果图:

(一)准备阶段

1.到百度云官网注册,几秒就可以,这个不需要审核,不像腾讯开发者认证好几天,注册然后登陆百度云官网:https://cloud.baidu.com/?from=console2.按照下面截图,产品>人工智能>文字识别,我们找到文字识别:3.点击【立即使用】:4.然后点击【创建应用】,填写名称,描述,非常快,不需要审核5.这里我们主要是为了得到 API Key 和 Secret Key

(二)生成签名

这里不必按照官方文档写的用服务器去发请求,设置一堆请求头直接将下面地址替换自己刚才的API Key 和 Secret Key,然后打开浏览器访问:

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=【官网获取的AK】&client_secret=【官网获取的SK】然后会返回 json 格式的数据,access_token: 要获取的Access Token;【注意】:第二行可能还有,这个要拷贝下来,存起来备用温馨提示:Access Token的有效期为30天(以秒为单位),请您集成时注意在程序中定期请求新的token

在 HBuilder 搭建 mui 项目

如果你还没有在 HBuilder 配置 php 服务器,请参考:HBuilder+wampserver配置PHP外置web服务器在 HBuilder 【新建】>【移动app】>【模板选择含MUI的模板】打开 index.html 文件新建目录命名PHP,新建 test.php 文件,在目录下再新建 img 目录【特别注意】:新手的话你要知道请求 php 服务器,是绝对不允许通过什么 ../ 返回上级目录,下级目录访问的,因为php 服务器的端口和你 HTML web 服务器是不一样的,我就别这个坑过,要是想在感觉上实现前后端分离,也可以创建一个新的项目,这里没必要因为只有一个 php 文件现在我们有了下面目录了打开 test.php 粘贴下面代码1.替换自己从浏览器获取的access_token,2.替换自己图片路径:test.php 文件代码:

<?php/** * 发起http post请求(REST API) 并获取REST请求的结果 * @param string $url * @param string $param * @return - http response body if succeeds else false. * */ function request_post($url = "" $param = ""){ if (empty($url) || empty($param)) { return false } $postUrl = $url $curlPost = $param // 初始化curl $curl = curl_init() curl_setopt($curl CURLOPT_URL $postUrl) curl_setopt($curl CURLOPT_HEADER 0) // 要求结果为字符串且输出到屏幕上 curl_setopt($curl CURLOPT_RETURNTRANSFER 1) curl_setopt($curl CURLOPT_SSL_VERIFYPEER false) // post提交方式 curl_setopt($curl CURLOPT_POST 1) curl_setopt($curl CURLOPT_POSTFIELDS $curlPost) // 运行curl $data = curl_exec($curl) curl_close($curl) return $data}//替换自己从浏览器获取的access_token $url = "https://aip.baidubce.com/rest/2.0/ocr/v1/accurate_basic?access_token=【自己的access_token】"//图片只能是本题图片,替换自己的图片$img = file_get_contents("img/chi1.jpg")$img = base64_encode($img)$bodys = array( "image" => $img)$res = request_post($url $bodys)echo $res//var_dump($res)?>然后我们就可以写前端页面了,打开 index.html,粘贴下面代码:替换自己 test.php 文件在 web 浏览器的路径,然后把本机127.0.0.1替换成 ipv4地址,cmd 输入ipv4查看 截图:index.html 文件代码

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-widthinitial-scale=1minimum-scale=1maximum-scale=1user-scalable=no" /> <title></title> <script src="js/mui.min.js"></script> <link href="css/mui.min.css" rel="stylesheet" /> <script type="text/javascript" charset="utf-8"> mui.init() </script> </head> <body> <header > <a ></a> <h1 >百度文字识别</h1> </header> <div > <br> <button id="queren" type="button" style="background-color: browncolor: #eeeeee">发送请求</button> <!--空的h2 用来存放返回的数据--> <hr> <p id="res" style="font-size: larger"> </p> </div> <!--处理请求--> <script type="text/javascript"> var upload = function(c d) { "use strict" var $c = document.querySelector(c) $d = document.querySelector(d) file = $c.files[0] //预览框 reader = new FileReader() reader.readAsDataURL(file) reader.onload = function(e) { $d.setAttribute("src" e.target.result) } } var btn = document.getElementById("queren") //监听点击事件 btn.addEventListener("tap" function() { //ajax //替换自己 test.php 文件在 web 浏览器的路径 //用自己的 ipv4 地址,cmd 获取ipconfig 获取 mui.ajax("http://10.160.62.75/myphp/mui/php/test.php" { dataType: "json" //服务器返回json格式数据 type: "get" //HTTP请求类型 timeout: 10000 //超时时间设置为10秒; headers: { "Content-Type": "application/json" } success: function(data) { //服务器返回响应,根据响应结果,分析是否登录成功; //这里要对自己的数据进行处理 var html = " " for(var i = 0 i < data.words_result_num i++){ html = html + data.words_result[i].words } console.log(html) document.getElementById("res").innerHTML = html } error: function(xhr type errorThrown) { //异常处理; console.log(type) } }) }) //触发submit按钮的点击事件 mui.trigger(btn "tap") </script> </body></html>

运行

【注意】:只能在安卓手机或者模拟器运行才,app 前端页面才有效关于模拟器:MUI框架-07-HBuilder+夜神安卓模拟器 配置

更多文章链接:MUI 框架


本笔记不允许任何个人和组织转载

文章评论

Top