HarmonyOS开发实战（ Beta5.0）图片编辑实现马赛克效果详解

鸿蒙HarmonyOS开发往期必看：

HarmonyOS NEXT应用开发性能实践总结

最新版！“非常详细的” 鸿蒙HarmonyOS Next应用开发学习路线！（从零基础入门到精通）

---

介绍

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

效果图预览

使用说明

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

实现思路

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

   /**
   * 获取图片内容
   */
   @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;// 获取图片的ArrayBufferconst buffer = fileData.buffer.slice(fileData.byteOffset, fileData.byteLength + fileData.byteOffset);// 获取原图imageSourcethis.imageSource = image.createImageSource(buffer);// TODO 知识点： 将图片设置为可编辑const decodingOptions: image.DecodingOptions = {editable: true,desiredPixelFormat: image.PixelMapFormat.RGBA_8888,}// 创建PixelMapthis.pixelMapSrc = await this.imageSource.createPixelMap(decodingOptions);} catch (err) {console.error("getSrcImageInfo: execute fail, err:" + (err as BusinessError).toString());}
   }
   

2. 保存图片的原始尺寸及在屏幕的显示区域。

    // 读取图片信息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;
   

3. 获取手指按下和移动时的坐标，手指移动时执行马赛克任务。

   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;})
   

4. 在马赛克任务中处理坐标转换问题后执行马赛克处理函数applyMosaic。

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());}
}

1. 实现图像局部马赛克处理函数

   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执行耗时操作以达到性能优化。

工程结构&模块类型

imagemosaic                               // har类型  
|---view  
|   |---ImageMosaicView.ets               // 视图层-图片马赛克场景  
|---constants  
|   |---MosaicConstants.ets               // 常量  

模块依赖

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

最后

小编在之前的鸿蒙系统扫盲中，有很多朋友给我留言，不同的角度的问了一些问题，我明显感觉到一点，那就是许多人参与鸿蒙开发，但是又不知道从哪里下手，因为体系杂乱无章，教授的人也多，无从选择。有很多小伙伴不知道学习哪些鸿蒙开发技术？不知道需要重点掌握哪些鸿蒙应用开发知识点？而且学习时频繁踩坑，最终浪费大量时间。所以有一份实用的鸿蒙（HarmonyOS NEXT）路线、视频、文档用来跟着学习是非常有必要的。

如果你是一名有经验的资深Android移动开发、Java开发、前端开发、对鸿蒙感兴趣以及转行人员

鸿蒙 NEXT 全栈开发学习笔记 希望这一份鸿蒙学习文档能够给大家带来帮助~

---

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

​

该路线图包含基础技能、就业必备技能、多媒体技术、六大电商APP、进阶高级技能、实战就业级设备开发，不仅补充了华为官网未涉及的解决方案

路线图适合人群：

IT开发人员：想要拓展职业边界
零基础小白：鸿蒙爱好者，希望从0到1学习，增加一项技能。
技术提升/进阶跳槽：发展瓶颈期，提升职场竞争力，快速掌握鸿蒙技术

2.视频教程+学习PDF文档

（鸿蒙语法ArkTS、TypeScript、ArkUI教程……）

 纯血版鸿蒙全套学习文档（面试、文档、全套视频等）

                   

鸿蒙APP开发必备

​​

总结

参与鸿蒙开发，你要先认清适合你的方向，如果是想从事鸿蒙应用开发方向的话，可以参考本文的学习路径，简单来说就是：为了确保高效学习，建议规划清晰的学习路线