在vue中实现图片识别

 前期准备

1.1 注册百度 AI 开放平台账号并创建应用

• 访问百度 AI 开放平台，点击右上角 “控制台”，如果没有账号需要先注册登录。
• 登录后，在控制台页面点击 “创建应用”，选择 “图像识别” 分类下的 “通用物体识别”，填写应用名称、应用描述等信息，创建成功后会得到 API Key 和 Secret Key，这两个密钥是调用百度图像识别 API 的重要凭证。

1.2 安装开发环境

确保你的电脑已经安装了 Node.js 和 npm（Node.js 包管理器），可以通过以下命令检查是否安装成功：

bash

node -v
npm -v

如果没有安装，可以从Node.js 官方网站下载并安装。

2. 创建 Vue 项目

使用 Vue CLI 创建一个新的 Vue 项目，如果你还没有安装 Vue CLI，可以使用以下命令进行全局安装：

bash

npm install -g @vue/cli

安装完成后，使用以下命令创建一个新的 Vue 项目：

bash

vue create image-recognition-demo
cd image-recognition-demo

在创建项目的过程中，你可以根据自己的需求选择不同的配置选项，例如是否使用 Babel、ESLint 等。

3. 安装必要的依赖

在项目根目录下，使用以下命令安装 axios 库，用于发送 HTTP 请求：

bash

npm install axios

4. 编写 Vue 组件

4.1 创建 ImageRecognition.vue 组件

在 src/components 目录下创建一个名为 ImageRecognition.vue 的组件，代码如下：

vue

<template>
  <div>
    <!-- 文件选择输入框，当选择文件时触发 handleFileChange 方法 -->
    <input type="file" @change="handleFileChange" accept="image/*">
    <!-- 如果 selectedImage 存在，则显示图片 -->
    <img v-if="selectedImage" :src="selectedImage" alt="Selected Image" style="max-width: 500px;">
    <!-- 如果 results 存在，则显示识别结果 -->
    <div v-if="results">
      <h3>识别结果：</h3>
      <ul>
        <!-- 遍历识别结果数组，显示每个结果的名称和置信度 -->
        <li v-for="(result, index) in results" :key="index">
          {{ result.name }} - 置信度: {{ result.score }}
        </li>
      </ul>
    </div>
    <!-- 如果出现错误，显示错误信息 -->
    <div v-if="errorMessage">{{ errorMessage }}</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      // 存储用户选择的图片的 DataURL
      selectedImage: null,
      // 存储图片识别的结果
      results: null,
      // 替换为你在百度 AI 开放平台获取的 API Key
      apiKey: 'your_api_key',
      // 替换为你在百度 AI 开放平台获取的 Secret Key
      secretKey: 'your_secret_key',
      // 存储访问百度 API 的 access_token
      accessToken: null,
      // 存储错误信息
      errorMessage: null
    };
  },
  methods: {
    async handleFileChange(event) {
      // 获取用户选择的文件
      const file = event.target.files[0];
      if (file) {
        try {
          // 创建 FileReader 对象，用于读取文件
          const reader = new FileReader();
          reader.onload = (e) => {
            // 将文件转换为 DataURL 格式并存储在 selectedImage 中
            this.selectedImage = e.target.result;
            // 调用 recognizeImage 方法进行图片识别
            this.recognizeImage(file);
          };
          // 以 DataURL 格式读取文件
          reader.readAsDataURL(file);
        } catch (error) {
          // 处理读取文件时可能出现的错误
          this.errorMessage = '读取文件时出现错误: ' + error.message;
        }
      }
    },
    async getAccessToken() {
      try {
        // 构建获取 access_token 的 URL
        const url = `https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=${this.apiKey}&client_secret=${this.secretKey}`;
        // 发送 GET 请求获取 access_token
        const response = await axios.get(url);
        // 将获取到的 access_token 存储在 accessToken 中
        this.accessToken = response.data.access_token;
      } catch (error) {
        // 处理获取 access_token 时可能出现的错误
        this.errorMessage = '获取 access token 失败: ' + error.message;
      }
    },
    async recognizeImage(file) {
      if (!this.accessToken) {
        // 如果 access_token 不存在，先获取 access_token
        await this.getAccessToken();
      }
      if (this.accessToken) {
        try {
          // 构建图片识别 API 的 URL
          const url = `https://aip.baidubce.com/rest/2.0/image-classify/v2/advanced_general?access_token=${this.accessToken}`;
          // 创建 FormData 对象，用于存储要发送的文件
          const formData = new FormData();
          formData.append('image', file);
          // 发送 POST 请求进行图片识别
          const response = await axios.post(url, formData, {
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          });
          // 将识别结果存储在 results 中
          this.results = response.data.result;
        } catch (error) {
          // 处理图片识别时可能出现的错误
          this.errorMessage = '图片识别失败: ' + error.message;
        }
      }
    }
  }
};
</script>

<style scoped>
/* 可添加一些样式来美化界面 */
input {
  margin-bottom: 20px;
}
img {
  margin-bottom: 20px;
}
h3 {
  color: #333;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin-bottom: 5px;
}
</style>

4.2 代码解释

• template 部分：

  • <input type="file">：用于让用户选择图片文件，@change 事件绑定 handleFileChange 方法，当用户选择文件时会触发该方法。
  • <img>：用于显示用户选择的图片，使用 v-if 指令判断 selectedImage 是否存在，如果存在则显示图片。
  • <div v-if="results">：用于显示图片识别的结果，使用 v-for 指令遍历 results 数组，显示每个结果的名称和置信度。
  • <div v-if="errorMessage">：用于显示错误信息，当 errorMessage 存在时显示。

• script 部分：

  • data：定义组件的数据，包括 selectedImage、results、apiKey、secretKey、accessToken 和 errorMessage。
  • handleFileChange 方法：当用户选择文件时，使用 FileReader 将文件转换为 DataURL 格式并显示在页面上，同时调用 recognizeImage 方法进行图片识别。
  • getAccessToken 方法：通过发送 GET 请求到百度的 token 获取接口，获取 access_token 并存储在 accessToken 中。
  • recognizeImage 方法：首先检查 access_token 是否存在，如果不存在则调用 getAccessToken 方法获取，然后使用 axios 发送 POST 请求到百度的图像识别 API，将用户选择的图片文件作为请求数据发送，最终将识别结果存储在 results 中。

• style 部分：添加了一些简单的样式来美化界面，例如设置输入框和图片的边距，设置标题和列表的样式等。

5. 在 App.vue 中使用组件

打开 src/App.vue 文件，引入并使用 ImageRecognition 组件：

vue

<template>
  <div id="app">
    <!-- 使用 ImageRecognition 组件 -->
    <ImageRecognition />
  </div>
</template>

<script>
// 引入 ImageRecognition 组件
import ImageRecognition from './components/ImageRecognition.vue';

export default {
  components: {
    // 注册 ImageRecognition 组件
    ImageRecognition
  }
};
</script>

<style>
/* 全局样式 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

6. 运行项目

在终端中运行以下命令启动开发服务器：

bash

npm run serve

打开浏览器，访问 http://localhost:8080（端口号可能因配置不同而有所变化），你将看到一个简单的图片识别界面，选择一张图片即可进行识别。

注意事项

• 请务必将 your_api_key 和 your_secret_key 替换为你在百度 AI 开放平台获取的实际 API Key 和 Secret Key。
• 百度 AI 开放平台的 API 有调用频率限制，在开发和使用过程中需要注意。
• 不同的图像识别 API 可能有不同的调用方式和参数要求，使用时需要参考相应的官方文档。如果想使用其他的图像识别服务，例如 Google Cloud Vision API、阿里云图像识别 API 等，需要根据其官方文档进行相应的调整。