diff --git a/zh-cn/application-dev/reference/apis/js-apis-effectKit.md b/zh-cn/application-dev/reference/apis/js-apis-effectKit.md
index 0c6f2e1c6d0936f4171997219269628d80faa390..b93ba37d994da644117a8e022b574453014360ef 100644
--- a/zh-cn/application-dev/reference/apis/js-apis-effectKit.md
+++ b/zh-cn/application-dev/reference/apis/js-apis-effectKit.md
@@ -40,13 +40,14 @@ createEffect(source: image.PixelMap): Filter
 **示例：**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
-let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let headFilter = effectKit.createEffect(pixelMap)
-    })
+let bufferArr = new Uint8Array(color);
+let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let headFilter = effectKit.createEffect(pixelMap);
+})
 ```
 
 ## effectKit.createColorPicker
@@ -72,14 +73,15 @@ createColorPicker(source: image.PixelMap): Promise\<ColorPicker>
 **示例：**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
-let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts, (pixelMap) => {
-    effectKit.createColorPicker(pixelMap).then(colorPicker => {
-            console.info("color picker=" + colorPicker);
-    })
-    .catch(ex => console.error(".error=" + ex.toString()))
+let bufferArr = new Uint8Array(color);
+let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
+image.createPixelMap(color, opts).then((pixelMap) => {
+  effectKit.createColorPicker(pixelMap).then(colorPicker => {
+    console.info("color picker=" + colorPicker);
+  }).catch(ex => console.error(".error=" + ex.toString()))
 })
 ```
 
@@ -101,17 +103,19 @@ createColorPicker(source: image.PixelMap, callback: AsyncCallback\<ColorPicker>)
 **示例：**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
-let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts, (pixelMap) => {
-    effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
-        if(error) {
-            console.log('Failed to create color picker.');
-        } else {
-            console.log('Succeeded in creating color picker.');
-        }
-    }) 
+let bufferArr = new Uint8Array(color);
+let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } }
+image.createPixelMap(color, opts).then((pixelMap) => {
+  effectKit.createColorPicker(pixelMap, (error, colorPicker) => {
+    if (error) {
+      console.log('Failed to create color picker.');
+    } else {
+      console.log('Succeeded in creating color picker.');
+    }
+  })
 })
 ```
 
@@ -150,7 +154,7 @@ getMainColor(): Promise\<Color>
 
 ```js
 colorPicker.getMainColor().then(color => {
-    console.log('Succeeded in getting main color.')
+    console.log('Succeeded in getting main color.');
     console.info("color[ARGB]=" + color.alpha + "," + color.red + "," + color.green + "," + color.blue);
 }).catch(error => {
     console.log('Failed to get main color.');
@@ -205,17 +209,17 @@ blur(radius: number): Filter
 **示例：**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
 let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let radius = 5;
-        let headFilter = effectKit.createEffect(pixelMap)
-        if (headFilter != null) {
-            headFilter.blur(radius)
-        }
-    })
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let radius = 5;
+  let headFilter = effectKit.createEffect(pixelMap);
+  if (headFilter != null) {
+    headFilter.blur(radius);
+  }
+})
 ```
 
 ### brightness
@@ -241,17 +245,17 @@ brightness(bright: number): Filter
 **示例：**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
 let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let bright = 0.5;
-        let headFilter = effectKit.createEffect(pixelMap)
-        if (headFilter != null) {
-            headFilter.brightness(bright)
-        }
-    })
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let bright = 0.5;
+  let headFilter = effectKit.createEffect(pixelMap);
+  if (headFilter != null) {
+    headFilter.brightness(bright);
+  }
+})
 ```
 
 ### grayscale
@@ -271,16 +275,16 @@ grayscale(): Filter
 **示例：**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
 let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let headFilter = effectKit.createEffect(pixelMap)
-        if (headFilter != null) {
-            headFilter.grayscale()
-        }
-    })
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let headFilter = effectKit.createEffect(pixelMap);
+  if (headFilter != null) {
+    headFilter.grayscale();
+  }
+})
 ```
 
 ### getPixelMap
@@ -300,11 +304,11 @@ getPixelMap(): image.PixelMap
 **示例：**
 
 ```js
-import image from "@ohos.multimedia.image"
+import image from "@ohos.multimedia.image";
+
 const color = new ArrayBuffer(96);
 let opts = { editable: true, pixelFormat: 3, size: { height: 4, width: 6 } };
-image.createPixelMap(color, opts)
-    .then((pixelMap) => {
-        let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap()
-    })
+image.createPixelMap(color, opts).then((pixelMap) => {
+  let pixel = effectKit.createEffect(pixelMap).grayscale().getPixelMap();
+})
 ```