鸿蒙(HarmonyOS)应用开发实战——PixelMap深拷贝案例

往期推文全新看点

• 学鸿蒙开发的优劣势，你清晰吗？发起你相识一下！
  
• 鸿蒙（HarmonyOS）北向开发知识点记载~
  
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
  
• 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
  
• 嵌入式开发适不得当做鸿蒙南向开发？看完这篇你就相识了~
  
• 对于大前端开发来说，转鸿蒙开发毕竟是福还是祸？
  
• 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
  
• 记载一场鸿蒙开发岗位口试履历~
  
• 连续更新中……
  

介绍

在图片开发过程中经常会涉及到PixelMap的深拷贝，本例通过使用PixelMap的readPixelsToBuffer方法来实现深拷贝。在创建源PixelMap的时候，必要将解码参数设置为BGRA_8888，而在深拷贝创建目标PixelMap的时候必要将解码参数设置为RGBA_8888。
效果图预览

使用阐明

• 进入页面，表现的即为rawfile中图片的PixelMap颠末深拷贝过后的PixelMap对象。点击底部的按钮，对原始PixelMap进行深拷贝后再根据相应的比例进行裁剪。点击顶部的生存图标，可以生存当前图片。
  

实现思路

• PixelMap深拷贝方法。通过readPixelsToBuffer读取图片资源的PixelMap到ArrayBuffer，再通过createPixelMap得到目标PixelMap。
  

1.    async function copyPixelMap(pm: PixelMap): Promise<PixelMap> {
2.      const imageInfo: image.ImageInfo = await pm.getImageInfo();
3.      const buffer: ArrayBuffer = new ArrayBuffer(pm.getPixelBytesNumber());
4.      // TODO 知识点：通过readPixelsToBuffer实现PixelMap的深拷贝，其中readPixelsToBuffer输出为BGRA_8888
5.      await pm.readPixelsToBuffer(buffer);
6.      // TODO 知识点：readPixelsToBuffer输出为BGRA_8888,此处createPixelMap需转为RGBA_8888
7.      const opts: image.InitializationOptions = {
8.        editable: true,
9.        pixelFormat: image.PixelMapFormat.RGBA_8888,
10.        size: { height: imageInfo.size.height, width: imageInfo.size.width }
11.      };
12.      return await image.createPixelMap(buffer, opts);
13.    }

复制代码

• 初始化时，通过深拷贝从原始PixelMap创建目标PixelMap。
  

1.    async aboutToAppear(): Promise<void> {
2.      const context: Context = getContext(this);
3.      // 获取resourceManager资源管理
4.      const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
5.      // 获取rawfile中的图片资源
6.      const fileData: Uint8Array = await resourceMgr.getRawFileContent(ImageCropConstants.RAWFILE_PICPATH);
7.      // 获取图片的ArrayBuffer
8.      const buffer = fileData.buffer.slice(fileData.byteOffset, fileData.byteLength + fileData.byteOffset);
9.      // 保存用于恢复原图的imageSource
10.      this.imageSource = image.createImageSource(buffer);
11.      // TODO 知识点： 创建源图片的用于深拷贝的PixelMap，因readPixelsToBuffer输出为BGRA_8888。故此处desiredPixelFormat需为BGRA_8888
12.      const decodingOptions: image.DecodingOptions = {
13.        editable: false, // 是否可编辑。当取值为false时，图片不可二次编辑。
14.        desiredPixelFormat: image.PixelMapFormat.BGRA_8888,
15.      }
16.      // 保存用于深拷贝的pixelMap
17.      this.pixelMapSrc = await this.imageSource.createPixelMap(decodingOptions);
18.      // TODO 知识点： 通过readPixelsToBuffer进行深拷贝
19.      this.pixelMapDst = await copyPixelMap(this.pixelMapSrc!);
20.    }

复制代码

• 图片裁剪。
  

1.     ...
2.     // TODO 知识点：通过readPixelsToBuffer拷贝到PixelMap对象
3.     const pixelMapTemp = await copyPixelMap(this.pixelMapSrc);
4.     const imageInfo: image.ImageInfo = await pixelMapTemp.getImageInfo();
5.     if (!imageInfo) {
6.       logger.error(TAG, `imageInfo is null`);
7.       return;
8.     }
9.     let imageHeight: number = imageInfo.size.height;
10.     let imageWith: number = imageInfo.size.width;
11.     if (proportion === ImageCropConstants.ONE_ONE) {
12.       if (imageHeight > imageWith) {
13.         imageHeight = imageWith;
14.       } else {
15.         imageWith = imageHeight;
16.       }
17.     }
18.     try {
19.       logger.info(TAG, `imageInfo imageHeight = ${JSON.stringify(imageHeight / proportion)}, imageWith = ${JSON.stringify(imageWith)}`);
20.       // PixelMap按比例裁剪
21.       await pixelMapTemp.crop({
22.         size: { height: imageHeight / proportion, width: imageWith },
23.         x: 0,
24.         y: 0
25.       });
26.       this.pixelMapDst = pixelMapTemp;
27.     } catch (error) {
28.       logger.error(TAG, `imageInfo crop error = ${JSON.stringify(error)}`);
29.     }

复制代码

• 生存图片。将裁剪后的图片生存到沙箱路径。
  

1.    export async function savePixelMap(context: Context, pm: PixelMap): Promise<string> {
2.      if (pm === null) {
3.        logger.error(TAG, '传入的pm为空');
4.        return '';
5.      }
6.      const imagePackerApi: image.ImagePacker = image.createImagePacker();
7.      const packOpts: image.PackingOption = { format: 'image/jpeg', quality: 30 };
8.      try {
9.        packToFile(context, pm);
10.        const data: ArrayBuffer = await imagePackerApi.packing(pm, packOpts);
11.        return await saveFile(context, data);
12.      } catch (err) {
13.        logger.error(TAG, '保存文件失败，err=' + JSON.stringify(err));
14.        return '';
15.      }
16.    }
17.    
18.    async function saveFile(context: Context, data: ArrayBuffer): Promise<string> {
19.      let uri: string = context.filesDir + '/' + getTimeStr() + '.jpg';
20.      const file: fileIo.File = fs.openSync(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
21.      fs.writeSync(file.fd, data);
22.      fs.closeSync(file);
23.      // 加上file://前缀
24.      uri = 'file:/' + uri;
25.      return uri;
26.    }

复制代码

高性能知识点

不涉及
工程布局&模块范例

1.    imagedepthcopy                               // har类型
2.    |---view
3.    |   |---ImageDepthCopy.ets                   // 视图层-图片深拷贝页面
4.    |---constants
5.    |   |---ImageCropConstants.ets               // 常量
6.    |---model
7.    |   |---AdjustData.ets                       // 裁剪选项资源
8.    |---util
9.    |   |---CopyObj.ets                          // 业务层-图片深拷贝处理
10.    |   |---FileUtil.ets                         // 业务层-图片保存

复制代码

末了

总是有许多小伙伴反馈说：鸿蒙开发不知道学习哪些技术？不知道必要重点掌握哪些鸿蒙开发知识点？ 为相识决各人这些学习烦恼。在这预备了一份很实用的鸿蒙全栈开发学习路线与学习文档给各人用来跟着学习。
针对一些列因素，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线，包含了鸿蒙开发必掌握的焦点知识要点，内容有（OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、OpenHarmony驱动开发、系统定制移植……等）技术知识点。

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）:https://gitcode.com/HarmonyOS_MN/733GH/overview

如何快速入门？

1.基本概念
2.构建第一个ArkTS应用
3.……

鸿蒙开发口试真题（含参考答案）:

《OpenHarmony源码解析》:

• 搭建开发环境
  
• Windows 开发环境的搭建
  
• Ubuntu 开发环境搭建
  
• Linux 与 Windows 之间的文件共享
  
• ……
  
• 系统架构分析
  
• 构建子系统
  
• 启动流程
  
• 子系统
  
• 分布式任务调度子系统
  
• 分布式通信子系统
  
• 驱动子系统
  
• ……
  

OpenHarmony 设备开发学习手册:https://gitcode.com/HarmonyOS_MN/733GH/overview

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。