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

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

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

日系清新滤镜处理流程

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

日系清新的核心特征

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

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

第一步：设计颜色矩阵

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

// 日系清新矩阵
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（冷色）

颜色矩阵设计思路

日系清新滤镜的颜色矩阵设计要点：

调参心得

日系清新的关键是"不要太浓"。颜色矩阵的权重不要拉得太极端，常量偏移要大（让暗部提亮），整体要有一种"淡淡的"感觉。

如果你想更进一步，可以试试：

• 在颜色矩阵里增大 B 通道的权重，让画面更偏蓝
• 减小 R 通道的权重，让红色变淡（比如皮肤会显得更白皙）
• 常量偏移设得更大，让画面整体更亮

小结

日系清新滤镜的核心：

1. brightness(0.2) 大幅提亮
2. 颜色矩阵偏冷色调，常量偏移大
3. blur(0.5) 极轻微柔焦

三个 Filter，调出一种"空气感"。你可以和上一篇的复古滤镜对比看看，感受一下颜色矩阵的魔力——同样的工具，不同的参数，完全不同的风格。