Untitled
unknown
kotlin
10 days ago
2.1 kB
4
Indexable
Never
// Import necessary modules import { Component, View, Image, Input, Button, Canvas, State } from '@ohos/arkui'; @Component export default class ImageUploader { @State imageUrl = ''; // 用于存储上传的图片URL @State detectionData = null; // 用于存储检测数据 handleFileChange(event) { const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.onload = (e) => { this.imageUrl = e.target.result; // 将图片URL存储到状态中 }; reader.readAsDataURL(file); // 读取文件并转换为Data URL } } handleDrawBoxes() { // 示例 JSON 数据 const jsonData = { "detection_classes": ["Mouse_bite", "Spurious_copper"], "detection_boxes": [ [576, 423, 669, 967], [366, 592, 455, 633] ], "detection_scores": [0.4796633720397949, 0.5039994716644287] }; this.detectionData = jsonData; // 将检测数据存储到状态中 } drawBoxes(ctx) { if (this.detectionData && this.imageUrl) { const { detection_classes, detection_boxes, detection_scores } = this.detectionData; detection_boxes.forEach((box, index) => { const [x1, y1, x2, y2] = box; const score = detection_scores[index]; const label = detection_classes[index]; // 设置不同颜色 ctx.strokeStyle = index % 2 === 0 ? 'red' : 'blue'; ctx.lineWidth = 2; ctx.strokeRect(x1, y1, x2 - x1, y2 - y1); // 绘制置信度 ctx.fillStyle = 'white'; ctx.font = '20px Arial'; ctx.fillText(`${label}: ${score.toFixed(2)}`, x1, y1 - 10); }); } } build() { return ( <View> <Input type="file" accept="image/*" onChange={(event) => this.handleFileChange(event)} /> <Button onClick={() => this.handleDrawBoxes()}>Draw Boxes</Button> {this.imageUrl && ( <Canvas src={this.imageUrl} style={{ width: '100%', height: 'auto' }} onReady={(ctx) => this.drawBoxes(ctx)} /> )} </View> ); } }
Leave a Comment