鸿蒙开发实践——对各种图片编解码格式的支持

场景一：展示系统原生支持的图片格式编解码的代码实现

// 获取resourceManager资源管理
const context : Context = getContext(this);
const resourceMgr : resourceManager.ResourceManager = context.resourceManager;
// 创建ImageSource
resourceMgr.getRawFileContent('test.jpg').then((fileData : Uint8Array) => {
  console.log("Succeeded in getting RawFileContent")
  // 获取图片的ArrayBuffer
  const buffer = fileData.buffer.slice(0);
  const imageSource : image.ImageSource = image.createImageSource(buffer);
}).catch((err : BusinessError) => {
  console.error("Failed to get RawFileContent")
});
// 创建PixelMap
imageSource.createPixelMap().then((pixelMap: image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
}).catch((err : BusinessError) => {
   console.error("Failed to creating PixelMap")
});

场景二：使用第三方库进行系统原生不支持的常用图片格式解码进行解码

avif 格式

2.1 将libavif库添加到工程中，

2.1.1 编译第三方库

下载本仓库

git clone https://gitee.com/openharmony-sig/tpc_c_cplusplus.git --depth=1

三方库目录结构

o    tpc_c_cplusplus/thirdparty/libavif   #三方库libavif的目录结构如下
o    ├── docs                               #三方库相关文档的文件夹
o    ├── HPKBUILD                           #构建脚本
o    ├── HPKCHECK                           #自动化测试脚本
o    ├── SHA512SUM                          #三方库校验文件
o    ├── README.OpenSource                  #说明三方库源码的下载地址，版本，license等信息
o    ├── README_zh.md                       #三方库说明文档
├── OAT.xml                            #开源扫描相关文件

• 在tpc_c_cplusplus/lycium目录下编译三方库

编译环境的搭建参考 准备三方库构建环境

cd tpc_c_cplusplus/lycium
./build.sh libavif

• 三方库头文件及生成的库

在lycium目录下会生成usr目录，该目录下存在已编译完成的32位和64位三方库和头文件

DD一下：在探索鸿蒙系统的学习过程中，不少人都曾遇到过各种棘手问题。小编结合自身学习与实践经历，将容易踩坑的环节和对应的解决思路整理成攻略，希望这些经验分享能为同样在学习鸿蒙的伙伴们提供一些参考和帮助：

请移步前往小编：鸿蒙全栈开发学习指南 ​

1.鸿蒙全栈开发学习路线
2.OpenHarmony开发基础
3.OpenHarmony北向开发环境搭建
4.鸿蒙南向开发环境的搭建
5.鸿蒙生态应用开发白皮书V2.0 & V3.0
6.鸿蒙开发面试真题（含参考答案） 
7.TypeScript入门学习手册
8.OpenHarmony 经典面试题(含参考答案)
9.OpenHarmony设备开发入门【最新版】
10.沉浸式剖析OpenHarmony源代码
11.系统定制指南
12.【OpenHarmony】Uboot 驱动加载流程
13.OpenHarmony构建系统--GN与子系统、部件、模块详解
14.ohos开机init启动流程
15.鸿蒙版性能优化指南
......

2.1.2 应用中使用第三方库 

• 拷贝动态库到\entry\libs\${OHOS_ARCH}\目录： 动态库需要在\entry\libs\${OHOS_ARCH}\目录，才能集成到hap包中，所以需要将对应的so文件拷贝到对应CPU架构的目录

• 在IDE的cpp目录下新增thirdparty目录，将编译生成的库拷贝到该目录下，如下图所示

• 在最外层（cpp目录下）CMakeLists.txt中添加如下语句

#将三方库加入工程中
target_link_libraries(entry PRIVATE ${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libaom.a
${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libavif.so.16
${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libgmock.a
${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libgmock_main.a
${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libgtest.a
${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libgtest_main.a
${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libjpeg.a
${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libpng.a
${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libpng16.a
${CMAKE_CURRENT_SOURCE_DIR}/../../../libs/${OHOS_ARCH}/libyuv.so
)
#将三方库的头文件加入工程中
target_include_directories(entry PRIVATE ${CMAKE_CURRENT_SOURCE_DIR}/thirdparty/libavif/${OHOS_ARCH}/include
${CMAKE_CURRENT_SOURCE_DIR}/thirdparty/libyuv/${OHOS_ARCH}/include
${CMAKE_CURRENT_SOURCE_DIR}/thirdparty/libaom/${OHOS_ARCH}/include
${CMAKE_CURRENT_SOURCE_DIR}/thirdparty/jpeg/${OHOS_ARCH}/include
${CMAKE_CURRENT_SOURCE_DIR}/thirdparty/libpng/${OHOS_ARCH}/include
${CMAKE_CURRENT_SOURCE_DIR}/thirdparty/googletest/${OHOS_ARCH}/include)

2.1.3  测试第三方库

三方库的测试使用原库自带的测试用例来做测试， 准备三方库测试环境

进入到构建目录（arm64-v8a-build为构建64位的目录，armeabi-v7a-build为构建32位的目录）,执行如下操作步骤:

• 配置环境变量 执行如下命令：

export LD_LIBRARY_PATH=${LYCIUM_ROOT}/usr/libyuv/${ARCH}/lib:${LYCIUM_ROOT}/usr/libavif/${ARCH}/lib:${LYCIUM_ROOT}/usr/jpeg/${ARCH}/lib:${LYCIUM_ROOT}/usr/libaom/${ARCH}/lib:${LYCIUM_ROOT}/usr/libpng/${ARCH}/lib:$LD_LIBRARY_PATH

注意：LYCIUM_ROOT代表lycium所在目录的绝对路径；ARCH代表构建架构，64位为arm64-v8a，32位为armeabi-v7a。

• 执行测试项：

ctest

 

实现方式参考上述heif格式，策略相通均为C++侧读取图片数据转换为pixelMap返回给TS侧