电子商务网站建设 精品课百度推广营销中心
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);// 获取压缩后的base64this.urlcode = canvas.toDataURL("image/jpeg", 0.8).split(',')[1];// 调用APIaxios.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>结果可得：