diff --git a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
index 13bedbe..0af972e 100644
--- a/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
+++ b/library/src/main/ets/components/imageknife/ImageKnifeComponent.ets
@@ -24,6 +24,8 @@ import { LogUtil } from '../imageknife/utils/LogUtil'
 import { BusinessError } from '@ohos.base'
 import common from '@ohos.app.ability.common'
 import { ObjectKey } from './ObjectKey'
+import componentUtils from '@ohos.arkui.componentUtils'
+import inspector from '@ohos.arkui.inspector'
 
 @Component
 export struct ImageKnifeComponent {
@@ -92,33 +94,15 @@ export struct ImageKnifeComponent {
   private detachFromLayoutGIF :DetachFromLayout|undefined = undefined;
 
   private detachFromLayoutPixelMap :DetachFromLayout|undefined = undefined;
-
+  listener: inspector.ComponentObserver = inspector.createComponentObserver("ImageKnifeCanvas")
+  private value: componentUtils.ComponentInfo = componentUtils.getRectangleById("ImageKnifeCanvas")
 
   build() {
     Canvas(this.context)
+      .key("ImageKnifeCanvas")
       .width('100%')
       .height('100%')
       .renderFit(RenderFit.RESIZE_FILL)
-      .onAreaChange((oldValue: Area, newValue: Area) => {
-        if(newValue != undefined && newValue.width != undefined && newValue.height != undefined) {
-          this.currentWidth = newValue.width as number
-          this.currentHeight = newValue.height as number
-          this.lastWidth = oldValue.width as number
-          this.lastHeight = oldValue.height as number
-          if (this.currentWidth <= 0 || this.currentHeight <= 0) {
-            // 存在宽或者高为0,此次重回无意义,无需进行request请求
-          } else {
-            // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同  条件2:当前是第一次绘制
-            if ((this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag) {
-              this.firstDrawFlag = false;
-              LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + '  currentHeight=' + this.currentHeight)
-              this.imageKnifeExecute()
-            }
-          }
-        }else{
-          LogUtil.log('ImageKnifeComponent onAreaChange Error newValue is undefined')
-        }
-      })
       .onReady(() => {
         let ctx = this.context;
         ctx.imageSmoothingEnabled = this.imageSmoothingEnabled;
@@ -141,6 +125,23 @@ export struct ImageKnifeComponent {
         }
       })
   }
+  onLayoutComplete:()=>void = ():void=>{
+    this.value = componentUtils.getRectangleById("ImageKnifeCanvas");
+    this.currentWidth = px2vp(this.value.size.width)
+    this.currentHeight = px2vp(this.value.size.height)
+    if (this.currentWidth <= 0 || this.currentHeight <= 0) {
+      // 存在宽或者高为0,此次重回无意义,无需进行request请求
+    } else {
+      // 前提：宽高值均有效,值>0. 条件1：当前宽高与上一次宽高不同  条件2:当前是第一次绘制
+      if ((this.currentHeight != this.lastHeight || this.currentWidth != this.lastWidth) || this.firstDrawFlag) {
+        this.firstDrawFlag = false;
+        LogUtil.log('ImageKnifeComponent onAreaChange And Next To Execute. Canvas currentWidth =' + this.currentWidth + '  currentHeight=' + this.currentHeight)
+        this.lastWidth = this.currentWidth
+        this.lastHeight = this.currentHeight
+        this.imageKnifeExecute()
+      }
+    }
+  }
 
   watchImageKnifeOption() {
     LogUtil.log('ImageKnifeComponent watchImageKnifeOption is happened!')
@@ -625,6 +626,8 @@ export struct ImageKnifeComponent {
     LogUtil.log('ImageKnifeComponent aboutToAppear happened!')
     this.canvasHasReady = false;
     this.whetherWaitSize(true);
+
+    this.listener.on("layout",this.onLayoutComplete)
   }
 
   aboutToDisappear() {
@@ -639,6 +642,7 @@ export struct ImageKnifeComponent {
       this.detachFromLayoutPixelMap.detach();
     }
     this.resetGifData();
+    this.listener.off("layout",this.onLayoutComplete)
   }
 
   onPageShow() {