diff --git a/zh-cn/application-dev/media/Readme-CN.md b/zh-cn/application-dev/media/Readme-CN.md index 79a8ff50f3d8271c746b48def05d129f844c1a56..4678d72e23e92de99a1f844c65ea9f78d9d2d239 100755 --- a/zh-cn/application-dev/media/Readme-CN.md +++ b/zh-cn/application-dev/media/Readme-CN.md @@ -54,7 +54,8 @@ - [图片开发概述](image-overview.md) - [图片解码](image-decoding.md) - 图片处理 - - [图像变换](image-transformation.md) + - [图像变换(ArkTS)](image-transformation.md) + - [图像变换(Native)](image-transformation-native.md) - [位图操作](image-pixelmap-operation.md) - [图片编码](image-encoding.md) - [图片工具](image-tool.md) diff --git a/zh-cn/application-dev/media/image-transformation-native.md b/zh-cn/application-dev/media/image-transformation-native.md new file mode 100644 index 0000000000000000000000000000000000000000..27e6172b8681df5f7600b1739159146248acd043 --- /dev/null +++ b/zh-cn/application-dev/media/image-transformation-native.md @@ -0,0 +1,241 @@ +# 图像变换(Native) + +开发者可以通过本指导了解如何使用Native Image进行图片处理，包括图片的裁剪、旋转、缩放、翻转、偏移、设置透明度等。 + +## 开发步骤 + + +**添加依赖** + +在进行应用开发之前，开发者需要打开native工程的src/main/cpp/CMakeLists.txt，在target_link_libraries依赖中添加image的libpixelmap_ndk.z.so以及日志依赖libhilog_ndk.z.so。 + + ```txt + target_link_libraries(entry PUBLIC libace_napi.z.so libhilog_ndk.z.so libpixelmap_ndk.z.so) + ``` + +**添加接口映射** + +打开src/main/cpp/hello.cpp文件，在Init函数中添加接口映射如下： + + ```c++ + EXTERN_C_START + static napi_value Init(napi_env env, napi_value exports) + { + napi_property_descriptor desc[] = { + { "createPixelMap", nullptr, CreatePixelMap, nullptr, nullptr, nullptr, napi_default, nullptr }, + { "createAlphaPixelMap", nullptr, CreateAlphaPixelMap, nullptr, nullptr, nullptr, napi_default, nullptr }, + { "transform", nullptr, Transform, nullptr, nullptr, nullptr, napi_default, nullptr } + }; + + napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc); + return exports; + } + EXTERN_C_END + ``` + + +**Native接口调用** + +具体接口说明请参考[API文档](../reference/native-apis/image.md) + +在hello.cpp文件中获取JS的资源对象，并转为Native的资源对象，即可调用Native接口，调用方式示例代码如下： + +1. 根据像素数组创建PixelMap对象。 + + ```c++ + //创建PixelMap对象 + napi_value CreatePixelMap(napi_env env, napi_callback_info info) + { + napi_value udfVar = nullptr; + napi_value thisVar = nullptr; + napi_value argValue[2] = {0}; + size_t argCount = 2; + + void* buffer = nullptr; + size_t bufferSize = 0; + struct OhosPixelMapCreateOps createOps; + napi_value pixelmap = nullptr; + + napi_get_undefined(env, &udfVar); + napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr); + if (napi_get_arraybuffer_info(env, argValue[0], &buffer, &bufferSize) != napi_ok || + buffer == nullptr || bufferSize == 0) { + return udfVar; + } + + createOps.width = 4; + createOps.height = 6; + createOps.pixelFormat = 4; + createOps.alphaType = 0; + int32_t res = OH_PixelMap_CreatePixelMap(env, createOps, (uint8_t *)buffer, bufferSize, &pixelmap); + if (res != OHOS_IMAGE_RESULT_SUCCESS || pixelmap == nullptr) { + return udfVar; + } + return pixelmap; + } + + //创建仅含有alpha通道的PixelMap对象 + napi_value CreateAlphaPixelMap(napi_env env, napi_callback_info info) + { + napi_value udfVar = nullptr; + napi_value thisVar = nullptr; + napi_value argValue[1] = {0}; + size_t argCount = 1; + + napi_value alphaPixelmap = nullptr; + + napi_get_undefined(env, &udfVar); + + if (napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr) != napi_ok || + argCount < 1 || argValue[0] == nullptr) { + return udfVar; + } + int32_t res = OH_PixelMap_CreateAlphaPixelMap(env, argValue[0], &alphaPixelmap); + if (res != OHOS_IMAGE_RESULT_SUCCESS || alphaPixelmap == nullptr) { + return udfVar; + } + return alphaPixelmap; + } + ``` + +2. 图像变换。具体操作参考示例代码注释。 + + ```c++ + napi_value Transform(napi_env env, napi_callback_info info) + { + napi_value thisVar = nullptr; + napi_value argValue[1] = {0}; + size_t argCount = 1; + + if (napi_get_cb_info(env, info, &argCount, argValue, &thisVar, nullptr) != napi_ok || + argCount < 1 || argValue[0] == nullptr) { + return nullptr; + } + napi_value result = nullptr; + napi_get_undefined(env, &result); + + NativePixelMap* native = OH_PixelMap_InitNativePixelMap(env, argValue[0]); + if (native == nullptr) { + return result; + } + + //获取图片信息。 + struct OhosPixelMapInfo pixelmapInfo; + OH_PixelMap_GetImageInfo(native, &pixelmapInfo); + + //获取PixelMap对象每行字节数。 + int32_t rowBytes; + OH_PixelMap_GetBytesNumberPerRow(native, &rowBytes); + + //获取PixelMap对象是否可编辑的状态。 + int32_t editable = 0; + OH_PixelMap_GetIsEditable(native, &editable); + + //获取PixelMap对象是否支持Alpha通道。 + int32_t supportAlpha = 0; + OH_PixelMap_IsSupportAlpha(native, &supportAlpha); + + //设置PixelMap对象的Alpha通道。 + int32_t alphaAble = 0; + OH_PixelMap_SetAlphaAble(native, alphaAble); + + //获取PixelMap对象像素密度。 + int32_t densityG; + OH_PixelMap_GetDensity(native, &densityG); + + //设置PixelMap对象像素密度。 + int32_t densityS = 100; + OH_PixelMap_SetDensity(native, densityS); + + //设置PixelMap对象的透明度。 + float opacity = 0.5; + OH_PixelMap_SetOpacity(native, opacity); + + //设置缩放比例。 + //scaleX：宽为原来的0.5。 + //scaleY：高为原来的0.5。 + float scaleX = 0.5; + float scaleY = 0.5; + OH_PixelMap_Scale(native, scaleX, scaleY); + + //设置偏移。 + //translateX：向下偏移50。 + //translateY：向右偏移50。 + float translateX = 50; + float translateY = 50; + OH_PixelMap_Translate(native, translateX, translateY); + + //设置顺时针旋转90度。 + float angle = 90; + OH_PixelMap_Rotate(native, angle); + + //设置翻转 + //flipX：水平翻转。0为不翻转，1为翻转。 + //flipY：垂直翻转。0为不翻转，1为翻转。 + int32_t flipX = 0; + int32_t flipY = 1; + OH_PixelMap_Flip(native, flipX, flipY); + + //设置裁剪区域。 + // cropX：裁剪起始点横坐标0 + // cropY：裁剪起始点纵坐标0 + // cropH：裁剪高度10，方向为从上往下（裁剪后的图片高度为10） + // cropW：裁剪宽度10，方向为从左到右（裁剪后的图片宽度为10 + int32_t cropX = 1; + int32_t cropY = 1; + int32_t cropW = 10; + int32_t cropH = 10; + OH_PixelMap_Crop(native, cropX, cropY, cropW, cropH); + + uint8_t* pixelAddr = nullptr; + //获取PixelMap对象数据的内存地址，并锁定该内存。 + OH_PixelMap_AccessPixels(native, &pixelAddr); + //释放PixelMap对象数据的内存锁。 + OH_PixelMap_UnAccessPixels(native); + + return result; + } + ``` + +**JS侧调用** + +1. 打开src\main\ets\pages\index.ets, 导入"libentry.so"; + +2. 调用Native接口，传入JS的资源对象。示例如下: + + ```js + import testNapi from 'libentry.so' + import image from '@ohos.multimedia.image' + + @Entry + @Component + struct Index { + @State _pixelMap: image.PixelMap = undefined; + build() { + Row() { + Column() { + Button("PixelMap") + .width(100) + .height(100) + .onClick(() => { + const color = new ArrayBuffer(96); + var bufferArr = new Uint8Array(color); + for (var i = 0; i < bufferArr.length; i++) { + bufferArr[i] = 0x80; + } + + this._pixelMap = testNapi.createPixelMap(color); + testNapi.transform(this._pixelMap); + }) + + Image(this._pixelMap) + .width(500) + .height(500) + .objectFit(ImageFit.Cover) + } + .width('100%') + } + .height('100%') + } + } + ``` \ No newline at end of file diff --git a/zh-cn/application-dev/media/image-transformation.md b/zh-cn/application-dev/media/image-transformation.md index ed09128d16a072e85847c193eeb43aaea720e83b..4a86ca8638024fbf79913c35cac337922d88fb13 100644 --- a/zh-cn/application-dev/media/image-transformation.md +++ b/zh-cn/application-dev/media/image-transformation.md @@ -1,4 +1,4 @@ -# 图像变换 +# 图像变换(ArkTS) 图片处理指对PixelMap进行相关的操作，如获取图片信息、裁剪、缩放、偏移、旋转、翻转、设置透明度、读写像素数据等。图片处理主要包括图像变换、[位图操作](image-pixelmap-operation.md)，本文介绍图像变换。