HarmonyOS NEXT应用开发之图片拖拽AI抠图案例

介绍

本示例介绍图片AI抠图案例的使用：通过Image.enableAnalyzer(true)实现长按图片抠图并拖拽/复制到其他应用中。

效果图预览

使用说明

1. 选中需要AI抠图的图片。
2. 长按需要被抠图的元素并拖拽。
3. 元素被AI抠图成功并可以拖拽。

实现思路

场景：通过Image.enableAnalyzer()实现图片AI抠图

• Image.enableAnalyzer()可以设置组件支持AI分析，设置为true时，组件可进行AI分析。
• 支持分析的图像要求是静态非矢量图，即svg、gif等图像类型不支持分析，仅支持传入PixelMap进行分析，目前仅支持RGBA_8888类型，源码参考， 因此需要定义图片转成PixelMap且为RGBA_8888类型方法：

// 使图片转成PixelMap且为RGBA_8888类型
private async getPixmapFromMedia(resource: Resource) { 
  let unit8Array = await getContext(this)?.resourceManager?.getMediaContent({
    bundleName: resource.bundleName,
    moduleName: resource.moduleName,
    id: resource.id
  })
  let imageSource = image.createImageSource(unit8Array.buffer.slice(0, unit8Array.buffer.byteLength));
  let createPixelMap: image.PixelMap = await imageSource.createPixelMap({
    desiredPixelFormat: image.PixelMapFormat.RGBA_8888
  })
  await imageSource.release();
  return createPixelMap;
}

• 通过Image.enableAnalyzer(true)开启Image组件的AI分析能力，通过调用getPixmapFromMedia()方法，将传入的jpg图片类型转成支持AI抠图的PixelMap且为RGBA_8888类型， 当用户长按拖拽图片中元素，即可实现AI抠图并拖拽/复制到其他应用中。

build() {
  Swiper() {
    ForEach(this.imagePixelMapList, (item: image.PixelMap) => {
      /* 性能知识点：当数据量较大时，推荐使用懒加载加载数据。
       * 参考使用数据懒加载文章：
       * https://docs.openharmony.cn/pages/v4.0/zh-cn/application-dev/performance/arkts-performance-improvement-recommendation.md/
       */
      Image(item)
        .enableAnalyzer(true) // 开启Image组件的AI分析能力，目前支持分析PixelMap且为RGBA_8888类型的图片
    })
  }
}

高性能知识点

不涉及

工程结构&模块类型

imageenableanalyzer                             // har类型
|---src/main/ets/view
|   |---ImageView.ets                           // 视图层-主页 

模块依赖

har包-common库中UX标准
@ohos/routermodule(动态路由)

参考资料

Image.enableAnalyzer()参考文档

最后

小编也准备了一份联合鸿蒙官方发布笔记整理收纳的《鸿蒙开发学习笔记》，内容包含ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

【有需要的朋友，可以扫描下方二维码免费领取！！！】

《鸿蒙（HarmonyOS）开发学习指南》

第一章 快速入门

1、开发准备

2、构建第一个ArkTS应用（Stage模型）

3、构建第一个ArkTS应用（FA模型）

4、构建第一个JS应用（FA模型）

5、…

第二章 开发基础知识

1、应用程序包基础知识

2、应用配置文件（Stage模型）

3、应用配置文件概述（FA模型）

4、…

第三章 资源分类与访问

1、 资源分类与访问

2、 创建资源目录和资源文件

3、 资源访问

4、…

第四章 学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、…

第五章 UI开发

1.方舟开发框架（ArkUI）概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4…

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7…

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17…

第七章 应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4…

扫描下方二维码免费领取，《鸿蒙（HarmonyOS）开发学习指南》