Untitled

// 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>
    );
  }
}