diff --git a/ImageKit/entry/build-profile.json5 b/ImageKit/entry/build-profile.json5
index 4d611879c7913fb0610c686e2399258ab3a6dad1..8805bbd3090a31a31746be3cc593b07a59715434 100644
--- a/ImageKit/entry/build-profile.json5
+++ b/ImageKit/entry/build-profile.json5
@@ -1,6 +1,11 @@
 {
   "apiType": "stageMode",
   "buildOption": {
+    "externalNativeOptions": {
+      "path": "./src/main/cpp/CMakeLists.txt",
+      "arguments": "",
+      "cppFlags": "",
+    }
   },
   "buildOptionSet": [
     {
diff --git a/ImageKit/entry/oh-package.json5 b/ImageKit/entry/oh-package.json5
index 248c3b7541a589682a250f86a6d3ecf7414d2d6a..e18366ba76a8a23b4054eae747037ffc6cbd5877 100644
--- a/ImageKit/entry/oh-package.json5
+++ b/ImageKit/entry/oh-package.json5
@@ -5,6 +5,8 @@
   "main": "",
   "author": "",
   "license": "",
-  "dependencies": {}
+  "dependencies": {
+    "libcpixelmaptomat.so": "file:./src/main/cpp/types/libentry"
+  }
 }
 
diff --git a/ImageKit/entry/src/main/cpp/CMakeLists.txt b/ImageKit/entry/src/main/cpp/CMakeLists.txt
new file mode 100644
index 0000000000000000000000000000000000000000..93936da2e056b71feee762ed8d18a8795c8f5156
--- /dev/null
+++ b/ImageKit/entry/src/main/cpp/CMakeLists.txt
@@ -0,0 +1,15 @@
+# the minimum version of CMake.
+cmake_minimum_required(VERSION 3.5.0)
+project(ImageKit)
+
+set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})
+
+if(DEFINED PACKAGE_FIND_FILE)
+    include(${PACKAGE_FIND_FILE})
+endif()
+
+include_directories(${NATIVERENDER_ROOT_PATH}
+                    ${NATIVERENDER_ROOT_PATH}/include)
+
+add_library(cpixelmaptomat SHARED main.cpp)
+target_link_libraries(cpixelmaptomat PUBLIC libace_napi.z.so)
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/cpp/accessToMat.cpp b/ImageKit/entry/src/main/cpp/accessToMat.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/ImageKit/entry/src/main/cpp/main.cpp b/ImageKit/entry/src/main/cpp/main.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..9e668a25bdcc9fa8553eb5c99fab422337c56b32
--- /dev/null
+++ b/ImageKit/entry/src/main/cpp/main.cpp
@@ -0,0 +1,76 @@
+/*
+ * Copyright (c) 2024 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * FAQ:如何将C++侧接收的PixelMap转换成cv::mat格式
+ */
+
+#include "napi/native_api.h"
+
+static napi_value Add(napi_env env, napi_callback_info info) {
+    size_t argc = 2;
+    napi_value args[2] = {nullptr};
+
+    napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
+
+    napi_valuetype valuetype0;
+    napi_typeof(env, args[0], &valuetype0);
+
+    napi_valuetype valuetype1;
+    napi_typeof(env, args[1], &valuetype1);
+
+    double value0;
+    napi_get_value_double(env, args[0], &value0);
+
+    double value1;
+    napi_get_value_double(env, args[1], &value1);
+
+    napi_value sum;
+    napi_create_double(env, value0 + value1, &sum);
+
+    return sum;
+}
+
+static napi_value NAPI_Global_arrayBufferToMat(napi_env env, napi_callback_info info) {
+    
+}
+
+static napi_value NAPI_Global_accessToMat(napi_env env, napi_callback_info info) {
+    
+}
+
+EXTERN_C_START
+static napi_value Init(napi_env env, napi_value exports) {
+    napi_property_descriptor desc[] = {
+        {"add", nullptr, Add, nullptr, nullptr, nullptr, napi_default, nullptr},
+        {"arrayBufferToMat", nullptr, NAPI_Global_arrayBufferToMat, nullptr, nullptr, nullptr, napi_default, nullptr},
+        {"accessToMat", nullptr, NAPI_Global_accessToMat, nullptr, nullptr, nullptr, napi_default, nullptr},
+    };
+    napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
+    return exports;
+}
+EXTERN_C_END
+
+static napi_module demoModule = {
+    .nm_version = 1,
+    .nm_flags = 0,
+    .nm_filename = nullptr,
+    .nm_register_func = Init,
+    .nm_modname = "cpixelmaptomat",
+    .nm_priv = ((void *)0),
+    .reserved = {0},
+};
+
+extern "C" __attribute__((constructor)) void RegisterEntryModule(void) { napi_module_register(&demoModule); }
diff --git a/ImageKit/entry/src/main/cpp/toMat.cpp b/ImageKit/entry/src/main/cpp/toMat.cpp
new file mode 100644
index 0000000000000000000000000000000000000000..398386cb793bd4e0596c116284fe0e7f43f7bfa9
--- /dev/null
+++ b/ImageKit/entry/src/main/cpp/toMat.cpp
@@ -0,0 +1,127 @@
+/*
+* Copyright (c) 2024 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+/*
+* FAQ:如何将C++侧接收的PixelMap转换成cv::mat格式
+*/
+
+// [Start ConvertPixelMapToCvMatFormat_C_One]
+#include "napi/native_api.h" 
+#include <multimedia/image_framework/image_mdk.h> 
+#include <multimedia/image_framework/image_mdk_common.h> 
+#include <multimedia/image_framework/image_pixel_map_mdk.h> 
+#include <multimedia/image_framework/image_pixel_map_napi.h> 
+#include "hilog/log.h" 
+#include <opencv2/opencv.hpp> 
+#include <bits/alltypes.h> 
+ 
+static napi_value ArrayBufferToMat(napi_env env, napi_callback_info info) { 
+    size_t argc = 3; 
+    napi_value args[3] = {nullptr}; 
+    napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 
+    napi_value error; 
+    napi_create_int32(env, -1, &error); 
+    // Initialize PixelMap object data 
+    NativePixelMap *native = OH_PixelMap_InitNativePixelMap(env, args[0]); 
+    if (native == nullptr) { 
+        return error; 
+    } 
+    // Obtain image information 
+    struct OhosPixelMapInfos pixelMapInfos; 
+    if (OH_PixelMap_GetImageInfo(native, &pixelMapInfos) != IMAGE_RESULT_SUCCESS) { 
+        OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Test", "Pure : -1"); 
+        return error; 
+    } 
+    // Get buffer 
+    napi_value buffer = args[1]; 
+    napi_valuetype valueType; 
+    napi_typeof(env, buffer, &valueType); 
+    if (valueType == napi_object) { 
+        bool isArrayBuffer = false; 
+        napi_is_arraybuffer(env, buffer, &isArrayBuffer); 
+        if (!isArrayBuffer) { 
+            napi_throw_error(env, "EINVAL", "Error"); 
+        } 
+    } 
+    void *data = nullptr; 
+    size_t byteLength = 0; 
+    napi_get_arraybuffer_info(env, buffer, &data, &byteLength); 
+    int32_t *saveBuffer = (int32_t *)(data); 
+    // Convert to Mat 
+    cv::Mat originMat(pixelMapInfos.height, pixelMapInfos.width, CV_8UC4, saveBuffer); 
+    if (!originMat.data) { 
+        OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Read Image", "Pure : -1"); 
+        return error; 
+    } 
+    // OpenCV defaults to BGRA or BGR. If Pixelmap is not specified in these two formats when created, format conversion is required 
+    cv::Mat saveMat; 
+    cv::cvtColor(originMat, saveMat, cv::COLOR_BGRA2RGBA); 
+    char pathArray[1024]; 
+    size_t length; 
+    napi_get_value_string_utf8(env, args[2], pathArray, 1024, &length); 
+    std::string path(pathArray); 
+    path += "/buffer.jpg"; 
+    if (!cv::imwrite(path, saveMat)) { 
+        OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Write Image", "Pure : -1"); 
+        return error; 
+    } 
+    napi_value res; 
+    napi_create_int32(env, 1, &res); 
+    return res; 
+}
+// [End ConvertPixelMapToCvMatFormat_C_One]
+
+// [Start ConvertPixelMapToCvMatFormat_C_Two]
+static napi_value AccessToMat(napi_env env, napi_callback_info info) { 
+    size_t argc = 2; 
+    napi_value args[2] = {nullptr}; 
+    napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 
+    napi_value error; 
+    napi_create_int32(env, -1, &error); 
+    NativePixelMap *native = OH_PixelMap_InitNativePixelMap(env, args[0]); 
+    if (native == nullptr) { 
+        return error; 
+    } 
+    struct OhosPixelMapInfos pixelMapInfos; 
+    if (OH_PixelMap_GetImageInfo(native, &pixelMapInfos) != IMAGE_RESULT_SUCCESS) { 
+        OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Test", "Pure : -1"); 
+        return error; 
+    } 
+    void *pixel; 
+    // Retrieve the memory address of the NativePixelMap object and lock the memory 
+    OH_PixelMap_AccessPixels(native, &pixel); 
+    // Convert to Mat, pay attention to alignment, so pass in rowSize 
+    cv::Mat originMat(pixelMapInfos.height, pixelMapInfos.width, CV_8UC4, pixel, pixelMapInfos.rowSize); 
+    if (!originMat.data) { 
+        OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Read Image", "Pure : -1"); 
+        return error; 
+    } 
+    // OpenCV defaults to BGRA or BGR. If Pixelmap is not specified in these two formats when created, format conversion is required 
+    cv::Mat saveMat; 
+    cv::cvtColor(originMat, saveMat, cv::COLOR_BGRA2RGBA); 
+    char pathArray[1024]; 
+    size_t length; 
+    napi_get_value_string_utf8(env, args[1], pathArray, 1024, &length); 
+    std::string path(pathArray); 
+    path += "/access.jpg"; 
+    if (!cv::imwrite(path, saveMat)) { 
+        OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Write Image", "Pure : -1"); 
+        return error; 
+    } 
+    napi_value res; 
+    napi_create_int32(env, 1, &res); 
+    return res; 
+}
+// [End ConvertPixelMapToCvMatFormat_C_Two]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/cpp/types/libentry/Index.d.ts b/ImageKit/entry/src/main/cpp/types/libentry/Index.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..62424fb6e8e377546835f893ee8dc3ad4458e838
--- /dev/null
+++ b/ImageKit/entry/src/main/cpp/types/libentry/Index.d.ts
@@ -0,0 +1,5 @@
+import { image } from "@kit.ImageKit";
+
+export const arrayBufferToMat: (pixelMap: image.PixelMap, readBuffer: ArrayBuffer, dir: string) => void;
+
+export const accessToMat: (pixelMap: image.PixelMap, dir: string) => void;
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/cpp/types/libentry/oh-package.json5 b/ImageKit/entry/src/main/cpp/types/libentry/oh-package.json5
new file mode 100644
index 0000000000000000000000000000000000000000..ecb2aa537edadcf524035192ac83466164ceaf78
--- /dev/null
+++ b/ImageKit/entry/src/main/cpp/types/libentry/oh-package.json5
@@ -0,0 +1,6 @@
+{
+  "name": "libcpixelmaptomat.so",
+  "types": "./Index.d.ts",
+  "version": "1.0.0",
+  "description": "Please describe the basic information."
+}
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/common/constants/CommonContants.ets b/ImageKit/entry/src/main/ets/common/constants/CommonContants.ets
new file mode 100644
index 0000000000000000000000000000000000000000..b21f44a13ce16362fa0e59b442c52948a14452be
--- /dev/null
+++ b/ImageKit/entry/src/main/ets/common/constants/CommonContants.ets
@@ -0,0 +1,3 @@
+export default  class CommonContants {
+  static Image_Base64_String: string = ''
+}
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/ConvertPixelMapToCvMatFormat.ets b/ImageKit/entry/src/main/ets/pages/ConvertPixelMapToCvMatFormat.ets
index a4b0b4b6803b9a7a747167d84b0bc3e169450d5d..c06d4530d87918330481307cee2fd892373fc450 100644
--- a/ImageKit/entry/src/main/ets/pages/ConvertPixelMapToCvMatFormat.ets
+++ b/ImageKit/entry/src/main/ets/pages/ConvertPixelMapToCvMatFormat.ets
@@ -15,9 +15,9 @@
 
 /*
 * FAQ:如何将C++侧接收的PixelMap转换成cv::mat格式
- */
+*/
 
-// DocsCode 1
+// [Start ConvertPixelMapToCvMatFormat]
 import cPixelMapToMat from 'libcpixelmaptomat.so';
 import { BusinessError } from '@kit.BasicServicesKit';
 import { image } from '@kit.ImageKit';
@@ -28,7 +28,7 @@ struct Index {
   @State pixelMap: image.PixelMap | undefined = undefined
 
   async arrayBufferToMat() {
-    if (this.pixelMap == undefined || this.pixelMap){
+    if (this.pixelMap == undefined || this.pixelMap) {
       let resourceManager = this.getUIContext().getHostContext()!.resourceManager
       let imageArray = await resourceManager.getMediaContent($r('app.media.sample10'));
       let pixelBuffer = new Uint8Array(imageArray).buffer as Object as ArrayBuffer
@@ -53,7 +53,7 @@ struct Index {
     cPixelMapToMat.arrayBufferToMat(this.pixelMap, readBuffer, dir);
   }
 
-  async accessToMat(){
+  async accessToMat() {
     if (this.pixelMap == undefined || this.pixelMap) {
       let resourceManager = this.getUIContext().getHostContext()!.resourceManager
       let imageArray = await resourceManager.getMediaContent($r('app.media.sample14'));
@@ -93,113 +93,5 @@ struct Index {
     .height('100%')
   }
 }
-// DocsCode 1
-
-// DocsCode 2
-#include "napi/native_api.h"
-#include <multimedia/image_framework/image_mdk.h>
-#include <multimedia/image_framework/image_mdk_common.h>
-#include <multimedia/image_framework/image_pixel_map_mdk.h>
-#include <multimedia/image_framework/image_pixel_map_napi.h>
-#include "hilog/log.h"
-#include <opencv2/opencv.hpp>
-#include <bits/alltypes.h>
-
-  static napi_value ArrayBufferToMat(napi_env env, napi_callback_info info) {
-    size_t argc = 3;
-    napi_value args[3] = {nullptr};
-    napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
-    napi_value error;
-    napi_create_int32(env, -1, &error);
-    // 初始化PixelMap对象数据
-    NativePixelMap *native = OH_PixelMap_InitNativePixelMap(env, args[0]);
-    if (native == nullptr) {
-        return error;
-    }
-    // 获取图片信息
-    struct OhosPixelMapInfos pixelMapInfos;
-    if (OH_PixelMap_GetImageInfo(native, &pixelMapInfos) != IMAGE_RESULT_SUCCESS) {
-        OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Test", "Pure : -1");
-        return error;
-    }
-// 获取buffer
-napi_value buffer = args[1];
-napi_valuetype valueType;
-napi_typeof(env, buffer, &valueType);
-if (valueType == napi_object) {
-  bool isArrayBuffer = false;
-  napi_is_arraybuffer(env, buffer, &isArrayBuffer);
-  if (!isArrayBuffer) {
-    napi_throw_error(env, "EINVAL", "Error");
-  }
-}
-void *data = nullptr;
-size_t byteLength = 0;
-napi_get_arraybuffer_info(env, buffer, &data, &byteLength);
-int32_t *saveBuffer = (int32_t *)(data);
-// 转换成Mat
-cv::Mat originMat(pixelMapInfos.height, pixelMapInfos.width, CV_8UC4, saveBuffer);
-if (!originMat.data) {
-  OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Read Image", "Pure : -1");
-  return error;
-}
-// opencv默认bgra或bgr，若pixelmap创建时未指定为这两种格式，需要进行格式转换
-cv::Mat saveMat;
-cv::cvtColor(originMat, saveMat, cv::COLOR_BGRA2RGBA);
-char pathArray[1024];
-size_t length;
-napi_get_value_string_utf8(env, args[2], pathArray, 1024, &length);
-std::string path(pathArray);
-path += "/buffer.jpg";
-if (!cv::imwrite(path, saveMat)) {
-  OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Write Image", "Pure : -1");
-  return error;
-}
-napi_value res;
-napi_create_int32(env, 1, &res);
-return res;
-}
-// DocsCode 2
 
-// DocsCode 3
-static napi_value AccessToMat(napi_env env, napi_callback_info info) {
-    size_t argc = 2;
-    napi_value args[2] = {nullptr};
-    napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);
-    napi_value error;
-    napi_create_int32(env, -1, &error);
-    NativePixelMap *native = OH_PixelMap_InitNativePixelMap(env, args[0]);
-    if (native == nullptr) {
-        return error;
-    }
-    struct OhosPixelMapInfos pixelMapInfos;
-    if (OH_PixelMap_GetImageInfo(native, &pixelMapInfos) != IMAGE_RESULT_SUCCESS) {
-        OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Test", "Pure : -1");
-        return error;
-    }
-void *pixel;
-// 获取NativePixelMap对象的内存地址并锁定内存
-OH_PixelMap_AccessPixels(native, &pixel);
-// 转换成Mat，注意对齐，所以要传入rowSize
-cv::Mat originMat(pixelMapInfos.height, pixelMapInfos.width, CV_8UC4, pixel, pixelMapInfos.rowSize);
-if (!originMat.data) {
-  OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Read Image", "Pure : -1");
-  return error;
-}
-// opencv默认bgra或bgr，若pixelmap创建时未指定为这两种格式，需要进行格式转换
-cv::Mat saveMat;
-cv::cvtColor(originMat, saveMat, cv::COLOR_BGRA2RGBA);
-char pathArray[1024];
-size_t length;
-napi_get_value_string_utf8(env, args[1], pathArray, 1024, &length);
-std::string path(pathArray);
-path += "/access.jpg";
-if (!cv::imwrite(path, saveMat)) {
-  OH_LOG_Print(LOG_APP, LOG_ERROR, 0xFF00, "Write Image", "Pure : -1");
-  return error;
-}
-napi_value res;
-napi_create_int32(env, 1, &res);
-return res;
-}
-// DocsCode 3
\ No newline at end of file
+// [End ConvertPixelMapToCvMatFormat]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/PixelMapAndBase64ConverToEachOther.ets b/ImageKit/entry/src/main/ets/pages/PixelMapAndBase64ConverToEachOther_One.ets
similarity index 65%
rename from ImageKit/entry/src/main/ets/pages/PixelMapAndBase64ConverToEachOther.ets
rename to ImageKit/entry/src/main/ets/pages/PixelMapAndBase64ConverToEachOther_One.ets
index 7c31aa2c9776b1fd2fa131a62c39bc7f80224194..a7231ed9b9fcc411775fdf21a3fa0de7b52fe4f2 100644
--- a/ImageKit/entry/src/main/ets/pages/PixelMapAndBase64ConverToEachOther.ets
+++ b/ImageKit/entry/src/main/ets/pages/PixelMapAndBase64ConverToEachOther_One.ets
@@ -17,7 +17,7 @@
 * FAQ:如何实现PixelMap和base64的相互转换
 */
 
-// DocsCode 1
+// [Start PixelMapAndBase64ConverToEachOther_One]
 import { image } from '@kit.ImageKit';
 import { buffer } from '@kit.ArkTS';
 
@@ -58,39 +58,4 @@ struct Index {
     .height('100%')
   }
 }
-// DocsCode 1
-
-// DocsCode 2
-import CommonConstants from '../common/constants/CommonContants';
-import { util } from '@kit.ArkTS';
-import { image } from '@kit.ImageKit';
-
-@Entry
-@Component
-struct Index {
-  @State message: string = 'Base64ToPixelMap';
-  private base64: string = CommonConstants.Image_Base64_String; // 该变量为图片的base64格式字符串
-  @State private pixelMap: PixelMap | null = null;
-
-  build() {
-    Row() {
-      Column() {
-        Text(this.message)
-          .fontSize(50)
-          .fontWeight(FontWeight.Bold)
-          .onClick(async () => {
-            let helper = new util.Base64Helper();
-            let buffer: ArrayBuffer = helper.decodeSync(this.base64, util.Type.MIME).buffer as ArrayBuffer;
-            let imageSource = image.createImageSource(buffer);
-            let opts: image.DecodingOptions = { editable: true };
-            this.pixelMap = await imageSource.createPixelMap(opts);
-          })
-        Image(this.pixelMap)
-          .width(200).height(200).margin(15)
-      }
-      .width('100%')
-    }
-    .height('100%')
-  }
-}
-// DocsCode 2
\ No newline at end of file
+// [End PixelMapAndBase64ConverToEachOther_One]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/PixelMapAndBase64ConverToEachOther_Two.ets b/ImageKit/entry/src/main/ets/pages/PixelMapAndBase64ConverToEachOther_Two.ets
new file mode 100644
index 0000000000000000000000000000000000000000..9e14d0b2a544a44b8358bcb9e371679d2a4697e0
--- /dev/null
+++ b/ImageKit/entry/src/main/ets/pages/PixelMapAndBase64ConverToEachOther_Two.ets
@@ -0,0 +1,53 @@
+/*
+* Copyright (c) 2024 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+/*
+* FAQ:如何实现PixelMap和base64的相互转换
+*/
+
+// [Start PixelMapAndBase64ConverToEachOther_Two]
+import CommonConstants from '../common/constants/CommonContants';
+import { util } from '@kit.ArkTS';
+import { image } from '@kit.ImageKit';
+
+@Entry
+@Component
+struct Index {
+  @State message: string = 'Base64ToPixelMap';
+  private base64: string = CommonConstants.Image_Base64_String; // 该变量为图片的base64格式字符串
+  @State private pixelMap: PixelMap | null = null;
+
+  build() {
+    Row() {
+      Column() {
+        Text(this.message)
+          .fontSize(50)
+          .fontWeight(FontWeight.Bold)
+          .onClick(async () => {
+            let helper = new util.Base64Helper();
+            let buffer: ArrayBuffer = helper.decodeSync(this.base64, util.Type.MIME).buffer as ArrayBuffer;
+            let imageSource = image.createImageSource(buffer);
+            let opts: image.DecodingOptions = { editable: true };
+            this.pixelMap = await imageSource.createPixelMap(opts);
+          })
+        Image(this.pixelMap)
+          .width(200).height(200).margin(15)
+      }
+      .width('100%')
+    }
+    .height('100%')
+  }
+}
+// [End PixelMapAndBase64ConverToEachOther_Two]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/PixelMapSaveToAlbum.ets b/ImageKit/entry/src/main/ets/pages/PixelMapSaveToAlbum.ets
index 752fe240f343462543d09c578e49725dcd5974d7..5ec8a8bcb27f0e380a12901ebfefbea7b13d84a1 100644
--- a/ImageKit/entry/src/main/ets/pages/PixelMapSaveToAlbum.ets
+++ b/ImageKit/entry/src/main/ets/pages/PixelMapSaveToAlbum.ets
@@ -17,7 +17,7 @@
 * FAQ:如何将PixelMap保存到相册
  */
 
-// DocsCode 1
+// [Start PixelMapSaveToAlbum]
 import { resourceManager } from '@kit.LocalizationKit';
 import { photoAccessHelper } from '@kit.MediaLibraryKit';
 import { BusinessError } from '@kit.BasicServicesKit';
@@ -92,4 +92,4 @@ struct SavePixelMapToAlbum {
     .height('100%')
   }
 }
-// DocsCode 1
\ No newline at end of file
+// [End PixelMapSaveToAlbum]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/ResolveCreatePixelMapError_One.ets b/ImageKit/entry/src/main/ets/pages/ResolveCreatePixelMapError_One.ets
new file mode 100644
index 0000000000000000000000000000000000000000..c37fec133f0bce291eaf302e23f94a3599e6d316
--- /dev/null
+++ b/ImageKit/entry/src/main/ets/pages/ResolveCreatePixelMapError_One.ets
@@ -0,0 +1,30 @@
+/*
+* Copyright (c) 2024 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+import { fileIo as fs } from '@kit.CoreFileKit';
+import { image } from '@kit.ImageKit';
+
+const uri = ''
+
+/*
+* FAQ:调用imageSource.createPixelMap()报错"Create PixelMap error"
+ */
+
+const createPixelMapError = async () => {
+  // [Start ResolveCreatePixelMapError_One]
+  const file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
+  const imageSource = image.createImageSource(file.fd);
+  const pixelMap = await imageSource.createPixelMap({sampleSize: 2, rotate: 0});
+  // [End ResolveCreatePixelMapError_One]
+}
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/ResolveCreatePixelMapError.ets b/ImageKit/entry/src/main/ets/pages/ResolveCreatePixelMapError_Two.ets
similarity index 77%
rename from ImageKit/entry/src/main/ets/pages/ResolveCreatePixelMapError.ets
rename to ImageKit/entry/src/main/ets/pages/ResolveCreatePixelMapError_Two.ets
index 75af7653d40dd3734da2b3f81d1576307ee88df2..06c4c7211cdae89f3f057915f6aa0e27a25c9089 100644
--- a/ImageKit/entry/src/main/ets/pages/ResolveCreatePixelMapError.ets
+++ b/ImageKit/entry/src/main/ets/pages/ResolveCreatePixelMapError_Two.ets
@@ -17,13 +17,7 @@
 * FAQ:调用imageSource.createPixelMap()报错"Create PixelMap error"
  */
 
-// DocsCode 1
-const file = fs.openSync(uri, fs.OpenMode.READ_ONLY);
-const imageSource = image.createImageSource(file.fd);
-const pixelMap = await imageSource.createPixelMap({sampleSize: 2, rotate: 0});
-// DocsCode 1
-
-// DocsCode 2
+// [Start ResolveCreatePixelMapError_Two]
 import { BusinessError } from '@kit.BasicServicesKit';
 import { image } from '@kit.ImageKit';
 
@@ -32,13 +26,13 @@ let decodingOptions: image.DecodingOptions = {
   desiredPixelFormat: 3,
   desiredSize: { width: 4, height: 6 }
 }
-const context: Context = this.getUIContext().getHostContext()!;
+const context: Context = AppStorage.get("context")!;
 const filePath: string = context.cacheDir + '/test.jpg';
 const imageSource: image.ImageSource = image.createImageSource(filePath);
-// 创建pixelMap并进行简单的旋转和缩放
+// Create PixelMap and perform simple rotation and scaling
 imageSource.createPixelMap(decodingOptions).then((pixelMap: image.PixelMap) => {
   console.log("Succeeded in creating PixelMap")
 }).catch((err: BusinessError) => {
   console.error("Failed to create PixelMap")
 });
-// DocsCode 2
\ No newline at end of file
+// [End ResolveCreatePixelMapError_Two]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/ResolveErrorCode62980096.ets b/ImageKit/entry/src/main/ets/pages/ResolveErrorCode62980096.ets
index ece1b7db0e119e3acdf89dcfc67cd540758aa48e..82aefb989d9c74988507bb33b1ed55b04c3aa881 100644
--- a/ImageKit/entry/src/main/ets/pages/ResolveErrorCode62980096.ets
+++ b/ImageKit/entry/src/main/ets/pages/ResolveErrorCode62980096.ets
@@ -17,7 +17,7 @@
 * FAQ:错误码62980096怎么处理
  */
 
-// DocsCode 1
+// [Start ResolveErrorCode62980096]
 import { image } from '@kit.ImageKit';
 
 @Entry
@@ -63,4 +63,4 @@ struct Index {
     .height('100%')
   }
 }
-// DocsCode 1
\ No newline at end of file
+// [End ResolveErrorCode62980096]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/SaveVideoFrameDataLocally.ets b/ImageKit/entry/src/main/ets/pages/SaveVideoFrameDataLocally.ets
index a4f8c8edc473db19aff9e21942f308f997d709dc..720b0df0f3772e02cb2717e5db38a97189dabb07 100644
--- a/ImageKit/entry/src/main/ets/pages/SaveVideoFrameDataLocally.ets
+++ b/ImageKit/entry/src/main/ets/pages/SaveVideoFrameDataLocally.ets
@@ -12,57 +12,71 @@
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
+import { image } from '@kit.ImageKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { fileIo as fs } from '@kit.CoreFileKit';
+
+const context = AppStorage.get("context") as UIContext;
 
 /*
 * FAQ:如何把ImageReceiver收到的视频帧数据保存到本地
  */
 
-// DocsCode 1
-let size: image.Size = {
-  width: 640,
-  height: 480
-}
-let receiver: image.ImageReceiver = image.createImageReceiver(size, image.ImageFormat.JPEG, 8);
-receiver.on('imageArrival', () => {
-  console.info("imageArrival callback");
-  receiver.readNextImage((err: BusinessError, nextImage: image.Image) => {
-    if (err || nextImage === undefined) {
-      console.error("receiveImage -error:" + err + " nextImage:" + nextImage);
-      return;
-    }
-    nextImage.getComponent(image.ComponentType.JPEG, (err: BusinessError, imgComponent: image.Component) => {
-      if (err || imgComponent === undefined) {
-        console.error("receiveImage--getComponent -error:" + err + " imgComponent:" + imgComponent);
-        return;
-      }
+class VideoFrame {
+  imgUrl: image.PixelMap | null = null;
 
-      if (imgComponent.byteBuffer as ArrayBuffer) {
-        let sourceOptions: image.SourceOptions = {
-          sourceDensity: 120,
-          sourcePixelFormat: 8,
-          sourceSize: {
-            height: 1080,
-            width: 1920
-          },
+  saveVideoFrameDataLocally() {
+
+    // [Start SaveVideoFrameDataLocally]
+    let size: image.Size = {
+      width: 640,
+      height: 480
+    }
+    let receiver: image.ImageReceiver = image.createImageReceiver(size, image.ImageFormat.JPEG, 8);
+    receiver.on('imageArrival', () => {
+      console.info("imageArrival callback");
+      receiver.readNextImage((err: BusinessError, nextImage: image.Image) => {
+        if (err || nextImage === undefined) {
+          console.error("receiveImage -error:" + err + " nextImage:" + nextImage);
+          return;
         }
-        let imageResource = image.createImageSource(imgComponent.byteBuffer, sourceOptions);
-        let imagePackerApi = image.createImagePacker();
-        let packOpts: image.PackingOption = { format: "image/jpeg", quality: 90 };
-        const filePath: string = this.getUIContext().getHostContext()!.cacheDir + "/image.jpg";
-        let file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
-        imagePackerApi.packToFile(imageResource, file.fd, packOpts).then(() => {
-          console.error('pack success: ' + filePath);
-        }).catch((error: BusinessError) => {
-          console.error('Failed to pack the image. And the error is: ' + error);
-        })
-        imageResource.createPixelMap({}).then((res) => {
-          this.imgUrl = res;
+        nextImage.getComponent(image.ComponentType.JPEG, (err: BusinessError, imgComponent: image.Component) => {
+          if (err || imgComponent === undefined) {
+            console.error("receiveImage--getComponent -error:" + err + " imgComponent:" + imgComponent);
+            return;
+          }
+
+          if (imgComponent.byteBuffer as ArrayBuffer) {
+            let sourceOptions: image.SourceOptions = {
+              sourceDensity: 120,
+              sourcePixelFormat: 8,
+              sourceSize: {
+                height: 1080,
+                width: 1920
+              },
+            }
+            let imageResource = image.createImageSource(imgComponent.byteBuffer, sourceOptions);
+            let imagePackerApi = image.createImagePacker();
+            let packOpts: image.PackingOption = { format: "image/jpeg", quality: 90 };
+            const filePath: string = context.getHostContext()!.cacheDir + "/image.jpg";
+            let file = fs.openSync(filePath, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
+            imagePackerApi.packToFile(imageResource, file.fd, packOpts).then(() => {
+              console.error('pack success: ' + filePath);
+            }).catch((error: BusinessError) => {
+              console.error('Failed to pack the image. And the error is: ' + error);
+            })
+            imageResource.createPixelMap({}).then((res) => {
+              this.imgUrl = res;
+            });
+          } else {
+            return;
+          }
+          nextImage.release();
         });
-      } else {
-        return;
-      }
-      nextImage.release();
+      });
     });
-  });
-});
-// DocsCode 1
\ No newline at end of file
+    // [End SaveVideoFrameDataLocally]
+
+  }
+
+}
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/SaveWebPictureToAlbum.ets b/ImageKit/entry/src/main/ets/pages/SaveWebPictureToAlbum.ets
index 448ac95614a16df3ed66e3fae7581494228f01b2..4ac93bbc459e4442cb9e61eaf39dc9c2b318762a 100644
--- a/ImageKit/entry/src/main/ets/pages/SaveWebPictureToAlbum.ets
+++ b/ImageKit/entry/src/main/ets/pages/SaveWebPictureToAlbum.ets
@@ -17,7 +17,7 @@
 * FAQ:如何保存网络图片到相册
 */
 
-// DocsCode 1
+// [Start SaveWebPictureToAlbum]
 import { http } from '@kit.NetworkKit';
 import { image } from '@kit.ImageKit';
 import { BusinessError } from '@kit.BasicServicesKit';
@@ -115,4 +115,4 @@ struct SaveImage {
     .backgroundColor(0xF1F3F5)
   }
 }
-// DocsCode 1
\ No newline at end of file
+// [End SaveWebPictureToAlbum]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/SelectedAlbumPictureGeneratePixelMap.ets b/ImageKit/entry/src/main/ets/pages/SelectedAlbumPictureGeneratePixelMap_One.ets
similarity index 60%
rename from ImageKit/entry/src/main/ets/pages/SelectedAlbumPictureGeneratePixelMap.ets
rename to ImageKit/entry/src/main/ets/pages/SelectedAlbumPictureGeneratePixelMap_One.ets
index d963559a697acfc7fb8bd34ab5c1ab47a684b954..8dd915ae98a68b45375058bac2830a3c2d4ffc1d 100644
--- a/ImageKit/entry/src/main/ets/pages/SelectedAlbumPictureGeneratePixelMap.ets
+++ b/ImageKit/entry/src/main/ets/pages/SelectedAlbumPictureGeneratePixelMap_One.ets
@@ -17,13 +17,13 @@
 * FAQ:如何将相册选择的图片生成PixelMap
 */
 
-// DocsCode 1
+// [Start SelectedAlbumPictureGeneratePixelMap_One]
 import { photoAccessHelper } from '@kit.MediaLibraryKit';
 import { BusinessError } from '@kit.BasicServicesKit';
 import { dataSharePredicates } from '@kit.ArkData';
 import { common } from '@kit.AbilityKit';
 
-const context = UIContext.getHostContext() as common.UIAbilityContext;
+const context = AppStorage.get("context") as common.UIAbilityContext;
 @Entry
 @Component
 struct WebComponent {
@@ -77,54 +77,4 @@ struct WebComponent {
     }
   }
 }
-// DocsCode 1
-
-// DocsCode 2
-import { photoAccessHelper } from '@kit.MediaLibraryKit';
-import { BusinessError } from '@kit.BasicServicesKit';
-import { image } from '@kit.ImageKit';
-import { fileIo } from '@kit.CoreFileKit';
-
-@Entry
-@Component
-struct WebComponent {
-  build() {
-    Column() {
-      Button('选择图片').onClick(() => {
-        try {
-          let uris: Array<string> = [];
-          let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
-          PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
-          PhotoSelectOptions.maxSelectNumber = 1;
-          let photoPicker = new photoAccessHelper.PhotoViewPicker();
-          photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
-            uris = PhotoSelectResult.photoUris;
-            let file = fileIo.openSync(uris[0], fileIo.OpenMode.READ_ONLY);
-            console.info('file fd: ' + file.fd);
-            let buffer = new ArrayBuffer(4096);
-            let readLen = fileIo.readSync(file.fd, buffer);
-            console.info('readSync data to file succeed and buffer size is:' + readLen);
-            const imageSource: image.ImageSource = image.createImageSource(file.fd);
-            let decodingOptions: image.DecodingOptions = {
-              editable: true,
-              desiredPixelFormat: 3,
-            }
-            imageSource.createPixelMap(decodingOptions, (err: BusinessError, pixelMap: image.PixelMap) => {
-              if (err !== undefined) {
-                console.error(`Failed to create pixelMap.code is ${err.code},message is ${err.message}`);
-              } else {
-                console.info('Succeeded in creating pixelMap object.');
-              }
-            })
-          }).catch((err: BusinessError) => {
-            console.error(`Invoke photoPicker.select failed, code is ${err.code}, message is ${err.message}`);
-          })
-        } catch (error) {
-          let err: BusinessError = error as BusinessError;
-          console.error('photoPicker failed with err: ' + JSON.stringify(err));
-        }
-      })
-    }
-  }
-}
-// DocsCode 2
\ No newline at end of file
+// [End SelectedAlbumPictureGeneratePixelMap_One]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/ets/pages/SelectedAlbumPictureGeneratePixelMap_Two.ets b/ImageKit/entry/src/main/ets/pages/SelectedAlbumPictureGeneratePixelMap_Two.ets
new file mode 100644
index 0000000000000000000000000000000000000000..628efb356ae145d578b4665e914361398fab53c7
--- /dev/null
+++ b/ImageKit/entry/src/main/ets/pages/SelectedAlbumPictureGeneratePixelMap_Two.ets
@@ -0,0 +1,68 @@
+/*
+* Copyright (c) 2024 Huawei Device Co., Ltd.
+* Licensed under the Apache License, Version 2.0 (the "License");
+* you may not use this file except in compliance with the License.
+* You may obtain a copy of the License at
+*
+* http://www.apache.org/licenses/LICENSE-2.0
+*
+* Unless required by applicable law or agreed to in writing, software
+* distributed under the License is distributed on an "AS IS" BASIS,
+* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+* See the License for the specific language governing permissions and
+* limitations under the License.
+*/
+
+/*
+* FAQ:如何将相册选择的图片生成PixelMap
+*/
+
+// [Start SelectedAlbumPictureGeneratePixelMap_Two]
+import { photoAccessHelper } from '@kit.MediaLibraryKit';
+import { BusinessError } from '@kit.BasicServicesKit';
+import { image } from '@kit.ImageKit';
+import { fileIo } from '@kit.CoreFileKit';
+
+@Entry
+@Component
+struct WebComponent {
+  build() {
+    Column() {
+      Button('Select Picture').onClick(() => {
+        try {
+          let uris: Array<string> = [];
+          let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
+          PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
+          PhotoSelectOptions.maxSelectNumber = 1;
+          let photoPicker = new photoAccessHelper.PhotoViewPicker();
+          photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
+            uris = PhotoSelectResult.photoUris;
+            let file = fileIo.openSync(uris[0], fileIo.OpenMode.READ_ONLY);
+            console.info('file fd: ' + file.fd);
+            let buffer = new ArrayBuffer(4096);
+            let readLen = fileIo.readSync(file.fd, buffer);
+            console.info('readSync data to file succeed and buffer size is:' + readLen);
+            const imageSource: image.ImageSource = image.createImageSource(file.fd);
+            let decodingOptions: image.DecodingOptions = {
+              editable: true,
+              desiredPixelFormat: 3,
+            }
+            imageSource.createPixelMap(decodingOptions, (err: BusinessError, pixelMap: image.PixelMap) => {
+              if (err !== undefined) {
+                console.error(`Failed to create pixelMap.code is ${err.code},message is ${err.message}`);
+              } else {
+                console.info('Succeeded in creating pixelMap object.');
+              }
+            })
+          }).catch((err: BusinessError) => {
+            console.error(`Invoke photoPicker.select failed, code is ${err.code}, message is ${err.message}`);
+          })
+        } catch (error) {
+          let err: BusinessError = error as BusinessError;
+          console.error('photoPicker failed with err: ' + JSON.stringify(err));
+        }
+      })
+    }
+  }
+}
+// [End SelectedAlbumPictureGeneratePixelMap_Two]
\ No newline at end of file
diff --git a/ImageKit/entry/src/main/resources/base/media/sample10.png b/ImageKit/entry/src/main/resources/base/media/sample10.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/ImageKit/entry/src/main/resources/base/media/sample10.png differ
diff --git a/ImageKit/entry/src/main/resources/base/media/sample10_NV12_fromJPG_510X510.png b/ImageKit/entry/src/main/resources/base/media/sample10_NV12_fromJPG_510X510.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/ImageKit/entry/src/main/resources/base/media/sample10_NV12_fromJPG_510X510.png differ
diff --git a/ImageKit/entry/src/main/resources/base/media/sample14.png b/ImageKit/entry/src/main/resources/base/media/sample14.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/ImageKit/entry/src/main/resources/base/media/sample14.png differ
diff --git a/ImageKit/entry/src/main/resources/base/media/sample14_NV21_fromJPG_510X510.png b/ImageKit/entry/src/main/resources/base/media/sample14_NV21_fromJPG_510X510.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/ImageKit/entry/src/main/resources/base/media/sample14_NV21_fromJPG_510X510.png differ
diff --git a/ImageKit/entry/src/main/resources/base/media/sample7.png b/ImageKit/entry/src/main/resources/base/media/sample7.png
new file mode 100644
index 0000000000000000000000000000000000000000..205ad8b5a8a42e8762fbe4899b8e5e31ce822b8b
Binary files /dev/null and b/ImageKit/entry/src/main/resources/base/media/sample7.png differ
diff --git a/ImageKit/entry/src/main/resources/base/profile/main_pages.json b/ImageKit/entry/src/main/resources/base/profile/main_pages.json
index bf3989d6e57eeeb1cb5f8a619ba2f96183c3984f..55c3f007f87b7ce5206d325f968cc56f2f79441f 100644
--- a/ImageKit/entry/src/main/resources/base/profile/main_pages.json
+++ b/ImageKit/entry/src/main/resources/base/profile/main_pages.json
@@ -1,12 +1,5 @@
 {
   "src": [
-    "pages/Index",
-    "pages/PixelMapAndBase64ConverToEachOther",
-    "pages/SaveWebPictureToAlbum",
-    "pages/SelectedAlbumPictureGeneratePixelMap",
-    "pages/ResolveCreatePixelMapError",
-    "pages/SaveVideoFrameDataLocally",
-    "pages/ResolveErrorCode62980096",
-    "pages/ConvertPixelMapToCvMatFormat"
+    "pages/Index"
   ]
 }
\ No newline at end of file