DEV Community

陈杨
陈杨

Posted on

Hong Mong 5 development treasure case sharing AI assisted graphic content efficient creation

HarmonyOS Treasure Case: AI-powered Graphic and Text Content Creation Practice, Make Your App Smarter!

Still struggling to find high-quality cases for HarmonyOS development? Today, I’m sharing a super practical AI graphic and text creation scenario solution, guiding you step by step to build an intelligent social communication app!

1. Scenario Overview: Let Graphic Creation Take Off

This solution is specially designed for social communication apps, achieving a revolutionary experience upgrade through three core HarmonyOS capabilities:

  • Seamless Flow: Edit halfway on your phone, continue on your tablet
  • Service Interoperability: Cross-device camera/gallery access
  • Harmony Intelligence: AI cutout + text recognition 
// Initialize image picker (no permission required!)
const photoViewPicker = new photoAccessHelper.PhotoViewPicker();
const photoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
photoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
photoSelectOptions.maxSelectNumber = 9; // Select up to 9 images

// Get selected image URIs
photoViewPicker.select(photoSelectOptions).then((result) => {
  console.log("Selected image URIs:", result.photoUris);
});
Enter fullscreen mode Exit fullscreen mode

2. Analysis of Three Core Advantages

  1. Cross-device Resource Access
    • Tablet directly calls phone camera to take photos
    • PC accesses phone gallery to select images
    • Say goodbye to data cable transfers!
  2. AI-powered Creation
    • Long press image for automatic cutout
    • Intelligent text recognition in images
    • HDR Vivid high-definition rendering
  3. Seamless Editing Continuity
    • Edit content in real time across multiple devices
    • Distributed file system automatically syncs materials

3. Key Feature Implementation Details

1. AI Image Processing (OCR + Cutout) 

// Enable intelligent image analysis
Image(item)
  .enableAnalyzer(true) // Enable AI analyzer
  .dynamicRangeMode(DynamicRangeMode.HIGH) // HDR mode

// Text recognition callback
onTextRecognized = (textBlocks) => {
  textBlocks.forEach(block => {
    console.log("Recognized text:", block.text);
  });
}
Enter fullscreen mode Exit fullscreen mode

Effect: Long press on image text for automatic recognition, long press on object for one-click cutout, copy text directly for editing!

2. Moving Photo Capture 

// Enable moving photo mode
setEnableLivePhoto(true) {
  if (this.photoOutput?.isMovingPhotoSupported()) {
    this.photoOutput?.enableMovingPhoto(true); // Enable moving photo mode
  }
}

// Moving photo display component
MovingPhotoView({
  movingPhoto: this.movingData, // Moving photo data
  controller: this.movingController
})
Enter fullscreen mode Exit fullscreen mode

Tip: After shooting, delay 300ms to get data, use<font style="color:rgba(0, 0, 0, 0.9);background-color:rgb(252, 252, 252);">getThumbnail()</font>to get the preview image

3. Cross-device Camera Invocation 

// Create device selection menu
Menu() {
  createCollaborationServiceMenuItems([CollaborationServiceFilter.ALL]);
}

// Receive photos taken from another device
async doInsertPicture(stateCode, bufferType, buffer) {
  if (stateCode === 0 && bufferType === 'image/jpeg') {
    const uri = await FileUtils.saveFile(buffer); // Save locally
    this.photoUris.unshift(uri); // Add to editing list
  }
}
Enter fullscreen mode Exit fullscreen mode

Device Limitations:

  • Tablet can call phone camera ✅
  • Phone cannot call tablet camera ❌
  • Must be logged in with the same Huawei account

4. Seamless Flow Black Technology

Configure Continuation Capability 

// module.json5 configuration
"abilities": [{
  "continuable": true // Enable continuation capability
}],
"requestPermissions": [{
  "name": "ohos.permission.DISTRIBUTED_DATASYNC"
}]
Enter fullscreen mode Exit fullscreen mode

Core Flow Code 

// Sender (migrating device)
onContinue(wantParam) {
  wantParam['title'] = AppStorage.get('currentTitle');
  wantParam['photos'] = photoUris.join('|');
  return AbilityConstant.OnContinueResult.AGREE;
}

// Receiver (continuation device)
onCreate(want) {
  if (want.launchReason === AbilityConstant.LaunchReason.CONTINUATION) {
    const photos = want.parameters['photos'].split('|');
    AppStorage.set('currentPhotos', photos); // Restore editing state
  }
}
Enter fullscreen mode Exit fullscreen mode

File Sync Tip: Large files are synced via the distributed file system, data under 100KB is passed directly via wantParam

5. Development Pitfalls Guide

  1. Permission Requests: Camera service requires declaration of 5 permissions 
const camPermissions = [
  'ohos.permission.CAMERA',
  'ohos.permission.MICROPHONE',
  'ohos.permission.READ_IMAGEVIDEO'
];
Enter fullscreen mode Exit fullscreen mode
  1. Device Compatibility: Check device type before service interoperability 
if (device.type === 'tablet') {
  showCollaborationMenu(); // Tablet shows device menu
}
Enter fullscreen mode Exit fullscreen mode
  1. Performance Optimization: Use async decoding for large image processing 
image.createImageSource(fd).createPixelMapAsync().then(pixelMap => {
  // Get pixel data asynchronously
});
Enter fullscreen mode Exit fullscreen mode

Conclusion

This case perfectly demonstrates the advantages of HarmonyOS in cross-device collaboration and AI capabilities. Seamless flow enables device switching without awareness, and AI-powered processing greatly improves creation efficiency. It is recommended to focus on the service interoperability component and distributed file system, as these two features can truly bring qualitative leaps in development!

Give it a try: The complete chain from album selection → AI processing → cross-device editing can shorten development time by 40%! If you encounter problems, feel free to ask in the Huawei Developer Community. Search for the keyword "AI graphic and text creation" to find official answers~

More HarmonyOS treasure cases will be continuously shared. Follow me for the latest development tips! #HarmonyOSDevelopment #AIGraphicCreation #CrossDeviceCollaboration

Top comments (0)