demo修改

entry/src/main/ets/pages/DownsamplingPage.ets

@@ -22,13 +22,14 @@ struct Index {
   @State w:number = 0
   @State BytesNumber1:number = 0
   @State BytesNumber2:number = 0
+  @State url:string = ''
   @State ImageKnifeOption1: ImageKnifeOption = {
     loadSrc: $r('app.media.icon'),
     placeholderSrc: $r('app.media.icon_loading'),
     errorholderSrc: $r('app.media.icon_failed')
   }
 
-  transformSquare1(mUrl:Resource) {
+  transformSquare1(mUrl:ESObject) {
     let imageKnifeOption:RequestOption  = new RequestOption();
     imageKnifeOption.load(mUrl)
       .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
@@ -38,7 +39,7 @@ struct Index {
       } })
     ImageKnife?.call(imageKnifeOption);
   }
-  transformSquare2(mUrl:Resource) {
+  transformSquare2(mUrl:ESObject) {
     let imageKnifeOption:RequestOption = new RequestOption();
     imageKnifeOption.load(mUrl)
       .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
@@ -67,123 +68,255 @@ struct Index {
   build() {
     Scroll(){
       Column() {
-        Text('原图')
+        Row(){
-        Flex(){
+          Button('切换网络图片')
-          Button('png')
+          Text('输入网络图片url')
-            .onClick(() => {
+          TextInput({ placeholder: '输入url' })
-              this.transformSquare1(pngUrl);
+            .onChange((urls)=>{
+              this.url =urls
+            })
+        }
+        if(this.url!==''){
+          Column(){
+            Text('原图')
+            Flex(){
+              Button('png')
+                .onClick(() => {
+                  this.transformSquare1(this.url);
 
-            });
+                });
-          Button('svg')
+              Button('svg')
-            .onClick(() => {
+                .onClick(() => {
-              this.transformSquare1(svgUrl);
+                  this.transformSquare1(this.url);
 
-            });
+                });
-          Button('bmp')
+              Button('bmp')
-            .onClick(() => {
+                .onClick(() => {
-              this.transformSquare1(bmpUrl);
+                  this.transformSquare1(this.url);
 
-            });
+                });
-          Button('jpp')
+              Button('jpp')
-            .onClick(() => {
+                .onClick(() => {
-              this.transformSquare1(jpgUrl);
+                  this.transformSquare1(this.url);
 
-            });
+                });
-          Button('gif')
+              Button('gif')
-            .onClick(() => {
+                .onClick(() => {
-              this.transformSquare1(gifUrl);
+                  this.transformSquare1(this.url);
 
-            });
+                });
-          Button('webp')
+              Button('webp')
-            .onClick(() => {
+                .onClick(() => {
-              this.transformSquare1(webpUrl);
+                  this.transformSquare1(this.url);
 
-            });
+                });
-        }.margin({top:20,bottom:20})
+            }.margin({top:20,bottom:20})
-        Text("原图字节大小："+this.BytesNumber1)
+            Text("原图字节大小："+this.BytesNumber1)
-        Column(){
+            Column(){
-          if (this.mSquarePixelMap1) {
+              if (this.mSquarePixelMap1) {
-            Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!)
+                Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!)
-              .objectFit(ImageFit.Fill)
+                  .objectFit(ImageFit.Fill)
-              .width(200)
+                  .width(200)
-              .height(200)
+                  .height(200)
-              .margin({ top: 10 })
+                  .margin({ top: 10 })
+              }
+              Text('component用法')
+
+            }.height(300).width('100%').backgroundColor(Color.Pink)
+            Text('降采样图片')
+            Flex(){
+              Button('png')
+                .onClick(() => {
+                  this.transformSquare2(this.url);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: pngUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+              Button('svg')
+                .onClick(() => {
+                  this.transformSquare2(this.url);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: svgUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+
+                });
+              Button('bmp')
+                .onClick(() => {
+                  this.transformSquare2(this.url);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: bmpUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+              Button('jpp')
+                .onClick(() => {
+                  this.transformSquare2(this.url);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: jpgUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+              Button('gif')
+                .onClick(() => {
+                  this.transformSquare2(this.url);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: gifUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+              Button('webp')
+                .onClick(() => {
+                  this.transformSquare2(this.url);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: webpUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+            }.margin({top:20,bottom:20})
+            Text("降采样字节大小:"+this.BytesNumber2)
+            this.TextInputSample()
+            Column(){
+              if (this.mSquarePixelMap2) {
+                Image(this.mSquarePixelMap2 == undefined ? '' : this.mSquarePixelMap2!)
+                  .objectFit(ImageFit.Fill)
+                  .width(200)
+                  .height(200)
+                  .margin({ top: 10 })
+              }
+              Text('component用法')
+              ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(200).height(200)
+            }.height(300).width('100%').backgroundColor(Color.Pink)
           }
-          Text('component用法')
+        }else {
+          Column(){
+            Text('原图')
+            Flex(){
+              Button('png')
+                .onClick(() => {
+                  this.transformSquare1(pngUrl);
 
-        }.height(300).width('100%').backgroundColor(Color.Pink)
+                });
-        Text('降采样图片')
+              Button('svg')
-        Flex(){
+                .onClick(() => {
-          Button('png')
+                  this.transformSquare1(svgUrl);
-            .onClick(() => {
-              this.transformSquare2(pngUrl);
-              this.ImageKnifeOption1 = {
-                loadSrc: pngUrl,
-                placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
-              }
-            });
-          Button('svg')
-            .onClick(() => {
-              this.transformSquare2(svgUrl);
-              this.ImageKnifeOption1 = {
-                loadSrc: svgUrl,
-                placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
-              }
 
-            });
+                });
-          Button('bmp')
+              Button('bmp')
-            .onClick(() => {
+                .onClick(() => {
-              this.transformSquare2(bmpUrl);
+                  this.transformSquare1(bmpUrl);
-              this.ImageKnifeOption1 = {
-                loadSrc: bmpUrl,
-                placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
-              }
-            });
-          Button('jpp')
-            .onClick(() => {
-              this.transformSquare2(jpgUrl);
-              this.ImageKnifeOption1 = {
-                loadSrc: jpgUrl,
-                placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
-              }
-            });
-          Button('gif')
-            .onClick(() => {
-              this.transformSquare2(gifUrl);
-              this.ImageKnifeOption1 = {
-                loadSrc: gifUrl,
-                placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
-              }
-            });
-          Button('webp')
-            .onClick(() => {
-              this.transformSquare2(webpUrl);
-              this.ImageKnifeOption1 = {
-                loadSrc: webpUrl,
-                placeholderSrc: $r('app.media.icon_loading'),
-                errorholderSrc: $r('app.media.icon_failed'),
-              }
-            });
-        }.margin({top:20,bottom:20})
 
-        Text("降采样字节大小:"+this.BytesNumber2)
+                });
-        this.TextInputSample()
+              Button('jpp')
-        Column(){
+                .onClick(() => {
-          if (this.mSquarePixelMap2) {
+                  this.transformSquare1(jpgUrl);
-            Image(this.mSquarePixelMap2 == undefined ? '' : this.mSquarePixelMap2!)
+
-              .objectFit(ImageFit.Fill)
+                });
-              .width(200)
+              Button('gif')
-              .height(200)
+                .onClick(() => {
-              .margin({ top: 10 })
+                  this.transformSquare1(gifUrl);
+
+                });
+              Button('webp')
+                .onClick(() => {
+                  this.transformSquare1(webpUrl);
+
+                });
+            }.margin({top:20,bottom:20})
+            Text("原图字节大小："+this.BytesNumber1)
+            Column(){
+              if (this.mSquarePixelMap1) {
+                Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!)
+                  .objectFit(ImageFit.Fill)
+                  .width(200)
+                  .height(200)
+                  .margin({ top: 10 })
+              }
+              Text('component用法')
+
+            }.height(300).width('100%').backgroundColor(Color.Pink)
+            Text('降采样图片')
+            Flex(){
+              Button('png')
+                .onClick(() => {
+                  this.transformSquare2(pngUrl);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: pngUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+              Button('svg')
+                .onClick(() => {
+                  this.transformSquare2(svgUrl);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: svgUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+
+                });
+              Button('bmp')
+                .onClick(() => {
+                  this.transformSquare2(bmpUrl);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: bmpUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+              Button('jpp')
+                .onClick(() => {
+                  this.transformSquare2(jpgUrl);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: jpgUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+              Button('gif')
+                .onClick(() => {
+                  this.transformSquare2(gifUrl);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: gifUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+              Button('webp')
+                .onClick(() => {
+                  this.transformSquare2(webpUrl);
+                  this.ImageKnifeOption1 = {
+                    loadSrc: webpUrl,
+                    placeholderSrc: $r('app.media.icon_loading'),
+                    errorholderSrc: $r('app.media.icon_failed'),
+                  }
+                });
+            }.margin({top:20,bottom:20})
+            Text("降采样字节大小:"+this.BytesNumber2)
+            this.TextInputSample()
+            Column(){
+              if (this.mSquarePixelMap2) {
+                Image(this.mSquarePixelMap2 == undefined ? '' : this.mSquarePixelMap2!)
+                  .objectFit(ImageFit.Fill)
+                  .width(200)
+                  .height(200)
+                  .margin({ top: 10 })
+              }
+              Text('component用法')
+              ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(200).height(200)
+            }.height(300).width('100%').backgroundColor(Color.Pink)
           }
-          Text('component用法')
+        }
-          ImageKnifeComponent({ imageKnifeOption: this.ImageKnifeOption1 }).width(200).height(200)
+
-        }.height(300).width('100%').backgroundColor(Color.Pink)
+
       }
     }
     .height('100%')