1. 项目简介
本项目是一个基于HarmonyOS的图像识别应用，用户可以选择图片进行植物识别，并获取识别结果。应用使用百度AI开放平台的图像识别API进行图像分析。
2. 设计思路
用户界面包含选择图片按钮、显示图片、识别按钮以及显示识别结果的文本框。
用户选择图片后，图片会显示在界面上。
用户点击识别按钮后，应用首先获取访问令牌，然后将图片转换为Base64编码，并调用百度AI的图像识别API进行识别。
最终识别结果会显示在界面上。
3. 代码实现详细解释
数据初始化
在数据初始化部分，定义了几个状态变量来存储用户输入和处理结果。
@Entry
@Component
struct Index {
@State access_token: string = '24.b838d59d269ca45a880dd3138a7eab04.2592000.1720668624.282335-81083572'
@State Base64Str: string = 'Hello World'
@State result_description: string = ''
@State result_image: string = 'image'
@State image_name:string='potato';
@State r:string='识别结果';
页面构建
在页面构建部分，定义了用户界面的布局，包括按钮和显示区域。
javascript
复制代码
onPageShow() {
const param = router.getParams();
if (param) {
console.log("Received param info:", param['info']);
this.image_name = param['info'];
console.log("Updated image_url:", this.image_name);
} else {
// 使用一个已知有效的占位符图片URL进行测试
this.image_name = 'potato';
}
}
build() {
Column({ space: 10 }) {
Button('选择图片')
.onClick(() => {
this.result_description='';
router.pushUrl({ url: 'pages/image' });
});
Image("/pages/"+this.image_name+".png")
.width(150)
.height(150)
.onError((err) => {
console.error('Image load error:', err);
console.log('Image URL:', this.image_name);
});
Button('识别')
.onClick(() => {
console.info('Button clicked');
console.log("=========="+$r('app.media.potato').id)
console.log("=========="+$r('app.media.potato').id)
this.r='正在识别中...'
this.GetAccessToken();
this.GetBase64(() => {
console.info('Base64 obtained, calling AI_request');
this.recognition();
});
});
Text(this.r)
.fontSize(20)
.textAlign(TextAlign.Start)
.width('90%')
Text(this.result_description)
.fontSize(20)
.textAlign(TextAlign.Start)
.width('90%')
.height(250);
}
.width('100%')
.height('100%');
}
选择图片
用户点击“选择图片”按钮后，应用会跳转到图片选择页面，并将选择的图片名保存到状态变量中。
javascript
复制代码
onPageShow() {
const param = router.getParams();
if (param) {
console.log("Received param info:", param['info']);
this.image_name = param['info'];
console.log("Updated image_url:", this.image_name);
} else {
// 使用一个已知有效的占位符图片URL进行测试
this.image_name = 'potato';
}
}
获取访问令牌
调用百度AI开放平台的OAuth接口获取访问令牌。
javascript
复制代码
GetAccessToken() {
let httpRequest = http.createHttp();
httpRequest.request(
"https://aip.baidubce.com/oauth/2.0/token?client_id=mpXlmuTMsl6kFbocBKmi7Ros&client_secret=p2ykY40Wj6Pmk3XKy58UF1CfR3HXBiKl&grant_type=client_credentials",
{
method: http.RequestMethod.POST,
header: {
'Content-Type': 'application/json',
"Accept":"application/json"
},
connectTimeout: 60000,
readTimeout: 60000,
}, (err, data) => {
if (!err) {
let obj = JSON.parse(data.result.toString());
this.access_token = obj.access_token;
console.info('Access token obtained:', this.access_token);
} else {
console.error('Access token error:', JSON.stringify(err));
httpRequest.destroy();
}
});
}
获取Base64编码
从资源管理器中获取选定图片的Base64编码。
javascript
复制代码
GetBase64(callback) {
let that = this;
resourceManager.getResourceManager((error, mgr) => {
if (error != null) {
} else {
mgr.getMediaBase64ByName(this.image_name, (error, value) => {
if (error != null) {
console.error("Base64 error:", error);
} else {
console.info('Base64 result:', value);
that.Base64Str = that.getCaption(value);
console.info('Base64Str:', that.Base64Str);
if (callback) callback();
}
});
}
});
}
// 去掉编码头
getCaption(obj) {
var index = obj.lastIndexOf("\,");
obj = obj.substring(index + 1, obj.length);
return obj;
}
图像识别
将Base64编码的图片发送到百度AI的图像识别API进行识别，并处理返回结果。
javascript
复制代码
recognition() {
let httpRequest = http.createHttp();
httpRequest.request(
"https://aip.baidubce.com/rest/2.0/image-classify/v1/plant?access_token=" + this.access_token,
{
method: http.RequestMethod.POST,
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Accept': 'application/json'
},
extraData: `image=${encodeURIComponent(this.Base64Str)}`, // 确保Base64字符串正确编码
connectTimeout: 60000,
readTimeout: 60000,
}, (err, data) => {
if (!err) {
try {
console.log("=================" + data.result.toString());
let obj = JSON.parse(data.result.toString());
if (obj.result && obj.result.length > 0) {
this.r='识别结果'
this.result_description = obj.result[0].name;
}
} catch (parseError) {
console.error('Failed to parse response:', parseError);
}
} else {
console.error('recognition error:', JSON.stringify(err));
}
httpRequest.destroy();
});
}
}