动物识别
这里写目录标题
本文介绍如何接入百度图像识别
例子为动物识别
创建项目
首先创建好一个vue项目，或者H5普通项目都可以
百度AI开放平台申请应用
进入控制台
没有注册的需要注册认证
记得看手册哦
手册入口:入口
获取 Access Token
可以在浏览器输入
https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=API KEY&client_secret=Secret Key
我用的火狐浏览器
这里拿到Access Token
发送POST请求可以
效果如下
发送请求
用POSTMAN或者别的调试软件发送POST请求，也可以用页面直接请求
在VUE中 我们使用AXIOS
此处不封装axios
import axios from "axios";
方便讲解直接引入使用，实际使用要封装
官方文档这样说明
<div>
<input
type="file"
accept="image/*"
@change="toGOs($event)"
id="file"
/><br />
<canvas id="canvas"></canvas>
<p>{
{ name }}</p>
</div>
页面代码
图片需要转base64且去掉编码头后再进行urlencode后上传
图片尺寸过大也不行
我们将图片压缩
压缩原理 大图片画到小画布 成小图片
推荐:测试时可以调用
站长工具在线图片转base64
站长工具urlencode编码
第一步先上传图片文件
let file = event.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
压缩图片
压缩原理 大图片画到小画布 成小图片
异步加载在reader.onload中
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
canvas.width = 100;
canvas.height = (100 * image.height) / image.width ;
context.drawImage(image, 0, 0, 100, (100 * image.height) / image.width);
大的图片按比例压缩成宽100，高*比例,没超过限制的可以不压缩，加个图片宽高判断即可，本次统一压缩
图片转base64,去头，编码
let d = canvas.toDataURL();//base64
let urlcode = d.substring(reader.result.indexOf(","));//去头
let encodeurl = encodeURIComponent(this.urlcode);//编码
提交数据处理数据
提交数据
axios
.post(
"https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=你的Access Token" + encodeurl
)
提交并处理数据
收到的数据是这样的
我们只显示第一个，想多显示就多提取数据就行
axios
.post(
"https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=你的Access Token" + encodeurl
).then(res => {
this.name = res.data.result[0].name;
});
测试写的完整代码
<template>
<div>
<input
type="file"
accept="image/*"
@change="toBase64s($event)"
id="file"
/><br />
<canvas id="canvas"></canvas>
<p>{
{ name }}</p>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "ind",
data() {
return {
srcs: "",
urlcode: "",
name: ""
};
},
methods: {
toBase64s(event) {
// console.log(event.target.files)
let file = event.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.srcs = reader.result;
let image = new Image();
image.src = this.srcs;
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
canvas.width = 100;
canvas.height = (100 * image.height) / image.width ;
context.drawImage(image, 0, 0, 100, (100 * image.height) / image.width);
let d = canvas.toDataURL();
this.urlcode = d.substring(reader.result.indexOf(","));
axios
.post(
"https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=xxxxxx&image=" +
encodeURIComponent(urlcode)
)
.then(res => {
this.name = res.data.result[0].name;
});
};
}
},
mounted() {
}
};
</script>
<style scoped></style>
可能有点不准，毕竟用的免费版的，其实我拍的是鸭子和鹅的混合图片
HTML版本
思理和vue一样
效果
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div>
<input
type="file"
accept="image/*"
onchange="toBase64s()"
id="file"
/><br />
<canvas id="canvas"></canvas>
<p id="names"></p>
</div>
<script type="text/javascript">
function toBase64s() {
// console.log(event.target.files)
let file = document.getElementById("file").files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
let srcs = reader.result;
let image = new Image();
image.src = srcs;
// console.log(image.style.height+"+"+image.width)
let canvas = document.getElementById("canvas");
let context = canvas.getContext("2d");
canvas.width = 100;
canvas.height = (100 * image.height) / image.width ;
context.drawImage(image, 0, 0, 100, (100 * image.height) / image.width);
let d = canvas.toDataURL();
console.log(d);
let urlcode = d.substring(reader.result.indexOf(","));
axios
.post(
"https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=xxxxxx&image=" +
encodeURIComponent(urlcode)
)
.then(res => {
document.getElementById("names").innerText = res.data.result[0].name;
});
};
}
</script>
</body>
</html>
大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：https://blog.csdn.net/qq_42027681。
未经本人允许，禁止转载
后续会推出
前端：vue入门 vue开发小程序 等
后端： java入门 springboot入门等
服务器：mysql入门 服务器简单指令 云服务器运行项目
python：推荐不温卜火 一定要看哦
一些插件的使用等
大学之道亦在自身，努力学习，热血青春
如果对编程感兴趣可以加入我们的qq群一起交流：974178910
有问题可以下方留言，看到了会回复哦