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

旧城等待， 2022-12-22 08:57 163阅读 0赞

# 动物识别 #

### 这里写目录标题 ###

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

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

## 创建项目 ##

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

## 百度AI开放平台申请应用 ##

[百度AI开放平台][AI]

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]进入控制台

> 没有注册的需要注册认证

![在这里插入图片描述][20201118213828710.png_pic_center]  
![在这里插入图片描述][20201118214620790.gif_pic_center]

> 记得看手册哦  
> 手册入口:[入口][Link 1]

![在这里插入图片描述][20201118215009618.png_pic_center]

### 获取 Access Token ###

可以在浏览器输入  
https://aip.baidubce.com/oauth/2.0/token?grant\_type=client\_credentials&client\_id=**API KEY**&client\_secret=**Secret Key**  
![在这里插入图片描述][20201118215251322.png_pic_center]**我用的火狐浏览器**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 1]

> 这里拿到Access Token

发送POST请求可以  
效果如下  
![在这里插入图片描述][20201118220059741.png_pic_center]

### 发送请求 ###

用POSTMAN或者别的调试软件发送POST请求，也可以用页面直接请求  
在VUE中 我们使用AXIOS

> `此处不封装axios`

import axios from "axios";

方便讲解直接引入使用，实际使用要封装  
官方文档这样说明  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 2]

页面代码  
图片需要转base64且去掉编码头后再进行urlencode后上传  
图片尺寸过大也不行  
我们将图片压缩  
压缩原理 大图片画到小画布 成小图片  
推荐:测试时可以调用  
[站长工具在线图片转base64][base64]  
[站长工具urlencode编码][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
              )

**提交并处理数据**  
收到的数据是这样的  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 3]

> 我们只显示第一个，想多显示就多提取数据就行

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>

![在这里插入图片描述][20201118222735602.png_pic_center]  
可能有点不准，毕竟用的免费版的，其实我拍的是鸭子和鹅的混合图片

## HTML版本 ##

思理和vue一样  
效果  
![在这里插入图片描述][20201118225028336.png_pic_center]  
代码如下

<!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][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 2] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 4]

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

[AI]: https://ai.baidu.com/?track=cp:aipinzhuan%7Cpf:pc%7Cpp:AIpingtai%7Cpu:title%7Cci:%7Ckw:10005792
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/99b787fd978b4297945d123b1620491f.png
[20201118213828710.png_pic_center]: /images/20221120/883ce112d44b4f75a8e9ba3f9815fe5b.png
[20201118214620790.gif_pic_center]: /images/20221120/8259433652cd4c2eb22e36270eeb7823.png
[Link 1]: https://cloud.baidu.com/doc/IMAGERECOGNITION/index.html
[20201118215009618.png_pic_center]: /images/20221120/0aed9351504c4d7e8458893cb33ab888.png
[20201118215251322.png_pic_center]: /images/20221120/86051a1a7048479586467ae24c64bc3a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/b98231245db3498cb695b50ba7d1c446.png
[20201118220059741.png_pic_center]: /images/20221120/58de5b8d4a724975a94f1bbc0d7f19b2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221120/efb65d9420074c5aae48557b2250e153.png
[base64]: http://tool.chinaz.com/tools/imgtobase
[urlencode]: http://tool.chinaz.com/tools/urlencode.aspx
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221120/451663204cd54638a7ab423a0c32108a.png
[20201118222735602.png_pic_center]: /images/20221120/98038ced3e7c405f8c998ea794c2ff47.png
[20201118225028336.png_pic_center]: /images/20221120/a06967e89a84472988564ae69e030996.png
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: /images/20221120/df91b475d6f949599d3052b0cb9d8f10.png
[Link 2]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 4]: https://img-blog.csdnimg.cn/20201118225427296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center