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 框架

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

转载于:https://www.cnblogs.com/xpwi/p/9726363.html

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

unity接入百度人体识别
unity接入百度人体识别 1.去百度下载SDK 复制AipSdk.dll到工程复制Newtonsoft.Json.dll到工程自己按照unity版本,选择2.0,3.5,还是4.0的dll 2. ...
uni-app之接入百度OCR识别身份证(微信小程序版本)
本文为uni-app接入百度OCR识别身份证号,话不多说,直接上代码: 1. 第一步注册百度智能云账号,选择文字识别,创建应用,获取Api Key 与 Secret Key(下面要用到): 2.第二步 ...
移动app开发mui框架之mui.init()和mui.plusReady()
在介绍mui之前先简单介绍下html标准的发展 1)html4.0:早期的html4.0是对浏览器标记语言解析的规范,在app开发中我们通常使用html5: 2)html5:是万维网的核心语言.标准通 ...
PHP接入图片文字识别AIP
科技的发展,时代的进步,各大行业的需求,需要一些特殊的功能,图片文字识别就是其中的一个. 例如:上传身份证或者车牌号识别里面的信息方法一:使用文字识别的API: 第一步:新手接入指南 http ...
mui框架android,mui框架安卓离线打包高级应用
mui离线打包功能可以通过插件的方式让js和原生代码通信,以达到调用第三方原生sdk等目的,但有些第三方原生sdk需要在activity的生命周期里调用某些方法进行初始化.释放资源等操作,这就没法通过 ...
使用MUI框架构建App请求http接口实例
简介最近在看Dcloud的MUI框架,MUI封装了android.ios等多个平台的原生接口,达到开发一个项目,采取不同打包方式,生产多种平台的app. 无可厚非,对于从事java web开发的工程 ...
mui框架手机端APP开发
最近项目繁忙一直没有时间回顾,此次梳理一下利用mui框架进行手机端app的开发的具体操作. 首先介绍一下我们需要用到的轻量级开发工具HBuilder,HBuilder最主要的优点就是快 ...
百度翻译 API 的申请与百度通用翻译 API 的接入
百度翻译 API 的申请与百度通用翻译 API 的接入申请进入百度翻译开放平台,选择立刻使用. 选择我的服务,开通通用翻译,填信息后秒过. 建议实名认证,提高免费额度. 通过后,可以在开 ...
MUI前端框架，MUI返回上一页并刷新
文章目录前言一.引入库二.使用步骤 1.父界面index.html 2.子界面b.html 总结前言 MUI前端框架文档:https://dev.dcloud.net.cn/mui/ui/ 一 ...
app端前端框架对比 - Mui与ionic、Cordova 、Weex、React Native对比
1.1.1.介绍: mui是最接近原生App体验的前端框架. 极小:100k的js文件,60k的css文件.原生编写,不依赖任何三方框架极强:xcode和Android studio里所有原生控件都 ...

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

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

（一）准备阶段

（二）生成签名

在 HBuilder 搭建 mui 项目

运行

更多文章链接：MUI 框架

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

最新文章

热门文章