【HarmonyOS 鸿蒙实战开发】图片编辑实现马赛克效果

最新推荐文章于 2025-01-07 15:44:21 发布

CTrup

最新推荐文章于 2025-01-07 15:44:21 发布

阅读量1.3k

点赞数 11

分类专栏：鸿蒙开发移动开发 HarmonyOS 文章标签： harmonyos 移动开发鸿蒙开发组件化 ArkUI 图像处理

本文链接：https://blog.csdn.net/CTrup/article/details/142370158

版权

往期知识点整理

介绍

本示例将原图手指划过的区域分割成若干个大小一致的小方格，然后获取每个小方格中的像素点的平均色彩数值，使用获取到的平均色彩数值替换该方格中所有的像素点。最后使用createPixelMapSync接口将新的像素点数据写入图片，即可实现原始图片的局部马赛克处理。

效果图预览

使用说明

进入页面，手指划过图片的某一个区域即可将该区域马赛克处理。点击底部的“恢复原图”按钮，将恢复为原图。

实现思路

获取原始图片信息，将原始图片设置为可编辑状态。

   /**
   * 获取图片内容
   */
   @Concurrent
   async function getImageContent(imgPath: string, context: Context): Promise<Uint8Array | undefined> {
   
     // 获取resourceManager资源管理
     const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
     // 获取rawfile中的图片资源
     const fileData: Uint8Array = await resourceMgr.getRawFileContent(imgPath);
     return fileData;
   }

   /**
   * 获取原始图片信息
   */
   async getSrcImageInfo(): Promise<void> {
   
    // TODO: 性能知识点：使用new taskpool.Task()创建任务项，传入获取图片内容函数和所需参数
    const task: taskpool.Task = new taskpool.Task(getImageContent, MosaicConstants.RAWFILE_PICPATH, getContext(this));
    try {
   
      const fileData: Uint8Array = await taskpool.execute(task) as Uint8Array;
      // 获取图片的ArrayBuffer
      const buffer = fileData.buffer.slice(fileData.byteOffset, fileData.byteLength + fileData.byteOffset);
      // 获取原图imageSource
      this.imageSource = image.createImageSource(buffer);
      // TODO 知识点： 将图片设置为可编辑
      const decodingOptions: image.DecodingOptions = {
   
        editable: true,
        desiredPixelFormat: image.PixelMapFormat.RGBA_8888,
      }
      // 创建PixelMap
      this.pixelMapSrc = await this.imageSource.createPixelMap(decodingOptions);
    } catch (err) {
   
      console.error(

最低0.47元/天解锁文章