实现图片添加滤镜功能鸿蒙示例代码

本文原创发布在华为开发者社区。

介绍

本示例基于effectKit能力实现给图片添加不同滤镜，一键还原图片以及保存图片的功能。

实现图片添加滤镜功能源码链接

效果预览

使用说明

应用需要在entry\src\main\ets\entryability\EntryAbility.ts中做如下配置请求用户开启图片本地读写权限。

onWindowStageCreate(windowStage: window.WindowStage) {
    // Main window is created, set main page for this ability
    hilog.info(0x0000, 'testTag', '%{public}s', 'Ability onWindowStageCreate');
    const permissions: Array<Permissions> = [
      'ohos.permission.WRITE_IMAGEVIDEO',
      'ohos.permission.WRITE_MEDIA',
      'ohos.permission.READ_MEDIA',
      'ohos.permission.MEDIA_LOCATION'
    ];
    const atManager = abilityAccessCtrl.createAtManager();
    atManager.requestPermissionsFromUser(this.context, permissions, (err, data) => {
      if (err) {
        hilog.error(0x0000, 'testTag', 'Failed to requestPermission. Cause: %{public}s',
          JSON.stringify(err) ?? '');
      } else {
        hilog.info(0x0000, 'testTag', 'Succeeded in requestPermission. Data: %{public}s',
          JSON.stringify(data) ?? '');
      }
    });

实现思路

添加图片滤镜

通过调用effectKit接口的Filter方法，实现为图片添加自定义的粉色滤镜，灰度滤镜以及高亮滤镜。核心代码如下，源码参考FilterUtil.ets

export async function pinkColorFilter(pixelMap: PixelMap) {
  const pinkColorMatrix: Array<number> = [
    1, 1, 0, 0, 0,
    0, 1, 0, 0, 0,
    0, 0, 1, 0, 0,
    0, 0, 0, 1, 0
  ]
  const pixelMapFiltered = await effectKit.createEffect(pixelMap).setColorMatrix(pinkColorMatrix).getEffectPixelMap();
  return pixelMapFiltered;
}

export async function grayImageFilter(pixelMap: PixelMap) {
  const pixelMapFiltered = await effectKit.createEffect(pixelMap).grayscale().getEffectPixelMap();
  return pixelMapFiltered;
}

export async function brightImageFilter(pixelMap: PixelMap) {
  let bright = 0.5;
  const pixelMapFiltered = await effectKit.createEffect(pixelMap).brightness(bright).getEffectPixelMap();
  return pixelMapFiltered;
}

一键还原图片

调用image.createImageSource接口通过传入的文件描述符来创建图片源实例，创造PixelMap来写入未添加滤镜的图片数据，点击恢复按钮时，替换图片数据，从而得到未添加滤镜的图片。核心代码如下，源码参考DecodeUtil.ets

export default async function getPixelMap(component: Object) {
  const fd = await getResourceFd(component);
  const imageSourceApi = image.createImageSource(fd);
  if (!imageSourceApi) {
    Logger.error(TAG, 'imageSourceAPI created failed!');
    return;
  }
  const pixelMap = await imageSourceApi.createPixelMap({
    editable: true
  });
  return pixelMap;
}