ImageKnife/entry/src/main/ets/pages/testImageKnifeOptionChangedPage3.ets

/*
 * 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 {ImageKnifeComponent} from '@ohos/libraryimageknife'
import {ImageKnifeOption} from '@ohos/libraryimageknife'
import {ImageKnifeGlobal} from '@ohos/libraryimageknife'
import {ImageKnife} from '@ohos/libraryimageknife'
import {ScaleType} from '@ohos/libraryimageknife'
import {RotateImageTransformation} from '@ohos/libraryimageknife'
import {GrayscaleTransformation} from '@ohos/libraryimageknife'
import {SketchFilterTransformation} from '@ohos/libraryimageknife'
import ArkWorker from '@ohos.worker'
import worker from '@ohos.worker'
import {BaseTransform} from '@ohos/libraryimageknife'
import image from '@ohos.multimedia.image'
@Entry
@Component
struct TestImageKnifeOptionChangedPage3 {

  @State imageKnifeOption1: ImageKnifeOption =
    {
      loadSrc: $r('app.media.jpgSample'),
      mainScaleType: ScaleType.FIT_CENTER,
      placeholderSrc: $r('app.media.icon_loading'),
      errorholderSrc: $r('app.media.icon_failed'),
    };
  @State compWidht:number = 300
  @State compHeight:number = 300


  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Flex({direction:FlexDirection.Row}){
          Button("本地jpg")
            .onClick(()=>{
              let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.jpgSample'),
                mainScaleType: ScaleType.FIT_CENTER,
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
                thumbSizeMultiplier:0.1,
                transformation:rotateTrans,
              };

            }).margin({left:5}).backgroundColor(Color.Blue)
          Button("本地png")
            .onClick(()=>{

              let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.pngSample'),
                mainScaleType: ScaleType.FIT_CENTER,
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
                thumbSizeMultiplier:0.1,
                transformation:rotateTrans,
              };

            }).margin({left:5}).backgroundColor(Color.Blue)
        }.margin({top:15})
        Flex({direction:FlexDirection.Row}){
          Button("本地bmp")
            .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.bmpSample'),
                mainScaleType: ScaleType.FIT_CENTER,
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
                thumbSizeMultiplier:0.1,
                transformations:[new GrayscaleTransformation()],
              };

            }).margin({left:5}).backgroundColor(Color.Blue)
          Button("本地webp")
            .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.webpSample'),
                mainScaleType: ScaleType.FIT_CENTER,
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
                thumbSizeMultiplier:0.1,
                transformations:[new SketchFilterTransformation()],
              };

            }).margin({left:5}).backgroundColor(Color.Blue)
        }.margin({top:15})
        Flex({direction:FlexDirection.Row}){
           Button("网络jpg")
          .onClick(()=>{
            let rotateTrans:BaseTransform<image.PixelMap> = new RotateImageTransformation(180)
              this.imageKnifeOption1 = {
                loadSrc: "https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB",
                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),
                displayProgress:true,
                thumbSizeMultiplier:0.1,
                transformation:rotateTrans
              };
           }).margin({left:5}).backgroundColor(Color.Blue)
           Button("网络png")
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: "https://img-blog.csdnimg.cn/20191215043500229.png",
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
               displayProgress:true,
               thumbSizeMultiplier:0.1,
               transformations:[new RotateImageTransformation(180)]
             };
           }).margin({left:5}).backgroundColor(Color.Blue)
        }.margin({top:15})
        Flex({direction:FlexDirection.Row}){
           Button("网络bmp")
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: "https://img-blog.csdn.net/20140514114029140",
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
               displayProgress:true,
               thumbSizeMultiplier:0.1,
               transformations:[new GrayscaleTransformation()]
             };
           }).margin({left:5}).backgroundColor(Color.Blue)
           Button("网络webp")
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: "https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp",
               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),
               displayProgress:true,
               thumbSizeMultiplier:0.1,
             };
           }).margin({left:5}).backgroundColor(Color.Blue)
        }.margin({top:15})

        Text("下面为展示图片区域").margin({top:5})
        Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }){
          ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 }).width(this.compWidht).height(this.compHeight)
        }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)


      }
    }
    .width('100%')
    .height('100%')
  }
  aboutToAppear() {

  }
  aboutToDisappear(){
  }
}