demo修改

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

@@ -1,17 +1,3 @@
-/*
- * Copyright (C) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 import { FitCenter, ImageKnifeComponent,
   ImageKnifeData,
   ImageKnifeGlobal,
@@ -19,125 +5,141 @@ import { FitCenter, ImageKnifeComponent,
   RequestOption } from '@ohos/libraryimageknife'
 import { BusinessError } from '@ohos.base'
 import { fitter, sampleNone } from '@ohos/imageknife';
-
+let pngUrl = $r('app.media.pngSample');
-let mRotate: number = 0;
+let jpgUrl = $r('app.media.jpgSample');
-let mUrl = $r('app.media.pngSample');
+let svgUrl = $r('app.media.svgSample');
+let gifUrl = $r('app.media.gifSample');
+let bmpUrl = $r('app.media.bmpSample');
+let webpUrl = $r('app.media.webpSample');
+let ImageKnife  = ImageKnifeGlobal.getInstance().getImageKnife();
 @Entry
 @Component
-struct DownsamplingPage {
+struct Index {
-  @State url: string = "";
+  @State message: string = 'Hello World';
-  @State mCropPixelMap?: PixelMap = undefined;
-  @State mRoundPixelMap?: PixelMap = undefined;
-  @State mCirclePixelMap?: PixelMap = undefined;
-  @State mCircleBorderPixelMap?: PixelMap = undefined;
-  @State mRotatePixelMap?: PixelMap = undefined;
-  @State mSquarePixelMap?: PixelMap = undefined;
   @State mSquarePixelMap1?: PixelMap = undefined;
-  @State mClipCenterPixelMap?: PixelMap = undefined;
+  @State mSquarePixelMap2?: PixelMap = undefined;
-  @State mClipBottomPixelMap?: PixelMap = undefined;
+  @State h:number = 0
-  @State mGrayscalePixelMap?: PixelMap = undefined;
+  @State w:number = 0
-  @State mBrightnessPixelMap?: PixelMap = undefined;
+  @State BytesNumber1:number = 0
-  @State mContrastPixelMap?: PixelMap = undefined;
+  @State BytesNumber2:number = 0
-  @State mInvertPixelMap?: PixelMap = undefined;
+  transformSquare1(mUrl:Resource) {
-  @State mSepiaPixelMap?: PixelMap = undefined;
-  @State mSketchPixelMap?: PixelMap = undefined;
-  @State mBlurPixelMap?: PixelMap = undefined;
-  @State mPixelPixelMap?: PixelMap = undefined;
-  @State mSwirlPixelMap?: PixelMap = undefined;
-  @State mMaskPixelMap?: PixelMap = undefined;
-  @State mKuwaharaPixelMap?: PixelMap = undefined;
-  @State mToonPixelMap?: PixelMap = undefined;
-  @State mVignettePixelMap?: PixelMap = undefined;
-  @State BytesNumber: number = 0;
-  @State BytesNumber1: number = 0;
-  @State imageKnifeOption2: ImageKnifeOption =
-    {
-      loadSrc: $r('app.media.gifSample'),
-      placeholderSrc: $r('app.media.icon_loading'),
-      errorholderSrc: $r('app.media.icon_failed'),
-      downsampling: new sampleNone()
-    };
-
-  build() {
-    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
-      Column() {
-        Column() {
-          Column() {
-            Text("大小:" + this.BytesNumber).fontColor(Color.Gray).fontSize(16);
-            Button() {
-              Text($r("app.string.trans_square")).fontSize(13).fontColor(Color.White)
-            }
-            .height(35)
-            .width(120)
-            .margin({ top: 10 })
-            .onClick(() => {
-              this.transformSquare();
-            });
-            if (this.mSquarePixelMap) {
-              Image(this.mSquarePixelMap == undefined ? "" : this.mSquarePixelMap!)
-                .objectFit(ImageFit.Fill)
-                .width(200)
-                .height(200)
-                .margin({ top: 10 })
-            }
-          }.margin({ top: 10 });
-        }.margin({ bottom: 30 });
-        Column() {
-          Column() {
-            Text("大小:" + this.BytesNumber1).fontColor(Color.Gray).fontSize(16);
-            Button() {
-              Text('降采样').fontSize(13).fontColor(Color.White)
-            }
-            .height(35).width(120)
-            .margin({ top: 10 })
-            .onClick(() => {
-              this.transformSquare1();
-            });
-            if (this.mSquarePixelMap1) {
-              Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!)
-                .objectFit(ImageFit.Fill)
-                .width(200)
-                .height(200)
-                .margin({ top: 10 })
-            }
-          }.margin({ top: 10 });
-        }.margin({ bottom: 30 });
-        Column() {
-          Column() {
-            Text("ImageKnifeComponent用法").fontColor(Color.Gray).fontSize(16);
-            // ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 })
-            //   .width(200)
-            //   .height(200)
-          }.margin({ top: 10 });
-        }.margin({ bottom: 30 });
-      }
-    }.width('100%').height('100%');
-  }
-
-  //正方形裁剪
-  transformSquare() {
     let imageKnifeOption:RequestOption  = new RequestOption();
-    imageKnifeOption.load(mUrl)
-      .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
-        this.mSquarePixelMap = data.drawPixelMap?.imagePixelMap as PixelMap;
-        this.BytesNumber = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber()
-        return false;
-      } })
-    ImageKnife?.call(imageKnifeOption);
-  }
-
-  transformSquare1() {
-    let imageKnifeOption:RequestOption = new RequestOption();
     imageKnifeOption.load(mUrl)
       .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
         this.mSquarePixelMap1 = data.drawPixelMap?.imagePixelMap as PixelMap;
         this.BytesNumber1 = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber()
         return false;
       } })
-      .setImageViewSize({ width: 800, height: 500 })
+    ImageKnife?.call(imageKnifeOption);
+  }
+  transformSquare2(mUrl:Resource) {
+    let imageKnifeOption:RequestOption = new RequestOption();
+    imageKnifeOption.load(mUrl)
+      .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
+        this.mSquarePixelMap2 = data.drawPixelMap?.imagePixelMap as PixelMap;
+        this.BytesNumber2 = (data.drawPixelMap?.imagePixelMap as PixelMap).getPixelBytesNumber()
+        return false;
+      } })
+      .setImageViewSize({ width: this.w, height:this.h})
       .downsampleStrategy(new fitter())
     ImageKnife?.call(imageKnifeOption);
   }
+  @Builder
+  TextInputSample() {
+    Flex() {
+      TextInput({ placeholder: '输入宽' })
+        .onChange((EnterKeyType)=>{
+          this.w =Number(EnterKeyType)
+        })
+      TextInput({ placeholder: '输入高' })
+        .onChange((EnterKeyType)=>{
+          this.h =Number(EnterKeyType)
+        })
+    }.padding(20)
+  }
+
+  build() {
+    Scroll(){
+      Column() {
+        Text('原图')
+        Flex(){
+          Button('png')
+            .onClick(() => {
+              this.transformSquare1(pngUrl);
+            });
+          Button('svg')
+            .onClick(() => {
+              this.transformSquare1(svgUrl);
+            });
+          Button('bmp')
+            .onClick(() => {
+              this.transformSquare1(bmpUrl);
+            });
+          Button('jpp')
+            .onClick(() => {
+              this.transformSquare1(jpgUrl);
+            });
+          Button('gif')
+            .onClick(() => {
+              this.transformSquare1(gifUrl);
+            });
+          Button('webp')
+            .onClick(() => {
+              this.transformSquare1(webpUrl);
+            });
+        }.margin({top:20,bottom:20})
+        Text("原图字节大小")
+        Column(){
+          if (this.mSquarePixelMap1) {
+            Image(this.mSquarePixelMap1 == undefined ? '' : this.mSquarePixelMap1!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+          }
+        }.height(300).width('100%').backgroundColor(Color.Pink)
+        Text('降采样图片')
+        Flex(){
+          Button('png')
+            .onClick(() => {
+              this.transformSquare2(pngUrl);
+            });
+          Button('svg')
+            .onClick(() => {
+              this.transformSquare2(svgUrl);
+            });
+          Button('bmp')
+            .onClick(() => {
+              this.transformSquare2(bmpUrl);
+            });
+          Button('jpp')
+            .onClick(() => {
+              this.transformSquare2(jpgUrl);
+            });
+          Button('gif')
+            .onClick(() => {
+              this.transformSquare2(gifUrl);
+            });
+          Button('webp')
+            .onClick(() => {
+              this.transformSquare2(webpUrl);
+            });
+        }.margin({top:20,bottom:20})
+
+        Text("降采样字节大小")
+        this.TextInputSample()
+        Column(){
+          if (this.mSquarePixelMap2) {
+            Image(this.mSquarePixelMap2 == undefined ? '' : this.mSquarePixelMap2!)
+              .objectFit(ImageFit.Fill)
+              .width(200)
+              .height(200)
+              .margin({ top: 10 })
+          }
+        }.height(300).width('100%').backgroundColor(Color.Pink)
+      }
+    }
+    .height('100%')
+  }
 }
 
-let ImageKnife  = ImageKnifeGlobal.getInstance().getImageKnife();