DEV Community

HarmonyOS Magician
HarmonyOS Magician

Posted on

Empowering Business Innovation with Cutting‑Edge Technology: Development Practices Based on HarmonyOS 5 Atomic Vision Services

Under the technical framework of deep integration between HarmonyOS 5’s distributed capabilities and AI computing power, visual processing in business scenarios is undergoing underlying technological reconstruction. This article focuses on the atomic service capabilities of the @kit.CoreVisionKit module, analyzing how it achieves precise visual processing through the Device AI Pipeline.

This case implements ID‑photo‑level background replacement through intelligent subject segmentation technology based on HarmonyOS 5’s AI basic vision services, supporting:

  • Accurate recognition of image subject contours
  • Dynamic generation of random solid‑color backgrounds
  • Real‑time preview of segmentation effect comparisons

Application scenarios: ID photo production, e‑commerce product image processing, creative poster design, etc.

Full Process Analysis of Implementation

1. Environment Preparation and Component Definition 

// Import core capabilities
import { photoAccessHelper } from '@kit.MediaLibraryKit';    // Media library access
import { subjectSegmentation } from '@kit.CoreVisionKit';   // AI vision capabilities

@Entry
@ComponentV2
struct SubjectSegmentation {
  @Local chooseImage?: PixelMap;       // Original image data
  @Local segmentedImage?: PixelMap;    // Segmented foreground image
  @Local bgColor: ResourceColor = Color.White;  // Background color state
Enter fullscreen mode Exit fullscreen mode

Key point: Use @Local for intra-component state to trigger automatic UI updates.

2. Intelligent Image Processing Flow

Step 1: Image Selection and Conversion 

async segmentImage() {
  // Picker (single image)
  const picker = new photoAccessHelper.PhotoViewPicker();
  const { photoUris: [uri] } = await picker.select({
    MIMEType: photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE,
    maxSelectNumber: 1
  });

  // Convert to PixelMap
  const fileSource = await fileIo.open(uri, fileIo.OpenMode.READ_ONLY);
  this.chooseImage = await image.createImageSource(fileSource.fd).createPixelMap();
Enter fullscreen mode Exit fullscreen mode

Step 2: AI Subject Segmentation 

  // Segmentation config
  const visionConfig = { enableSubjectForegroundImage: true };

  try {
    // Perform segmentation
    const { fullSubject } = await subjectSegmentation.doSegmentation(
      { pixelMap: this.chooseImage! },
      visionConfig
    );
    this.segmentedImage = fullSubject.foregroundImage;
  } catch (error) {
    promptAction.showToast({ message: `Segmentation failed: ${error.message}` });
  }
}
Enter fullscreen mode Exit fullscreen mode

Optimization: Scale large images before segmentation to improve performance.

3. Interactive Interface Development 

build() {
  Column({ space: 20 }) {
    // Original image
    ImagePreview('Original:', this.chooseImage)

    // Segmented preview with dynamic background
    ImagePreview('Preview:', this.segmentedImage)
      .backgroundColor(this.bgColor)

    // Action buttons
    ActionButton('Select Image', () => this.segmentImage())
    ActionButton('Change Background', this.randomizeBackground)
  }
  .padding(15)
}

// Random background color
randomizeBackground = () => {
  const [r, g, b] = Array.from({ length: 3 }, () => Math.floor(Math.random() * 256));
  this.bgColor = `rgb(${r},${g},${b})`;
}
Enter fullscreen mode Exit fullscreen mode

Analysis of Technical Highlights

  1. Intelligent Segmentation Accuracy Pixel‑level subject extraction via CoreVisionKit’s deep‑learning models.
  2. Efficient Resource Management Direct PixelMap processing avoids redundant memory copies.
  3. Dynamic Response Mechanism Automatic binding of state to UI for zero‑latency updates.

Complete Implementation Code 

// Image preview component
@Builder
function ImagePreview(label: string, source?: PixelMap) {
  Text(label).fontSize(16);
  Image(source)
    .objectFit(ImageFit.Contain)
    .height('30%')
    .border({ width: 1, color: Color.Grey });
}

// Button component
@Builder
function ActionButton(text: string, handler: () => void) {
  Button(text)
    .width('80%')
    .margin(5)
    .onClick(handler);
}
Enter fullscreen mode Exit fullscreen mode

Best Practice Recommendations

  1. Enhanced Exception Handling Handle image‑loading failures and out‑of‑memory errors.
  2. Performance Optimization Pre‑compress images exceeding 1080 p before segmentation.
  3. Extended Functions
    • Support custom (non‑solid) backgrounds
    • Add edge‑softening on segmentation masks
    • Implement background transparency controls

Through this case, developers can master HarmonyOS 5 AI vision services and extend intelligent image‑processing functions to suit specific business needs.

Top comments (0)