HarmonyOS5-AI能力集实操-多点检查
<h2 id="内容摘要">内容摘要</h2><p>本文介绍了一个基于HarmonyOS 5.0和ArkTS语言开发的目标检测应用。该应用允许用户选择图片，利用系统的目标检测能力识别图片中的物体，并在图片上绘制识别区域，同时展示识别结果的可信度、标签和尺寸信息。</p>
<h2 id="实现步骤">实现步骤</h2>
<ol>
<li>导入必要的模块。</li>
<li>定义标签映射表。</li>
<li>创建目标检测组件。</li>
<li>初始化组件状态。</li>
<li>实现图片选择功能。</li>
<li>进行目标识别。</li>
<li>绘制识别区域。</li>
<li>展示识别结果。</li>
</ol>
<h2 id="落地代码">落地代码</h2>
<h3 id="1-模块导入">1. 模块导入</h3>
<pre><code class="language-typescript:/Users/zhousg/Documents/文章/07-ObjectDetection案例.md">import { photoAccessHelper } from '@kit.MediaLibraryKit'
import { fileIo } from '@kit.CoreFileKit'
import image from '@ohos.multimedia.image'
import { objectDetection, visionBase } from '@kit.CoreVisionKit'
import { promptAction } from '@kit.ArkUI';
</code></pre>
<h3 id="2-定义标签映射表">2. 定义标签映射表</h3>
<pre><code class="language-typescript:/Users/zhousg/Documents/文章/07-ObjectDetection案例.md">const LabelMap: Record<number, string> = {
0: "风景",
1: "动物",
2: "植物",
3: "建筑",
5: "人脸",
6: "表格",
7: "文本",
8: "人头",
9: "猫头",
10: "狗头",
11: "食物",
12: "汽车",
13: "人体",
21: "文档",
22: "卡证"
};
</code></pre>
<h3 id="3-创建目标检测组件">3. 创建目标检测组件</h3>
<pre><code class="language-typescript:/Users/zhousg/Documents/文章/07-ObjectDetection案例.md">@Entry
@ComponentV2
struct ObjectDetection {
@Local chooseImage?: PixelMap
@Local objects: objectDetection.VisionObject[] = []
@Local canvasWidth: number = 320
@Local canvasHeight: number = 200
@Local bozaiImage?: PixelMap
</code></pre>
<h3 id="4-初始化组件状态">4. 初始化组件状态</h3>
<pre><code class="language-typescript:/Users/zhousg/Documents/文章/07-ObjectDetection案例.md">async aboutToAppear(): Promise<void> {
const resManager = getContext()
.resourceManager
const bozaiArray = await resManager.getMediaContent($r('app.media.bozai'))
const bozaiResource = image.createImageSource(bozaiArray.buffer)
this.bozaiImage = await bozaiResource.createPixelMap()
}
</code></pre>
<h3 id="5-实现图片选择功能">5. 实现图片选择功能</h3>
<pre><code class="language-typescript:/Users/zhousg/Documents/文章/07-ObjectDetection案例.md">async checkImage() {
// 1. 选择图片
const photoPicker = new photoAccessHelper.PhotoViewPicker()
const result = await photoPicker.select({
MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
maxSelectNumber: 1
})
const uri = result.photoUris
if (uri) {
const imageFile = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY)
const imageSource = image.createImageSource(imageFile.fd)
this.chooseImage = await imageSource.createPixelMap()
</code></pre>
<h3 id="6-进行目标识别">6. 进行目标识别</h3>
<pre><code class="language-typescript:/Users/zhousg/Documents/文章/07-ObjectDetection案例.md"> // 2. 进行识别
const request: visionBase.Request = {
inputData: { pixelMap: this.chooseImage }
}
if (canIUse('SystemCapability.AI.Vision.ObjectDetection')) {
const objectDetector = await objectDetection.ObjectDetector.create()
const data = await objectDetector.process(request)
this.objects = data.objects
</code></pre>
<h3 id="7-绘制识别区域">7. 绘制识别区域</h3>
<pre><code class="language-typescript:/Users/zhousg/Documents/文章/07-ObjectDetection案例.md"> // 3. 绘制识别区域
const imageInfo = await this.chooseImage.getImageInfo()
const ratio = 320 / imageInfo.size.width
this.canvasHeight = imageInfo.size.height * ratio
this.canvasContext.drawImage(this.chooseImage, 0, 0, this.canvasWidth, this.canvasHeight)
this.objects.forEach(item => {
if (item.labels.includes(5)) {
const box = item.boundingBox
this.canvasContext.drawImage(this.bozaiImage, box.left * ratio - ( box.height * ratio * 0.15 ), box.top * ratio, box.height * ratio,
box.height * ratio)
}
})
</code></pre>
<h3 id="8-展示识别结果">8. 展示识别结果</h3>
<pre><code class="language-typescript:/Users/zhousg/Documents/文章/07-ObjectDetection案例.md">build() {
Column({ space: 20 }) {
Canvas(this.canvasContext) {
}
.width(this.canvasWidth)
.height(this.canvasHeight)
.backgroundColor('#CCCCCC')
Button('选择图片，进行识别')
.onClick(() => {
this.checkImage()
})
List({ space: 20 }) {
ForEach(this.objects, (item: objectDetection.VisionObject) => {
ListItem() {
Column() {
Text('可信度：' + item.score)
.width('100%')
Text('标签：' + item.labels.map(label => LabelMap)
.join('，'))
.width('100%')
Text('尺寸：' + JSON.stringify(item.boundingBox))
.width('100%')
}
}
})
}
.width('100%')
.height('100%')
.layoutWeight(1)
}
.padding(15)
.height('100%')
.width('100%')
}
}
</code></pre>
<h2 id="总结">总结</h2>
<ul>
<li>利用 <code>@kit</code> 系列工具包实现了图片选择、文件操作、图像处理和目标检测功能。</li>
<li>通过 <code>ObjectDetector</code> 类进行目标识别，获取识别结果。</li>
<li>使用 <code>Canvas</code> 组件绘制图片和识别区域，直观展示识别结果。</li>
<li>利用 <code>List</code> 组件展示识别结果的详细信息，包括可信度、标签和尺寸。</li>
</ul>
<blockquote>
<p>本文由博客一文多发平台 OpenWrite 发布！</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/zhousg/p/18855554
頁:
[1]