动物识别

这里写目录标题

动物识别
- 创建项目
- 百度AI开放平台申请应用
- - 获取 Access Token
  - 发送请求
  - - 第一步先上传图片文件
    - 压缩图片
    - 图片转base64,去头，编码
    - 提交数据处理数据
- 测试写的完整代码
- HTML版本

本文介绍如何接入百度图像识别
例子为动物识别

创建项目

首先创建好一个vue项目，或者H5普通项目都可以

百度AI开放平台申请应用

百度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><inputtype="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><inputtype="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><inputtype="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

有问题可以下方留言，看到了会回复哦

合理使用百度开放平台(一)---动物识别相关推荐

基于百度AI开放平台的人脸识别
文章目录前言人脸识别流程图一.注册账号二.创建应用三.下载SDK文件四.创建工具类五.创建用于人脸识别的网页 1.引入css文件 2.创建注册按钮 3.创建模态框,用于捕捉人脸 4.引入 ...
python3基于百度开放平台和图灵机器人的语音助手
python3基于百度开放平台和图灵机器人的语音助手简介:刚刚接触python,作为一个小白,想搞一个方便自己日常生活的助手,功能肯定不多,但是满足我的基本要求. (我用的是pycharm) 本de ...
【49.Auth2.0认证与授权过程-微博开放平台认证授权过程-百度开放平台认证授权过程-社交登录实现(微博授权)-分布式Session问题与解决方案-SpringSession整合-Redis】
一.知识回顾 [0.三高商城系统的专题专栏都帮你整理好了,请点击这里!] [1-系统架构演进过程] [2-微服务系统架构需求] [3-高性能.高并发.高可用的三高商城系统项目介绍] [4-Linux云 ...
微信小程序-如何申请百度开放平台的密钥
1.打开百度开放平台官网官网链接:点击此处跳转 2.点击控制台 3.创建应用完成基本信息的填写后,在应用管理→我的应用中创建应用应用类型选择微信小程序,填入自己的微信小程序APP ID,然 ...
百度开放平台（文本转化音频）
简介 1.百度开放平台对文本转换支持(度博文=106,度小童=110,度小萌=111,度米朵=103,度小娇=5度小宇=1,#度小美=0,度逍遥=3,度丫丫=4)等虚拟人物的声音 2.支持音量(0-1 ...
获取百度开放平台Access Token，调用百度统计接口
官方文档:http://developer.baidu.com/wiki/index.php?title=docs/oauth 获取 Access Token有几种方式由于项目需求比较简单,这里选择 ...
百度开放平台申请认证调用百度api等（百度网盘上传，下载申请）面向百度开发-百度云盘（1）完成申请-获取用户授权码 Code 值，获取access_token和refresh_token更新token
阿丹: 这一段接触了项目有比较严谨和复杂的业务需要文件的对接.这会让办公体验很糟糕,于是想到使用百度网盘来将文件存在云端. 进入百度开放平台进行注册首先要进行注册创建一个自己的应用创建成功我们就 ...
java 百度账号注册界面_基于百度AI开放平台的人脸识别的注册登录(1)
百度ai开放平台首页 2.选择产品服务,人脸与人体识别,人脸识别选项.打开后如图所示人脸识别 3.点击立即使用 3.jpg 4.点击创捷应用创建应用这一页大家按自己需求填写即可 5.创建完成后点 ...
百度AI开放平台集成人脸识别，离线采集有动作活体版本sdk
前言 Android项目Android studio环境: 1.工程build.gradle版本号:3.2.1 2.app目录下的build.gradle配置:compileSdkVersion 28 ...

合理使用百度开放平台(一)---动物识别