私たちは、開発者インタフェースのドキュメントを見ているオハイオ州
インターフェイスドキュメントhttps://ai.baidu.com/docs#/ImageClassify-API/71e05fb6
アプリケーションを作成する方法。アクセスガイドラインは文書ああ見ている得るaccesstoken覚えておいてください。当局は、グラフィックのチュートリアルを与えています。小帥は、ここで説明を繰り返すことはしません。
この絵を見てすることは明らかではないが、 https://my.oschina.net/xshuai/blog/3075992
--------------------------------------------分割ライン---- ----------------------------------------
- あなた自身のBaiduのスマート小さなプログラムを作成します。
公式サイトリンクhttps://smartprogram.baidu.com/developer/index.html
- アプレット名情報が記入します
ああ、より良い、同じ名前を確認LOGO、はじめに、サービスの範囲（OH正しいを選択してください）の独自の小さなプログラムを選択し、自分のラベルターゲットを絞ったキーワードを見つけるためにする必要はない名前に追加
- あなたのアプレットを見ます
設定 - レコードは、自分の小さなプログラムIDのAPPKEY、appsecretおよびその他の重要な情報のバックアップを開発した設定
ダウン続行。ドメインネームサーバを見つけ、インタフェースBaiduのドメイン名や写真を設定するには、ドメイン名のbase64で転送を愛 https://www.ydxiaoshuai.cn https://aip.baidubce.com
- 小さなプログラムを作成するための開発ツール
あなた自身のアプレットAPPIDに記入し、プロジェクトディレクトリの名前は、[完了]をクリックし
- 小さな書き出しプログラムコード
写真は、base64、スマート小さなプログラムは直接利用可能なコンポーネントやAPIをBaiduのターン。 小帥順序は皆を容易にします。それは、人々が使用するためのオンラインHTTPインターフェースをカプセル化します。 インターフェイス説明住所https://www.kancloud.cn/ydxiaoshuai/image2base64/1170322
他の方法は、第一インターフェイスと他のツールを作成します
baiduai.js
/**
* 调用百度红酒识别示例代码 baiduai.js
*/
//图片转base64接口
let img2base64Url = 'https://www.ydxiaoshuai.cn/image/convert/base64/v1';
let accessToken = ''//自己的accessToken 根据实际情况可以进行封装 自动获取token
let redwineUrl = 'https://aip.baidubce.com/rest/2.0/image-classify/v1/redwine';//红酒识别接口
//红酒接口 图片数据 返回结果
let redwineRequest = (base64Img,callback)=>{
//拼接接口body参数
let params = {
image:base64Img
}
//发送接口请求
swan.request({
url: redwineUrl + '?access_token=' + accessToken,
data:params,
header: {
'content-type': 'application/x-www-form-urlencoded'
},
method: 'POST',
success:function(res){
callback.success(res.data)
},
fail: function (res) {
if (callback.fail)
callback.fail()
}
})
}
function getImg2base64(){
return img2base64Url;
}
//暴露出去的接口&参数
module.exports = {
redwineRequest: redwineRequest,
getImg2base64: getImg2base64
}
- 编写页面样式及相关代码
- 页面index.swan
页面需要一个上传图片的按钮 和图片回显的区域 还有接口识别返回的数据显示的区域 带html标签代码 老是被自动解析。只能图片示例了
样式index.css
给一些稍微友好 好看的ui样式
.image {
width: 100%;
height: 360rpx;
}
button{
font-family: 微软雅黑;
}
text{
font-family: 微软雅黑;
}
.page-body-info {
display: flex;
box-sizing: border-box;
padding:60rpx;
height:840rpx;
border-top: 2rpx solid #D9D9D9;
border-bottom: 2rpx solid #D9D9D9;
align-items: center;
justify-content: center;
}
.faceInfo{
font-size: 28rpx;
display:block;
margin:0 auto;
margin-left: 33%;
}
.faceInfoValue{
color: #1BA0E1;
letter-spacing:0px;
}
.chooseImg {
display:block;
margin:0 auto;
color: rgb(255, 255, 255);
font-size: 40rpx;
font-family: 微软雅黑;
width: 400rpx;
height: 100rpx;
text-align: center;
line-height: 90rpx;
border-radius:50rpx;
background-color:#3366FF;
margin-top:10px;
}
.img_wrap {
width: 750rpx;
height: 620rpx;
background: #ececec;
}
image {
width: 100%;
height: 100%;
max-height: 1
}
.msg {
margin: 20rpx 0;
text-align: center;
}
.table {
margin-top: 10rpx;
border: 0px solid darkgray;
}
.tr {
display: flex;
width: 100%;
justify-content: center;
height: 80rpx;
}
.td {
font-size: 28rpx;
width:40%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
}
.bg-w{
}
.bg-g{
background: white;
}
.th {
font-size: 28rpx;
width: 48%;
justify-content: center;
background: #3366FF;
color: #fff;
display: flex;
height: 80rpx;
align-items: center;
}
.inner_text{
font-size: 36rpx;
color: #1BA0E1;
font-family: 微软雅黑;
word-break: normal;
word-wrap: break-word;
}
.out_text{
margin-top:20rpx;
margin-left: 10rpx;
margin-right: 10rpx;
border: 1rpx solid rgb(238, 238, 238);
padding:10rpx 10rpx;
font-size: 36rpx;
font-family: 微软雅黑;
}
- 编写页面处理代码
需要上传图片到小帅的图片转base64接口。 返回base64数据。再给接口进行识别。 返回数据进行页面渲染。步骤不是很多哦
var app = getApp();
//引用封装的工具类方法、图片转base64接口地址
var redWine = require('../../utils/baiduai.js');
var img2base64Url = redWine.getImg2base64();
Page({
data: {
title: '酒知识 一步即知',
result:null,
img:""
},
uploads: function() {
var that = this;
swan.chooseImage({
count: 1,
sizeType: ['compressed'],
success: res => {
let image = "";
if(res.tempFiles[0].size > 4096*1024){
console.info('jinlaile ');
swan.showToast({
title: '图片文件过大哦',
icon:'none',
mask:true,
duration:1500
});
}else{
image = res.tempFilePaths[0];
}
that.setData({
img:image
}),
swan.showLoading({
title: '信息正在赶来的路上',
mask: true
}),
//上传图片进行base64转换
swan.uploadFile({
url: img2base64Url,
filePath: image,
name: 'file',
success:function(res){
var data = res.data;
console.info('图片转base64返回的结果：'+data.code);
//如果成功，进行调用红酒识别接口
if(data.code==200){
redWine.redwineRequest(data.data.base64,{
//接口返回数据。对数据进行赋值
success(res){
swan.hideLoading();
that.setData({
result:res.result
})
console.info(res)
},
fail(res){
swan.hideLoading();
swan.showModal({
title: '识别失败',
content: '稍后再试一试'
});
}
})
} else {
swan.showModal({
title: '图片转换出错',
content: '图片转换出错'
});
}
}
});
}
});
},
});
- 准备图片进行功能测试
- 红酒图
- 小程序演示图
- 上传代码进行发布
- 上传代码
版本号、描述 自己定义即可 最低基础库 需要选择哦
- 提交审核
开发管理-开发版本 提交审核 也可以选为体验版 供部分人员优先体验
测试账号 如果没有 填写 无 即可 对自己版本的描述 自己编写即可 提交审核即可
--------------------------------------------分割线--------------------------------------------
本次分享end～～～
作者：小帅