鸿蒙Next如何给图片添加马赛克

在鸿蒙Next系统中，如何给图片添加马赛克效果？有没有内置的图片编辑功能可以直接操作，还是需要借助第三方应用？具体步骤是什么？

2 回复

鸿蒙Next给图片加马赛克？简单！用PixelMap的createPixelMap和writePixels，把指定区域像素改成统一色块就行。代码写两行，效果像打了马赛克的脸——亲妈都认不出！记得用Image组件展示，完美~

更多关于鸿蒙Next如何给图片添加马赛克的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在鸿蒙Next（HarmonyOS NEXT）中，可以通过PixelMap和图像处理API为图片添加马赛克效果。以下是实现步骤和示例代码：

实现步骤

  1. 获取图片：从资源或文件加载图像，转换为PixelMap对象。
  2. 处理像素：遍历图像像素，按马赛克块大小（如10x10）对区域内的像素取平均颜色值，统一填充该区域。
  3. 保存或显示：将处理后的PixelMap渲染到界面或保存为文件。

示例代码

import { image } from '@kit.ImageKit';
import { BusinessError } from '@kit.BasicServicesKit';

// 加载图片并添加马赛克
async function addMosaicToImage(uri: string, blockSize: number = 10): Promise<image.PixelMap | null> {
  try {
    // 1. 创建ImageSource并加载图片
    const imageSource = image.createImageSource(uri);
    const pixelMap = await imageSource.createPixelMap();

    // 2. 获取图片信息
    const info = pixelMap.getImageInfo();
    const width = info.size.width;
    const height = info.size.height;

    // 3. 处理像素块
    for (let y = 0; y < height; y += blockSize) {
      for (let x = 0; x < width; x += blockSize) {
        // 计算当前块范围
        const endX = Math.min(x + blockSize, width);
        const endY = Math.min(y + blockSize, height);
        
        // 获取区域平均颜色
        const avgColor = getAreaAverageColor(pixelMap, x, y, endX, endY);
        
        // 填充区域为平均颜色
        fillAreaWithColor(pixelMap, x, y, endX, endY, avgColor);
      }
    }

    return pixelMap;
  } catch (error) {
    console.error('添加马赛克失败:', (error as BusinessError).message);
    return null;
  }
}

// 计算区域平均颜色
function getAreaAverageColor(
  pixelMap: image.PixelMap,
  startX: number,
  startY: number,
  endX: number,
  endY: number
): number[] {
  let totalR = 0, totalG = 0, totalB = 0;
  let count = 0;

  // 读取区域像素
  for (let y = startY; y < endY; y++) {
    for (let x = startX; x < endX; x++) {
      const color = pixelMap.readPixel(x, y);
      totalR += (color >> 16) & 0xff;
      totalG += (color >> 8) & 0xff;
      totalB += color & 0xff;
      count++;
    }
  }

  // 返回RGB平均值
  return [
    Math.round(totalR / count),
    Math.round(totalG / count),
    Math.round(totalB / count)
  ];
}

// 填充区域颜色
function fillAreaWithColor(
  pixelMap: image.PixelMap,
  startX: number,
  startY: number,
  endX: number,
  endY: number,
  color: number[]
): void {
  const pixelColor = (color[0] << 16) | (color[1] << 8) | color[2];

  for (let y = startY; y < endY; y++) {
    for (let x = startX; x < endX; x++) {
      pixelMap.writePixel(x, y, pixelColor);
    }
  }
}

// 使用示例
const imageUri = 'file://media/image.jpg';
addMosaicToImage(imageUri, 15).then(processedPixelMap => {
  if (processedPixelMap) {
    // 将处理后的PixelMap显示在Image组件中
    // 或使用imagePacker保存为文件
  }
});

关键说明

  • 性能优化：大图片建议使用OffscreenCanvas或在后台线程处理。
  • 马赛克粒度：通过调整blockSize（示例中为15）控制马赛克块大小。
  • 颜色处理：示例使用简单的RGB平均值，可根据需求调整算法。

此方法适用于本地图片处理，实际使用时需注意资源释放和错误处理。

回到顶部