鸿蒙开发-实战：用滤镜链做一个日系清新滤镜

本文介绍了如何使用effectKit实现日系清新滤镜效果。日系清新风格的特点是整体偏亮、低对比度、冷色调和低饱和度。核心处理流程包括：1)大幅提亮(brightness 0.2)；2)应用偏冷色调的颜色矩阵(蓝通道偏移最大)；3)极轻微柔焦(blur 0.5)。文章详细解析了日系清新滤镜的颜色矩阵设计思路，并与复古胶片滤镜进行了参数对比，展示了如何通过调整矩阵权重和偏移量来营造淡雅清新的视觉效果。

程序猿直通车

101人浏览 · 2026-05-26 11:14:36

程序猿直通车 · 2026-05-26 11:14:36 发布

实战：用 effectKit 做一个"日系清新"滤镜

上一篇我们做了复古胶片滤镜，今天我们来试试另一种风格——日系清新。

日系清新是什么感觉？淡淡的、干净的、有点泛白的。就像夏天午后的照片，阳光透过树叶洒下来，颜色不浓烈，但很舒服。

日系清新滤镜处理流程

下面是日系清新滤镜的完整处理流程：

日系清新的核心特征

整体提亮——画面偏亮，有种"过曝"的感觉
降低对比度——暗部不会太暗，整体很柔和
偏冷色调——稍微偏蓝/偏青，不是暖色调
饱和度降低——颜色淡雅，不鲜艳

和复古胶片比，日系清新更"轻"——没有颗粒感，没有暖色调，追求的是一种"空气感"。

第一步：设计颜色矩阵

日系清新的颜色矩阵和复古胶片完全不同。复古偏暖、偏黄，日系偏冷、偏白。

// 日系清新矩阵
const JAPANESE_MATRIX: Array<number> = [
  0.8, 0.1, 0.1, 0, 30,    // R: 提亮很多，稍微降红
  0.1, 0.8, 0.1, 0, 25,    // G: 提亮，保持绿色
  0.1, 0.1, 0.9, 0, 35,    // B: 提亮最多，偏蓝
  0, 0, 0, 1, 0             // A: 不变
];

解读一下这个矩阵：

最后一列（30, 25, 35）是常量偏移，用来提亮暗部。B 通道偏移最大（35），所以画面偏蓝——这就是"清新感"的来源。

前三列的权重比较接近（0.8, 0.1, 0.1），说明每个通道主要保留自己的颜色，但会混入一点其他通道——这样颜色会变淡，饱和度降低。

第二步：创建滤镜并应用

import { image } from '@kit.ImageKit';
import { effectKit } from '@kit.ArkGraphics2D';

导入需要的模块。

function applyJapaneseFilter(source: ArrayBuffer): Promise<image.PixelMap> {
  return new Promise(async (resolve, reject) => {
    let imageSource = image.createImageSource(source);
    await imageSource.createPixelMap().then(async (pixelMap: image.PixelMap) => {

把图片数据转成 PixelMap，这是所有图像处理的基础。

      let headFilter = effectKit.createEffect(pixelMap);
      if (headFilter != null) {
        // 第一步：大幅提亮（日系的核心就是"亮"）
        headFilter.brightness(0.2);

brightness(0.2) 把亮度提高 20%。复古胶片只提了 10%，日系需要更亮——那种"过曝"的感觉就是靠这个。

        // 第二步：日系色调矩阵
        headFilter.setColorMatrix(JAPANESE_MATRIX);

应用颜色矩阵。矩阵里的常量偏移已经够大了（30, 25, 35），所以画面会整体偏亮、偏蓝。

        // 第三步：极轻微柔焦（模拟空气感）
        headFilter.blur(0.5);
      }

blur(0.5) 只有半个像素的模糊——比复古滤镜的 blur(1) 更轻微。日系追求的是"空气感"，不是"模糊感"。

      headFilter.getEffectPixelMap().then(result => {
        resolve(result);
      })
    })
  })
}

最后获取处理结果。

第三步：在页面中使用

@Entry
@Component
struct JapaneseFilter {
  @State originalMap: image.PixelMap | null = null;
  @State japaneseMap: image.PixelMap | null = null;

定义两个状态：原图和日系效果。

  async aboutToAppear() {
    const context: Context = this.getUIContext().getHostContext() as common.UIAbilityContext;
    const fileData: Uint8Array = await context.resourceManager.getRawFileContent('photo.jpg');
    const buffer: ArrayBuffer = fileData.buffer.slice(0);

    // 保存原图
    let imageSource = image.createImageSource(buffer);
    this.originalMap = await imageSource.createPixelMap();

    // 应用日系清新滤镜
    this.japaneseMap = await applyJapaneseFilter(buffer);
  }

加载图片，同时保存原图和处理后的图。

  build() {
    Column() {
      Text('日系清新滤镜')
        .fontSize(24)
        .margin(20)

      // 原图
      if (this.originalMap) {
        Text('原图')
          .fontSize(16)
          .margin({ bottom: 10 })
        Image(this.originalMap)
          .width('90%')
          .aspectRatio(1.5)
      }

      // 日系效果
      if (this.japaneseMap) {
        Text('日系效果')
          .fontSize(16)
          .margin({ top: 20, bottom: 10 })
        Image(this.japaneseMap)
          .width('90%')
          .aspectRatio(1.5)
      }
    }
    .width('100%')
    .height('100%')
  }
}

布局和复古滤镜一样：上下对比显示。

复古胶片与日系清新对比

两种滤镜风格的处理流程对比：

参数	复古胶片	日系清新
亮度	轻微提亮（0.1）	大幅提亮（0.2）
色调	偏暖（偏黄/橙）	偏冷（偏蓝/青）
饱和度	降低（但保留暖色）	降低（整体淡雅）
模糊	轻微柔焦（1）	极轻微柔焦（0.5）
常量偏移	R>G>B（暖色）	B>G>R（冷色）