HarmonyOS NEXT 使用PixelMap深拷贝案例

最新推荐文章于 2024-10-22 15:27:11 发布

蜀道山QAQ

最新推荐文章于 2024-10-22 15:27:11 发布

阅读量1.7k

点赞数 24

分类专栏：鸿蒙鸿蒙实战案例文章标签： harmonyos 华为 android 前端数据库鸿蒙鸿蒙系统

本文链接：https://blog.csdn.net/shudaoshanQAQ/article/details/137090440

版权

鸿蒙同时被 2 个专栏收录

631 篇文章 88 订阅

订阅专栏

鸿蒙实战案例

134 篇文章 10 订阅

订阅专栏

本文介绍了如何在HarmonyOS开发中使用PixelMap进行深拷贝，通过readPixelsToBuffer方法将图片资源转换并创建目标PixelMap。展示了从图片加载、裁剪到保存的整个流程，以及关键技术点的实现细节。

摘要由CSDN通过智能技术生成

介绍

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

效果图预览

使用说明

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

实现思路

PixelMap深拷贝方法。通过readPixelsToBuffer读取图片资源的PixelMap到ArrayBuffer，再通过createPixelMap得到目标PixelMap。源码参考CopyObj.ets。

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

初始化时，通过深拷贝从原始PixelMap创建目标PixelMap。源码参考ImageDepthCopy.ets。

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

图片裁剪。源码参考ImageDepthCopy.ets。

 ...
 // TODO 知识点：通过readPixelsToBuffer拷贝到PixelMap对象
 const pixelMapTemp = await copyPixelMap(this.pixelMapSrc);
 const imageInfo: image.ImageInfo = await pixelMapTemp.getImageInfo();
 if (!imageInfo) {
   logger.error(TAG, `imageInfo is null`);
   return;
 }
 let imageHeight: number = imageInfo.size.height;
 let imageWith: number = imageInfo.size.width;
 if (proportion === ImageCropConstants.ONE_ONE) {
   if (imageHeight > imageWith) {
     imageHeight = imageWith;
   } else {
     imageWith = imageHeight;
   }
 }
 try {
   logger.info(TAG, `imageInfo imageHeight = ${JSON.stringify(imageHeight / proportion)}, imageWith = ${JSON.stringify(imageWith)}`);
   // PixelMap按比例裁剪
   await pixelMapTemp.crop({
     size: { height: imageHeight / proportion, width: imageWith },
     x: 0,
     y: 0
   });
   this.pixelMapDst = pixelMapTemp;
 } catch (error) {
   logger.error(TAG, `imageInfo crop error = ${JSON.stringify(error)}`);
 }

保存图片。将裁剪后的图片保存。源码参考FileUtil.ets。

export async function savePixelMap(context: Context, pm: PixelMap): Promise<string> {
  if (pm === null) {
    logger.error(TAG, '传入的pm为空');
    return '';
  }
  const imagePackerApi: image.ImagePacker = image.createImagePacker();
  const packOpts: image.PackingOption = { format: 'image/jpeg', quality: 30 };
  try {
    packToFile(context, pm);
    const data: ArrayBuffer = await imagePackerApi.packing(pm, packOpts);
    return await saveFile(context, data);
  } catch (err) {
    logger.error(TAG, '保存文件失败，err=' + JSON.stringify(err));
    return '';
  }
}

async function saveFile(context: Context, data: ArrayBuffer): Promise<string> {
  let uri: string = context.filesDir + '/' + getTimeStr() + '.jpg';
  const file: fileIo.File = fs.openSync(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
  fs.writeSync(file.fd, data);
  fs.closeSync(file);
  // 加上file://前缀
  uri = 'file:/' + uri;
  return uri;
}

高性能知识点

不涉及

工程结构&模块类型

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

模块依赖

本示例依赖common模块来实现日志的打印、动态路由模块来实现页面的动态加载。

最后

有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）资料用来跟着学习是非常有必要的。

这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技术、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（HarmonyOS NEXT）技术知识点。

希望这一份鸿蒙学习资料能够给大家带来帮助，有需要的小伙伴自行领取，限时开源，先到先得~无套路领取！！

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员，可以直接领取这份资料

获取这份完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料

鸿蒙（HarmonyOS NEXT）最新学习路线

HarmonOS基础技能

HarmonOS就业必备技能
HarmonOS多媒体技术

鸿蒙NaPi组件进阶

HarmonOS高级技能

初识HarmonOS内核
实战就业级设备开发

有了路线图，怎么能没有学习资料呢，小编也准备了一份联合鸿蒙官方发布笔记整理收纳的一套系统性的鸿蒙（OpenHarmony ）学习手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门教学视频，内容包含：ArkTS、ArkUI、Web开发、应用模型、资源分类…等知识点。

获取以上完整版高清学习路线，请点击→纯血版全套鸿蒙HarmonyOS学习资料