diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index 6cbb7a6..aa6c080 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -164,6 +164,12 @@ struct Index {
             uri: 'pages/TestCacheDataPage',
           });
         })
+        Button("测试颜色变换").margin({top:10}).onClick(()=>{
+          router.push({
+            uri: 'pages/TestChangeColorPage',
+          });
+        })
+
       }
     } .width('100%')
     .height('100%')
diff --git a/entry/src/main/ets/pages/TestChangeColorPage.ets b/entry/src/main/ets/pages/TestChangeColorPage.ets
new file mode 100644
index 0000000..87349bb
--- /dev/null
+++ b/entry/src/main/ets/pages/TestChangeColorPage.ets
@@ -0,0 +1,97 @@
+import { drawing, common2D } from '@kit.ArkGraphics2D';
+import { ImageKnifeComponent, ImageKnifeOption } from '@ohos/imageknife';
+
+@Entry
+@Component
+struct TestChangeColorPage {
+  private imageOne: Resource = $r('app.media.test');
+  private imageTwo: Resource = $r('app.media.test');
+  @State src: Resource = this.imageOne
+  @State src2: Resource = this.imageTwo
+  @State color: common2D.Color = {
+    alpha: 255,
+    red: 255,
+    green: 1,
+    blue: 1
+  };
+  @State DrawingColorFilterFirst: ColorFilter | undefined = undefined
+
+  build() {
+    Column() {
+      Text("点击选择要更改的颜色").margin({ top: 20 })
+      Row() {
+        Button("红色").backgroundColor(Color.Red).margin(5).onClick(() => {
+          this.color = {
+            alpha: 255,
+            red: 255,
+            green: 1,
+            blue: 1
+          };
+        })
+        Button("黄色").backgroundColor(Color.Yellow).margin(5).onClick(() => {
+          this.color = {
+            alpha: 255,
+            red: 255,
+            green: 255,
+            blue: 1
+          };
+        })
+        Button("绿色").backgroundColor(Color.Green).margin(5).onClick(() => {
+          this.color = {
+            alpha: 255,
+            red: 1,
+            green: 255,
+            blue: 1
+          };
+        })
+        Button("蓝色").backgroundColor(Color.Blue).margin(5).onClick(() => {
+          this.color = {
+            alpha: 255,
+            red: 1,
+            green: 1,
+            blue: 255
+          };
+        })
+      }
+      .width('100%')
+      .height(50)
+      .justifyContent(FlexAlign.Center)
+
+      Text("原图：").margin({ top: 20 })
+      ImageKnifeComponent({
+        imageKnifeOption: new ImageKnifeOption({
+          loadSrc: this.src
+        })
+      }).width(110).height(110)
+
+      Text("点击图片更改图片颜色：").margin({ top: 30 })
+      ImageKnifeComponent({
+        imageKnifeOption: new ImageKnifeOption({
+          loadSrc: this.src,
+          drawingColorFilter: this.DrawingColorFilterFirst
+        })
+      })
+        .onClick(() => {
+          this.DrawingColorFilterFirst =
+            drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
+        }).width(110).height(110)
+
+      Text("测试非svg图片变色").margin({ top: 30 })
+      ImageKnifeComponent({
+        imageKnifeOption: new ImageKnifeOption({
+          loadSrc: $r('app.media.test'),
+          drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN)
+        })
+      }).width(110).height(110)
+
+      Text("测试svg图片变色").margin({ top: 30 })
+      ImageKnifeComponent({
+        imageKnifeOption: new ImageKnifeOption({
+          loadSrc: $r("app.media.test_svg"),
+          drawingColorFilter: drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN)
+        })
+      }).width(110).height(110)
+
+    }.width('100%').height('100%')
+  }
+}
\ No newline at end of file
diff --git a/entry/src/main/resources/base/media/test.png b/entry/src/main/resources/base/media/test.png
new file mode 100644
index 0000000..b0d65d0
Binary files /dev/null and b/entry/src/main/resources/base/media/test.png differ
diff --git a/entry/src/main/resources/base/media/test_svg.svg b/entry/src/main/resources/base/media/test_svg.svg
new file mode 100644
index 0000000..9910b1d
--- /dev/null
+++ b/entry/src/main/resources/base/media/test_svg.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
+        "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg t="1728377939707" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="899"
+     width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M512 993.28C245.76 993.28 30.72 778.24 30.72 512S245.76 30.72 512 30.72s481.28 215.04 481.28 481.28-215.04 481.28-481.28 481.28z m0-880.64c-220.16 0-399.36 179.2-399.36 399.36s179.2 399.36 399.36 399.36 399.36-179.2 399.36-399.36-179.2-399.36-399.36-399.36z"
+          p-id="900"></path>
+    <path d="M573.44 353.28H404.48c20.48-15.36 20.48-40.96 5.12-56.32-10.24-20.48-35.84-20.48-56.32-5.12L271.36 363.52s-5.12 5.12-5.12 10.24c0 0 0 5.12-5.12 5.12V409.6c0 5.12 5.12 10.24 10.24 15.36l81.92 81.92c5.12 5.12 15.36 10.24 25.6 10.24s20.48-5.12 30.72-10.24c15.36-15.36 15.36-40.96 0-56.32l-15.36-15.36h179.2c61.44 0 112.64 51.2 112.64 112.64 0 30.72-10.24 61.44-30.72 81.92-20.48 20.48-51.2 35.84-81.92 35.84h-204.8c-20.48 0-40.96 20.48-40.96 40.96s20.48 40.96 40.96 40.96h204.8c51.2 0 102.4-20.48 138.24-61.44 35.84-35.84 56.32-92.16 56.32-143.36-5.12-107.52-92.16-189.44-194.56-189.44z"
+          p-id="901"></path>
+</svg>
\ No newline at end of file
diff --git a/entry/src/main/resources/base/profile/main_pages.json b/entry/src/main/resources/base/profile/main_pages.json
index 7b16f4e..e553510 100644
--- a/entry/src/main/resources/base/profile/main_pages.json
+++ b/entry/src/main/resources/base/profile/main_pages.json
@@ -23,6 +23,7 @@
     "pages/TestSetCustomImagePage",
     "pages/TestErrorHolderPage",
     "pages/TestTaskResourcePage",
-    "pages/TestCacheDataPage"
+    "pages/TestCacheDataPage",
+    "pages/TestChangeColorPage"
   ]
 }
\ No newline at end of file