動物識別
這里寫目錄標題
- 動物識別
- 創建專案
- 百度AI開放平臺申請應用
- 獲取 Access Token
- 發送請求
- 第一步先上傳圖片檔案
- 壓縮圖片
- 圖片轉base64,去頭，編碼
- 提交資料處理資料
- 測驗寫的完整代碼
- HTML版本
本文介紹如何接入百度影像識別
例子為動物識別
創建專案
首先創建好一個vue專案，或者H5普通專案都可以
百度AI開放平臺申請應用
百度AI開放平臺
進入控制臺
沒有注冊的需要注冊認證
記得看手冊哦
手冊入口:入口
獲取 Access Token
可以在瀏覽器輸入
https://aip.baidubce.com/oauth/2.0/token?grant_type=client_credentials&client_id=API KEY&client_secret=Secret Key
我用的火狐瀏覽器
這里拿到Access Token
發送POST請求可以
效果如下
發送請求
用POSTMAN或者別的除錯軟體發送POST請求，也可以用頁面直接請求
在VUE中 我們使用AXIOS
此處不封裝axios
import axios from "axios";
方便講解直接引入使用，實際使用要封裝
官方檔案這樣說明
<div>
<input
type="file"
accept="image/*"
@change="toGOs($event)"
id="file"
/><br />
<canvas id="canvas"></canvas>
<p>{{ name }}</p>
</div>
頁面代碼
圖片需要轉base64且去掉編碼頭后再進行urlencode后上傳
圖片尺寸過大也不行
我們將圖片壓縮
壓縮原理 大圖片畫到小畫布 成小圖片
推薦:測驗時可以呼叫
站長工具在線圖片轉base64
站長工具urlencode編碼
第一步先上傳圖片檔案
let file = event.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
壓縮圖片
壓縮原理 大圖片畫到小畫布 成小圖片
異步加載在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);
大的圖片按比例壓縮成寬100，高*比例,沒超過限制的可以不壓縮，加個圖片寬高判斷即可，本次統一壓縮
圖片轉base64,去頭，編碼
let d = canvas.toDataURL();//base64
let urlcode = d.substring(reader.result.indexOf(","));//去頭
let encodeurl = encodeURIComponent(this.urlcode);//編碼
提交資料處理資料
提交資料
axios
.post(
"https://aip.baidubce.com/rest/2.0/image-classify/v1/animal?access_token=你的Access Token" + encodeurl
)
提交并處理資料
收到的資料是這樣的
我們只顯示第一個，想多顯示就多提取資料就行
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;
});
測驗寫的完整代碼
<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>
可能有點不準，畢竟用的免費版的，其實我拍的是鴨子和鵝的混合圖片
HTML版本
思理和vue一樣
效果
代碼如下
<!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>
??大家好，我是代碼哈士奇，是一名軟體學院網路工程的學生，因為我是“狗”，狗走千里吃肉，想把大學期間學的東西和大家分享，和大家一起進步，但由于水平有限，博客中難免會有一些錯誤出現，有紕漏之處懇請各位大佬不吝賜教！暫時只在csdn這一個平臺進行更新，博客主頁：https://blog.csdn.net/qq_42027681，
未經本人允許，禁止轉載
后續會推出
前端：vue入門 vue開發小程式 等
后端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 云服務器運行專案
python：推薦不溫卜火 一定要看哦
一些插件的使用等
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910
有問題可以下方留言，看到了會回復哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/224839.html
標籤：其他