版权声明:本文为博主原创文章,禁止转载。 https://blog.csdn.net/qq_40147863/article/details/82901894
MUI框架-11-MUI前端+php后台接入百度文字识别API
- 这里后台不止一种,Python,Java,PHP,Node,C++,C# 都可以
- 这里使用的是 php 来介绍,已经解决所有问题,因为处理很多错误,可能会比较复杂,请大家坚持按步骤来,
- 大概流程就是:前端发送 Ajax 请求,php 后台实现文字识别,并将识别后的文字返回到前端页面
- 先放上效果图:
(一)准备阶段
- 1.到百度云官网注册,几秒就可以,这个不需要审核,不像腾讯开发者认证好几天,注册然后登陆
- 百度云官网:https://cloud.baidu.com/?from=console
- 2.按照下面截图,产品>人工智能>文字识别,我们找到文字识别:
- 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-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-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 class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">百度文字识别</h1>
</header>
<div class="mui-content">
<br>
<button id="queren" type="button" style="background-color: brown;color: #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 框架
- 本笔记不允许任何个人和组织转载