# 使用ImageEffect编辑图片 ## 场景介绍 ImageEffect提供了一系列接口用于图像的编辑。开发者可以通过`ImageEffect`接口处理不同图像输入类型`Pixelmap`、`NativeWindow`、`NativeBuffer`或`Uri`,获得滤镜处理效果。 针对ImageEffect,常见的开发场景如下: - 通过`ImageEffect`提供的Native API接口添加滤镜或滤镜链,设置输入图像,最终生效滤镜效果。 - 通过注册自定义滤镜,实现开发者的定制化滤镜效果。 - 通过`EffectFilter`提供的Native API接口快速实现单个滤镜的处理效果。 ## 接口说明 详细的接口说明请参考[ImageEffect](../../reference/apis-image-kit/_image_effect.md)。 ## 开发步骤 **添加动态链接库** CMakeLists.txt中添加以下lib。 ```txt target_link_libraries(entry PUBLIC libace_ndk.z.so libimage_effect.so libpixelmap.so libnative_window.so libnative_buffer.so ) ``` 根据处理的图像类型添加对应动态链接库:`Pixelmap`(libpixelmap.so)、`NativeWindow`(libnative_window.so)、`NativeBuffer`(libnative_buffer.so) **添加头文件** ```c++ #include #include #include ``` ### 通过ImageEffect提供的接口生效图像效果 1. 创建ImageEffect实例。 ```c++ // 创建imageEffect实例,“ImageEdit”是imageEffect实例别名。 OH_ImageEffect *imageEffect = OH_ImageEffect_Create("ImageEdit"); ``` 2. 添加EffectFilter滤镜。 ```c++ // 添加滤镜,获取 OH_EffectFilter 实例。多次调用该接口可以添加多个滤镜,组成滤镜链。 OH_EffectFilter *filter = OH_ImageEffect_AddFilter(imageEffect, OH_EFFECT_BRIGHTNESS_FILTER); CHECK_AND_RETURN_LOG(filter != nullptr, "OH_ImageEffect_AddFilter fail!"); // 设置滤镜参数, 例如:滤镜强度设置为50。 ImageEffect_Any value = { .dataType = ImageEffect_DataType::EFFECT_DATA_TYPE_FLOAT, .dataValue.floatValue = 50.f }; ImageEffect_ErrorCode errorCode = OH_EffectFilter_SetValue(filter, OH_EFFECT_FILTER_INTENSITY_KEY, &value); ``` 3. 设置处理数据。 **场景一:设置 OH_PixelmapNative 输入类型。** OH_PixelmapNative的具体使用方法请参考[Pixelmap开发指导](image-pixelmap-operation-native.md)。 ```c++ // 设置输入的Pixelmap。 errorCode = OH_ImageEffect_SetInputPixelmap(imageEffect, inputPixelmap); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_SetInputPixelmap fail!"); // 设置输出的Pixelmap(可选),不调用该接口时会在输入Pixelmap上直接生效滤镜效果。 errorCode = OH_ImageEffect_SetOutputPixelmap(imageEffect, outputPixelmap); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_SetOutputPixelmap fail!"); ``` **场景二:设置 OH_NativeBuffer 输入类型。** OH_NativeBuffer的具体使用方法请参考[NativeBuffer开发指导](../../graphics/native-buffer-guidelines.md)。 ```c++ // 设置输入的NativeBuffer。 errorCode = OH_ImageEffect_SetInputNativeBuffer(imageEffect, inputNativeBuffer); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_SetInputNativeBuffer fail!"); // 设置输出的NativeBuffer(可选),不调用该接口时会在输入NativeBuffer上直接生效滤镜效果。 errorCode = OH_ImageEffect_SetOutputNativeBuffer(imageEffect, outputNativeBuffer); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_SetOutputNativeBuffer fail!"); ``` **场景三:设置 URI 输入类型。** ```c++ // 设置输入的URI。 errorCode = OH_ImageEffect_SetInputUri(imageEffect, inputUri); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_SetInputUri fail!"); // 设置输出的URI(可选),不调用该接口时会在输入URI上直接生效滤镜效果。 errorCode = OH_ImageEffect_SetOutputUri(imageEffect, outputUri); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_SetOutputUri fail!"); ``` **场景四:设置 OHNativeWindow 输入类型。** 以相机预览场景为例来说明OHNativeWindow输入场景。XComponent组件为相机预览流提供的SurfaceId,可在native c++层将SurfaceId转换成OHNativeWindow,下面提供一份代码示例。 XComponent模块的具体使用方法请参考[XComponent组件参考](../../reference/apis-arkui/arkui-ts/ts-basic-components-xcomponent.md)。 NativeWindow模块的具体使用方法请参考[OHNativeWindow](../../reference/apis-arkgraphics2d/_native_window.md)。 Camera的具体使用方法请参考[Camera预览参考](../camera/native-camera-preview.md)。 (1) 在xxx.ets中添加一个XComponent组件。 ```ts XComponent({ id: 'xcomponentId', type: 'surface', controller: this.mXComponentController, libraryname: 'entry' }) .onLoad(() => { // 获取XComponent的SurfaceId。 this.mSurfaceId = this.mXComponentController.getXComponentSurfaceId() // 调用native接口获取输入SurfaceId。 this.mSurfaceId = imageEffect.getSurfaceId(this.mSurfaceId) // 调用相机接口启动预览,将获取到的输入SurfaceId传递给相机框架 // ... }) .width('100%') .height('100%') ``` (2) imageEffect.getSurfaceId的native c++层具体实现。 ```c++ // 根据SurfaceId创建NativeWindow,注意创建出来的NativeWindow在使用结束后需要主动调用OH_NativeWindow_DestoryNativeWindow进行释放。 uint64_t outputSurfaceId; std::istrstream iss(outputSurfaceIdStr); issue >> outputSurfaceId; OHNativeWindow *outputNativeWindow = nullptr; int32_t res = OH_NativeWindow_CreateNativeWindowFromSurfaceId(outputSurfaceId, &outputNativeWindow); CHECK_AND_RETURN_LOG(res == 0, "OH_NativeWindow_CreateNativeWindowFromSurfaceId fail!"); // 设置输出显示的Surface。 ImageEffect_ErrorCode errorCode = OH_ImageEffect_SetOutputSurface(imageEffect, outputNativeWindow); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_SetOutputSurface fail!"); // 获取输入的Surface。注意获取的inputNativeWindow在使用结束后需要主动调用OH_NativeWindow_DestoryNativeWindow进行释放。 OHNativeWindow *inputNativeWindow = nullptr; errorCode = OH_ImageEffect_GetInputSurface(imageEffect, &inputNativeWindow); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_GetInputSurface fail!"); // 从获取到输入的NativeWindow中获取SurfaceId。 uint64_t inputSurfaceId = 0; res = OH_NativeWindow_GetSurfaceId(inputNativeWindow, &inputSurfaceId); CHECK_AND_RETURN_LOG(res == 0, "OH_NativeWindow_GetSurfaceId fail!"); // 将SurfaceId转成字符串进行返回。 std::string inputSurfaceIdStr = std::to_string(inputSurfaceId); ``` 4. 启动效果器。 ```c++ // 执行生效滤镜效果。 errorCode = OH_ImageEffect_Start(imageEffect); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_Start fail!"); ``` 5. 停止生效效果(可选,仅在输入Surface场景下才有效)。 ```c++ // 停止生效滤镜效果。 errorCode = OH_ImageEffect_Stop(imageEffect); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_Stop fail!"); ``` 6. 序列化效果器(可选)。 ```c++ char *info = nullptr; errorCode = OH_ImageEffect_Save(imageEffect, &info); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_ImageEffect_Save fail!"); ``` 7. 销毁效果器实例。 ```c++ // 释放imageEffect实例资源。 errorCode = OH_ImageEffect_Release(imageEffect); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, result, "OH_ImageEffect_Release fail!"); ``` ### 自定义滤镜 以下步骤描述了如何实现并注册自定义滤镜接口: 1. 定义 ImageEffect_FilterDelegate。 ```c++ // 图像信息结构体。 struct EffectBufferInfo { void *addr = nullptr; int32_t width = 0; int32_t height = 0; int32_t rowSize = 0; ImageEffect_Format format = ImageEffect_Format::EFFECT_PIXEL_FORMAT_UNKNOWN; }; // 自定义滤镜具体实现。 ImageEffect_FilterDelegate filterDelegate = { .setValue = [](OH_EffectFilter *filter, const char *key, const ImageEffect_Any *value) { // 参数校验,校验成功时返回true,否则返回false。 // ... return true; }, .render = [](OH_EffectFilter *filter, OH_EffectBufferInfo *info, OH_EffectFilterDelegate_PushData pushData) { return Render(filter, info, pushData); }, .save = [](OH_EffectFilter *filter, char **info) { // 获取自定义所设置的滤镜参数,其中"Brightness"为自定义滤镜的Key,由开发者自己任意指定。 ImageEffect_Any value; ImageEffect_ErrorCode errorCode = OH_EffectFilter_GetValue(filter, "Brightness", &value); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, false, "OH_EffectFilter_GetValue fail!"); // 生成键值对信息。 json values; values["Brightness"] = value.dataValue.floatValue; json root; root["name"] = "CustomBrightness"; root["values"] = values;    // 将json对象转成字符串infoStr // ... // 对*info赋值序列化字符串地址。 *info = infoStr; return true; }, .restore = [](const char *info) { // 创建 OH_EffectFilter 实例,其中"CustomBrightness"为自定义滤镜的滤镜名。 OH_EffectFilter *filter = OH_EffectFilter_Create("CustomBrightness"); // 解析json字符串info获取key和value。 // ... // 设置滤镜参数, value为info中按json解析出来的参数。 ImageEffect_ErrorCode errorCode = OH_EffectFilter_SetValue(filter, "Brightness", &value); // ... return filter; } }; ``` 其中Render接口的实现分两种场景。 **场景一:自定义算法可以直接修改info中的像素数据(比如:亮度调节滤镜)。** ```c++ bool Render(OH_EffectFilter *filter, OH_EffectBufferInfo *info, OH_EffectFilterDelegate_PushData pushData) { // 获取图像信息具体参数。 EffectBufferInfo inputBufferInfo; OH_EffectBufferInfo_GetAddr(info, &inputBufferInfo.addr); OH_EffectBufferInfo_GetWidth(info, &inputBufferInfo.width); OH_EffectBufferInfo_GetHeight(info, &inputBufferInfo.height); OH_EffectBufferInfo_GetRowSize(info, &inputBufferInfo.rowSize); OH_EffectBufferInfo_GetEffectFormat(info, &inputBufferInfo.format); // 调用自定义滤镜算法。 ApplyCustomAlgo(inputBufferInfo); // 编辑完成后调用pushData直接传递原图。 pushData(filter, info); return true; } ``` **场景二:自定义算法不能直接修改info中的像素数据(比如:裁剪滤镜)。** ```c++ bool Render(OH_EffectFilter *filter, OH_EffectBufferInfo *info, OH_EffectFilterDelegate_PushData pushData) { // 获取图像信息具体参数。 EffectBufferInfo inputBufferInfo; OH_EffectBufferInfo_GetAddr(info, &inputBufferInfo.addr); OH_EffectBufferInfo_GetWidth(info, &inputBufferInfo.width); OH_EffectBufferInfo_GetHeight(info, &inputBufferInfo.height); OH_EffectBufferInfo_GetRowSize(info, &inputBufferInfo.rowSize); OH_EffectBufferInfo_GetEffectFormat(info, &inputBufferInfo.format); // 创建输出像素信息。 EffectBufferInfo outputBufferInfo = CreateOutputBufferInfo(inputBufferInfo); // 调用自定义滤镜算法。 ApplyCustomAlgo(inputBufferInfo, outputBufferInfo); // 生成outputOhInfo。 OH_EffectBufferInfo *outputOhInfo = OH_EffectBufferInfo_Create(); OH_EffectBufferInfo_SetAddr(outputOhInfo, outputBufferInfo.addr); OH_EffectBufferInfo_SetWidth(outputOhInfo, outputBufferInfo.width); OH_EffectBufferInfo_SetHeight(outputOhInfo, outputBufferInfo.height); OH_EffectBufferInfo_SetRowSize(outputOhInfo, outputBufferInfo.rowSize); OH_EffectBufferInfo_SetEffectFormat(outputOhInfo, outputBufferInfo.format); // 编辑完成后调用pushData传递outputOhInfo。 pushData(filter, outputOhInfo); // 释放资源。 OH_EffectBufferInfo_Release(outputOhInfo); ReleaseOutputBuffer(outputBufferInfo.addr); return true; } ``` 2. 生成自定义滤镜信息。 ```c++ // 创建 OH_EffectFilterInfo 实例。 OH_EffectFilterInfo *customFilterInfo = OH_EffectFilterInfo_Create(); CHECK_AND_RETURN_LOG(customFilterInfo != nullptr, "OH_EffectFilter_GetValue fail!"); // 设置自定义滤镜滤镜名。 OH_EffectFilterInfo_SetFilterName(customFilterInfo, "CustomBrightness"); // 设置自定义滤镜所支持的内存类型。 ImageEffect_BufferType bufferTypeArray[] = { ImageEffect_BufferType::EFFECT_BUFFER_TYPE_PIXEL }; OH_EffectFilterInfo_SetSupportedBufferTypes(customFilterInfo, sizeof(bufferTypeArray) / sizeof(ImageEffect_BufferType), bufferTypeArray); // 设置自定义滤镜所支持的像素格式。 ImageEffect_Format formatArray[] = { ImageEffect_Format::EFFECT_PIXEL_FORMAT_RGBA8888 }; OH_EffectFilterInfo_SetSupportedFormats(customFilterInfo, sizeof(formatArray) / sizeof(ImageEffect_Format), formatArray); ``` 3. 将 ImageEffect_FilterDelegate 注册到效果器。 ```c++ // 注册自定义滤镜。 ImageEffect_ErrorCode errorCode = OH_EffectFilter_Register(customFilterInfo, &filterDelegate); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_EffectFilter_Register fail!"); ``` ### EffectFilter快速实现单个滤镜的处理效果 1. 创建滤镜。 ```c++ // 创建滤镜。比如:创建对比度效果器。 OH_EffectFilter *filter = OH_EffectFilter_Create(OH_EFFECT_CONTRAST_FILTER); ``` 2. 设置滤镜参数。 ```c++ // 设置滤镜参数, 滤镜强度设置为50。 ImageEffect_Any value = {.dataType = ImageEffect_DataType::EFFECT_DATA_TYPE_FLOAT, .dataValue.floatValue = 50.f}; ImageEffect_ErrorCode errorCode = OH_EffectFilter_SetValue(filter, OH_EFFECT_FILTER_INTENSITY_KEY, &value); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_EffectFilter_SetValue fail!"); ``` 3. 生效滤镜。 ```c++ // 生效滤镜效果。 errorCode = OH_EffectFilter_Render(filter, inputPixelmap, outputPixelmap); ``` 4. 销毁滤镜实例。 ```c++ // 销毁滤镜实例。 errorCode = OH_EffectFilter_Release(filter); ``` ### 查询能力 - 根据滤镜名查询滤镜信息。 ```c++ // 创建 OH_EffectFilterInfo 实例。 OH_EffectFilterInfo *filterInfo = OH_EffectFilterInfo_Create(); CHECK_AND_RETURN_LOG(filterInfo != nullptr, "OH_EffectFilterInfo_Create fail!"); // 根据滤镜名查询滤镜能力信息。 ImageEffect_ErrorCode errorCode = OH_EffectFilter_LookupFilterInfo(OH_EFFECT_BRIGHTNESS_FILTER, filterInfo); CHECK_AND_RETURN_LOG(errorCode == ImageEffect_ErrorCode::EFFECT_SUCCESS, "OH_EffectFilter_LookupFilterInfo fail!"); // 从滤镜能力信息中获取滤镜名。 char *name = nullptr; OH_EffectFilterInfo_GetFilterName(filterInfo, &name); // 获取支持的内存类型。 uint32_t supportedBufferTypesCnt = 0; ImageEffect_BufferType *bufferTypeArray = nullptr; OH_EffectFilterInfo_GetSupportedBufferTypes(filterInfo, &supportedBufferTypesCnt, &bufferTypeArray); // 获取支持的像素类型信息。 uint32_t supportedFormatsCnt = 0; ImageEffect_Format *formatArray = nullptr; OH_EffectFilterInfo_GetSupportedFormats(filterInfo, supportedFormatsCnt, &formatArray); // 销毁 OH_EffectFilterInfo 实例。 OH_EffectFilterInfo_Release(filterInfo); ``` - 根据条件查询满足条件的滤镜。 ```c++ // 查询所有的Filter,需要主动进行资源释放。 ImageEffect_FilterNames *filterNames = OH_EffectFilter_LookupFilters("Default"); // ... // 释放FilterNames虚拟内存资源。 OH_EffectFilter_ReleaseFilterNames(); ``` ## 相关实例 针对ImageEffect的开发,有以下相关实例可供参考: - [ImageEffect(API12)](https://gitee.com/openharmony/applications_app_samples/tree/master/code/BasicFeature/Media/ImageEffect)