首页生成一个模仿百度能通过上传图片识别植物的前段代码

生成一个模仿百度能通过上传图片识别植物的前段代码

时间: 2024-11-27 13:20:26 浏览: 22

要创建一个模仿百度植物识别功能的前端代码，我们可以使用JavaScript库（如`html5`、`axios`）配合一个视觉识别API来实现图片上传并获取结果。这里是一个简单的HTML和JavaScript示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>植物识别</title> </head> <body> <input type="file" id="imageSelect" accept="image/*" capture> <button onclick="uploadImage()">上传图片识别</button> <div id="result"></div> <script> const apiKey = "your_api_key"; // 百度AI API key (实际需要替换为你的) const apiUrl = "https://aip.baidubce.com/rest/2/image-classify/v1/classify"; function uploadImage() { const fileInput = document.getElementById('imageSelect'); if (!fileInput.files.length) return; const file = fileInput.files[0]; const formData = new FormData(); formData.append("image", file); axios.post(apiUrl, formData, { headers: { 'Content-Type': 'multipart/form-data', 'Authorization': `Bearer ${apiKey}` } }).then(response => { const result = response.data.result; displayResult(result); }).catch(error => { console.error("上传失败:", error); document.getElementById('result').innerText = "上传错误"; }); } function displayResult(result) { let plantName = ""; for (const item of result) { plantName += `${item.label}: ${item.probability.toFixed(2)}%\n`; } document.getElementById('result').innerText = `识别到的植物: \n${plantName}`; } </script> </body> </html> ``` 请注意，这个示例假设你已经有了百度AI的图像识别服务（比如`image-classify`）API密钥。在实际应用中，你需要将`apiKey`替换为你从百度云平台获得的实际API密钥，并确保遵守其使用规则。

阅读全文