当前位置：首页 > news >正文

百度开放平台调用动物识别接口

news 来源：原创 2025/6/17 20:42:29

1注册或登录平台并创建应用：图像识别 - 新手操作指引 | 百度AI开放平台

结果得到：

2.由上述得到的信息在浏览器输入：

https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=Va5yQRHlA4Fq5eR3LT0vuXV4&client_secret=0rDSjzQ20XUj5itV6WRtznPQSzr5pVw2&

获取到access_token（ps：access_token的有效期为30天，需要每30天进行定期更换；）

3.接口调用：创建一个html页面（注意替换access-token）

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Recognition</title>
  <style>
    canvas {
      border: 1px solid #ddd;
      margin-top: 10px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div>
      <input type="file" accept="image/*" @change="toBase64s($event)" id="file" /><br />
      <canvas id="canvas"></canvas>
      <p>识别结果：{{ name }}</p>
    </div>
  </div>

  <!-- 使用完整Vue构建版本 -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          srcs: "",
          urlcode: "",
          name: "请上传图片"
        };
      },
      methods: {
        toBase64s(event) {
          const file = event.target.files[0];
          if (!file) return;

          const reader = new FileReader();
          reader.onload = e => {
            this.srcs = e.target.result;
            const image = new Image();

            image.onload = () => {
              const canvas = document.getElementById("canvas");
              const ctx = canvas.getContext("2d");

              // 计算等比例缩放尺寸
              const maxWidth = 100;
              const scaleRatio = maxWidth / image.width;
              canvas.width = maxWidth;
              canvas.height = image.height * scaleRatio;

              ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

              // 获取压缩后的base64
              this.urlcode = canvas.toDataURL("image/jpeg", 0.8).split(',')[1];

              // 调用API
              axios.post(
                'https://aip.baidubce.com/rest/2.0/image-classify/v1/animal',
                `image=${encodeURIComponent(this.urlcode)}`,
                {
                  params: {
                    access_token: 'xxxx'
                  }
                }
              )
                .then(res => {
                  if (res.data.result && res.data.result.length > 0) {
                    this.name = res.data.result[0].name;
                  }
                })
                .catch(error => {
                  console.error('API请求失败:', error);
                  this.name = "识别失败，请重试";
                });
            };

            image.src = this.srcs;
          };
          reader.readAsDataURL(file);
        }
      }
    });
  </script>
</body>

</html>

结果可得：