We have to look at the developer interface documentation oh
Interface documentation https://ai.baidu.com/docs#/ImageClassify-API/71e05fb6
How to create an application. Remember accesstoken get access guidelines have to look at the document oh. Officials have given graphic tutorials. Xiaoshuai will not repeat here the explanation.
Look at this picture is not clear https://my.oschina.net/xshuai/blog/3075992
--------------------------------------------split line---- ----------------------------------------
- Create your own Baidu smart little program
Official website link https://smartprogram.baidu.com/developer/index.html
- Applet name information to fill in
Oh, better not name need to review the same name, choose their own small a program of LOGO, Introduction, scope of services (be sure to select the correct oh), to find their own label targeted keywords add to
- View your applets
Settings - set the record developed their own small program id appkey, appsecret and other important information backup
Continue down. Find domain name server and configure the interface Baidu domain names and pictures ai base64 transfer of the domain name https://www.ydxiaoshuai.cn https://aip.baidubce.com
- Development tool to create small programs
Fill in your own applet appid, the name of the project directory Click Finish to
- Small start writing program code
Pictures turn base64 Baidu smart little program No direct available components or api. Xiaoshuai order to facilitate everyone. It encapsulates an online http interface for people to use. Interface Description Address https://www.kancloud.cn/ydxiaoshuai/image2base64/1170322
Other methods first to write interfaces and other tools
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～～～
作者：小帅