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) => {
@@ -66,6 +67,135 @@ struct Index {
 
   build() {
     Scroll(){
+      Column() {
+        Row(){
+          Button('切换网络图片')
+          Text('输入网络图片url')
+          TextInput({ placeholder: '输入url' })
+            .onChange((urls)=>{
+              this.url =urls
+            })
+        }
+        if(this.url!==''){
+          Column(){
+            Text('原图')
+            Flex(){
+              Button('png')
+                .onClick(() => {
+                  this.transformSquare1(this.url);
+
+                });
+              Button('svg')
+                .onClick(() => {
+                  this.transformSquare1(this.url);
+
+                });
+              Button('bmp')
+                .onClick(() => {
+                  this.transformSquare1(this.url);
+
+                });
+              Button('jpp')
+                .onClick(() => {
+                  this.transformSquare1(this.url);
+
+                });
+              Button('gif')
+                .onClick(() => {
+                  this.transformSquare1(this.url);
+
+                });
+              Button('webp')
+                .onClick(() => {
+                  this.transformSquare1(this.url);
+
+                });
+            }.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(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)
+          }
+        }else {
           Column(){
             Text('原图')
             Flex(){
@@ -170,7 +300,6 @@ struct Index {
                   }
                 });
             }.margin({top:20,bottom:20})
-
             Text("降采样字节大小:"+this.BytesNumber2)
             this.TextInputSample()
             Column(){
@@ -186,6 +315,10 @@ struct Index {
             }.height(300).width('100%').backgroundColor(Color.Pink)
           }
         }
+
+
+      }
+    }
     .height('100%')
   }
 }