一起用代码吸猫！本文正在参与【喵星人征文活动】。
成果展示
用到的技术
从0开始
既然是从0开始，我们直接从创建项目开始搞。前端框架方面，我用的vue.js，直接脚手架快速搭建一个名字叫catface的项目vue create catface,项目比较简单我，vue-cil的配置也尽量简单一点，不需要太多复杂的插件
- css框架我这边选用的是有赞团队开发的 vant 直接搞起
npm install vant
引入组件方面我们尽量按需引入，这里我用的是 babel-plugin-import ，是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。这也是框架推荐的一种方式npm i babel-plugin-import -D，安装完插件后还需要在babelrc的配置文件中新增一些配置（具体配置请移步至vant官网-快速上手 )
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
- css预编译器我这边采用的是less，继续安装
npm install less less-loader --save-dev
这里推荐指定版本号去安装，不然有可能会报错（贴一张我安装的版本）
- axios安装，用来请求百度AI的接口
npm instasll axios
百度AI识别准备工作
- 注册百度账号，用于登录百度AI开放平台。我们注册个人账户就可以，实名认证后会送10000次的接口请求次数，足够我们去测试了
- 创建一个应用，应用是调用API服务的基本操作单元，应用创建成功后我们可以拿到对应的API Key及Secret Key，进行接口调用操作，及相关配置（下图是我自己创建的应用）
代码部分
具体流程：
- 通过API Key和Secret Key获取的access_token
- 调用动物识别接口 下面我只贴出来js的代码部分
<script>
import axios from "axios"
import Qs from 'qs'
export default {
data() {
return {
fileList: [],
access_token: '',
image: '',
loading: false,
catname: '',
names:[]
}
},
methods: {
afterRead(file) {
console.log(file)
this.image = file.content.split(',')[1]
},
//获取Access Token
getToken() {
axios({
url: '/api/oauth/2.0/token',
method: 'post',
params: {
grant_type: 'client_credentials', //固定写法
client_id: '', //创建应用后会有
client_secret: ''//创建应用后会有
}
})
.then(res => {
console.log(res)
this.access_token = res.data.access_token
})
.catch(err => {
console.log(err)
})
},
//开始识别
discern() {
this.loading = true
let data = {
image: this.image
}
axios({
url: '/api/rest/2.0/image-classify/v1/animal',
method: 'post',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
params: {
access_token: this.access_token
},
data: Qs.stringify(data)
})
.then(res => {
console.log("识别成功", res)
this.loading = false
res.data.result.map(item=>{
this.names.push(item.name)
})
})
.catch(err => {
console.log("识别失败", err)
})
}
},
mounted() {
this.getToken()
},
};
</script>
注意事项
- 跨域问题
aip.baidubce.com/oauth/2.0/t… -- 获取Access Token
aip.baidubce.com/rest/2.0/im… -- 识别接口
以上2个是由百度AI提供api接口，在开始写demo前我通过Postman调试了一下没有任何问题，但是当我开始写在本地调试时候，就会出现跨域问题。这边我是在vue.config.js中配置了代理，具体代码如下：
//vue.config.js
module.exports = {
devServer:{
proxy:{
"/api":{
target:'https://aip.baidubce.com',
changeOrigin:true,
ws:true,
pathRewrite:{
"^/api":''
}
}
}
}
}
- base64转码问题
在识别接口的官网说明中，"image"这个参数。注意：图片需要base64编码、去掉编码头后再进行urlencode。
afterRead这个回调方法中我们可以拿到图片完整的base64编码，所以我们需要去掉编码头
afterRead(file) {
console.log(file)
this.image = file.content.split(',')[1]
},
结语
至此一个猫脸识别demo就搞定了，是不是非常简单。当然还有很多可以优化的地方。欢迎各位掘友点赞支持和讨论
