Identificación animal
Escriba aquí el título del catálogo
本文介绍如何接入百度图像识别
Ejemplo de identificación animal
Crear proyecto
Primero cree un proyecto Vue, o el proyecto ordinario H5 puede ser
Aplicación de aplicación de plataforma abierta Baidu AI
Plataforma abierta de IA de Baidu
Entrar en la consola
Ningún registro requiere certificación de registro
Recuerda leer el manual.
Entrada manual: entrada
Obtener token de acceso
Puede ingresar
https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id= API KEY & client_secret = Secret Key
en el navegador. El navegador Firefox que uso
Obtenga el token de acceso aquí
Enviar una solicitud POST puede
tener el siguiente efecto
Enviar petición
Use POSTMAN u otro software de depuración para enviar la solicitud POST, también puede usar la página para solicitar directamente.
En VUE usamos AXIOS
此处不封装axios
import axios from "axios";
Es conveniente explicar e introducir y usar directamente, y se debe encapsular el uso real
.
<div>
<input
type="file"
accept="image/*"
@change="toGOs($event)"
id="file"
/><br />
<canvas id="canvas"></canvas>
<p>{
{ name }}</p>
</div>
Código de página La
imagen debe convertirse a base64 y el encabezado de codificación se debe eliminar antes de cargarla después de urlencode. El
tamaño de la imagen es demasiado grande.
Comprimimos la imagen.
Principio de compresión. Las imágenes grandes se dibujan en lienzos pequeños en imágenes pequeñas.
Recomendación: Puede llamar a la
herramienta webmaster para convertir imágenes en línea a base64 durante la prueba.
Codificación urlencode de la herramienta para webmasters
El primer paso es subir el archivo de imagen
let file = event.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
Comprimir imagen
Principio de compresión Dibujar una imagen grande en un lienzo pequeño en una imagen pequeña
Cargar asincrónicamente en 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);
Las imágenes grandes se comprimen proporcionalmente al ancho 100, relación altura *, si no excede el límite, no se requiere compresión, solo agregue un juicio de ancho y alto de imagen, esta vez compresión unificada
Imagen a base64, eliminar encabezado, codificar
let d = canvas.toDataURL();//base64
let urlcode = d.substring(reader.result.indexOf(","));//去头
let encodeurl = encodeURIComponent(this.urlcode);//编码
Enviar datos de procesamiento de datos
enviar datos
axios
.post(
"https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=你的Access Token" + encodeurl
)
Envíe y procese los datos Los datos
recibidos se ven así
Solo mostramos el primero, por lo que podemos extraer tantos datos como queramos
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;
});
Código completo escrito por la prueba
<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>
Puede que sea un poco inexacto. Después de todo, utilicé la versión gratuita, pero en realidad tomé una foto mixta de pato y ganso.
Versión HTML
Sili es el mismo que vue, el código de
efecto
es el siguiente
<!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>
Hola a todos, soy un code husky, un estudiante de ingeniería de redes en la Facultad de Software, porque soy un "perro" y puedo comer carne a miles de kilómetros. Quiero compartir lo que aprendí en la universidad y progresar con todos. Sin embargo, debido al nivel limitado, inevitablemente habrá algunos errores en el blog. Si hay alguna omisión, ¡házmelo saber! Por el momento, solo actualice en la plataforma csdn, la página de inicio del blog: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
Se lanzará más tarde
Front-end: vue entrada vue subprograma de desarrollo, etc.
Back-end: entrada java entrada springboot, etc.
Servidor: servidor de entrada MySQL instrucciones simples servidor en la nube para ejecutar el proyecto
python: recomendado no calentar, asegúrese de ver
el uso de algunos complementos, etc.
El camino de la universidad también está en uno mismo, estudiar mucho, juventud
con pasión. Si te interesa la programación, puedes unirte a nuestro grupo qq para comunicarnos juntos: 974178910
Si tiene alguna pregunta, puede dejar un mensaje a continuación, le responderé si lo ve