首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >鸿蒙开发实战案例:图片编辑实现马赛克效果

鸿蒙开发实战案例:图片编辑实现马赛克效果

原创
作者头像
小帅聊鸿蒙
发布2025-02-22 19:20:01
发布2025-02-22 19:20:01
2040
举报
文章被收录于专栏:鸿蒙开发笔记鸿蒙开发笔记

介绍

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

效果图预览

使用说明

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

实现思路

  1. 获取原始图片信息,将原始图片设置为可编辑状态。
代码语言:typescript
复制
   /**
   * 获取图片内容
   */
   @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;
   }

代码语言:typescript
复制
   /**
   * 获取原始图片信息
   */
   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("getSrcImageInfo: execute fail, err:" + (err as BusinessError).toString());
    }
   }
  1. 保存图片的原始尺寸及在屏幕的显示区域。
代码语言:typescript
复制
    // 读取图片信息
    const imageInfo: image.ImageInfo = await this.pixelMapSrc!.getImageInfo();
    // 获取图片的宽度和高度
    this.imageWidth = imageInfo.size.width;
    this.imageHeight = imageInfo.size.height;
    // 获取屏幕尺寸
    const displayData: display.Display = display.getDefaultDisplaySync();
    // 计算图片的显示尺寸
    this.displayWidth = px2vp(displayData.width);
    this.displayHeight = this.displayWidth * this.imageHeight / this.imageWidth;
  1. 获取手指按下和移动时的坐标,手指移动时执行马赛克任务。
代码语言:typescript
复制
   PanGesture()
     .onActionStart((event: GestureEvent) => {
       const finger: FingerInfo = event.fingerList[0];
       if (finger == undefined) {
         return;
       }
       this.startX = finger.localX;
       this.startY = finger.localY;
       })
     .onActionUpdate((event: GestureEvent) => {
       const finger: FingerInfo = event.fingerList[0];
         if (finger == undefined) {
           return;
         }
         this.endX = finger.localX;
         this.endY = finger.localY;
         // 执行马赛克任务
         await this.doMosaicTask(this.startX, this.startY, this.endX, this.endY);
         this.startX = this.endX;
         this.startY = this.endY;
        })
  1. 在马赛克任务中处理坐标转换问题后执行马赛克处理函数applyMosaic。
代码语言:typescript
复制
  async doMosaicTask(offMinX: number, offMinY: number, offMaxX: number, offMaxY: number): Promise<void> {
    // TODO 知识点:将手势移动的起始坐标转换为原始图片中的坐标
    offMinX = Math.round(offMinX * this.imageWidth / this.displayWidth);
    offMinY = Math.round(offMinY * this.imageHeight / this.displayHeight);
    offMaxX = Math.round(offMaxX * this.imageWidth / this.displayWidth);
    offMaxY = Math.round(offMaxY * this.imageHeight / this.displayHeight);
    // 处理起始坐标大于终点坐标的情况
    if (offMinX > offMaxX) {
      const temp = offMinX;
      offMinX = offMaxX;
      offMaxX = temp;
    }
    if (offMinY > offMaxY) {
      const temp = offMinY;
      offMinY = offMaxY;
      offMaxY = temp;
    }
    // 获取像素数据的字节数
    const bufferData = new ArrayBuffer(this.pixelMapSrc!.getPixelBytesNumber());
    await this.pixelMapSrc!.readPixelsToBuffer(bufferData);
    // 将像素数据转换为 Uint8Array 便于像素处理
    let dataArray = new Uint8Array(bufferData);
    // TODO: 性能知识点:使用new taskpool.Task()创建任务项,传入任务执行函数和所需参数
    const task: taskpool.Task =
      new taskpool.Task(applyMosaic, dataArray, this.imageWidth, this.imageHeight, MosaicConstants.BLOCK_SIZE,
        offMinX, offMinY, offMaxX, offMaxY);
    try {
      taskpool.execute(task, taskpool.Priority.HIGH).then(async (res: Object) => {
        this.pixelMapSrc = image.createPixelMapSync((res as Uint8Array).buffer, this.opts);
        this.isMosaic = true;
      })
    } catch (err) {
      console.error("doMosaicTask: execute fail, " + (err as BusinessError).toString());
    }
  }
DD一下:欢迎大家关注公众号<程序猿百晓生>,可以了解到一下知识点。
代码语言:erlang
复制
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......
  1. 实现图像局部马赛克处理函数
代码语言:typescript
复制
   async applyMosaic(dataArray: Uint8Array, imageWidth: number, imageHeight: number, blockSize: number,
       offMinX: number, offMinY: number, offMaxX: number, offMaxY: number): Promise<Uint8Array | undefined> {
    try {
    // 计算横排和纵排的块数
    let xBlocks = Math.floor((Math.abs(offMaxX - offMinX)) / blockSize);
    let yBlocks = Math.floor((Math.abs(offMaxY - offMinY)) / blockSize);
    logger.info(MosaicConstants.TAG, 'xBlocks: ' + xBlocks.toString() + ' ,yBlocks:' + yBlocks.toString());
    // 不足一块的,按一块计算
    if (xBlocks < 1) {
      xBlocks = 1;
      offMaxX = offMinX + blockSize;
    }
    if (yBlocks < 1) {
      yBlocks = 1;
      offMaxY = offMinY + blockSize;
    }

    // 遍历每个块
    for (let y = 0; y < yBlocks; y++) {
      for (let x = 0; x < xBlocks; x++) {
        const startX = x * blockSize + offMinX;
        const startY = y * blockSize + offMinY;

        // 计算块内的平均颜色
        let totalR = 0;
        let totalG = 0;
        let totalB = 0;
        let pixelCount = 0;
        for (let iy = startY; iy < startY + blockSize && iy < imageHeight && iy < offMaxY; iy++) {
          for (let ix = startX; ix < startX + blockSize && ix < imageWidth && ix < offMaxX; ix++) {
            // TODO 知识点:像素点数据包括RGB通道的分量值及图片透明度
            const index = (iy * imageWidth + ix) * 4; // 4 像素点数据包括RGB通道的分量值及图片透明度
            totalR += dataArray[index];
            totalG += dataArray[index + 1];
            totalB += dataArray[index + 2];
            pixelCount++;
          }
        }
        const averageR = Math.floor(totalR / pixelCount);
        const averageG = Math.floor(totalG / pixelCount);
        const averageB = Math.floor(totalB / pixelCount);
        // TODO 知识点: 将块内平均颜色应用到块内的每个像素
        for (let iy = startY; iy < startY + blockSize && iy < imageHeight && iy < offMaxY; iy++) {
          for (let ix = startX; ix < startX + blockSize && ix < imageWidth && ix < offMaxX; ix++) {
            const index = (iy * imageWidth + ix) * 4; // 4 像素点数据包括RGB通道的分量值及图片透明度
            dataArray[index] = averageR;
            dataArray[index + 1] = averageG;
            dataArray[index + 2] = averageB;
          }
        }
      }
    }
    return dataArray;
    } catch (error) {
      logger.error(MosaicConstants.TAG, 'applyMosaic fail,err:' + error);
      return undefined;
    }
   }

高性能知识点

本示例使用了taskpool执行耗时操作以达到性能优化。

工程结构&模块类型

代码语言:shell
复制
   imagemosaic                               // har类型  
   |---view  
   |   |---ImageMosaicView.ets               // 视图层-图片马赛克场景  
   |---constants  
   |   |---MosaicConstants.ets               // 常量  

写在最后

如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:

  • 点赞,转发,有你们的 『点赞和评论』,才是我创造的动力;
  • 关注小编,同时可以期待后续文章ing🚀,不定期分享原创知识;
  • 想要获取更多完整鸿蒙最新学习知识点,可关注B站:码牛课堂;

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 介绍
  • 效果图预览
  • 实现思路
    • DD一下:欢迎大家关注公众号<程序猿百晓生>,可以了解到一下知识点。
  • 高性能知识点
  • 工程结构&模块类型
  • 写在最后
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档