ImageKnife/entry/src/main/ets/pages/testImageKnifeOptionChangedPage.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/imageknife'
import {ImageKnifeOption} from '@ohos/imageknife'
import {RotateImageTransformation} from '@ohos/imageknife'
import ArkWorker from '@ohos.worker'
@Entry
@Component
struct TestImageKnifeOptionChangedPage {

 private globalGifWorker:any = undefined

  @State imageKnifeOption1: ImageKnifeOption =
    {
      loadSrc: $r('app.media.jpgSample'),

      placeholderSrc: $r('app.media.icon_loading'),
      errorholderSrc: $r('app.media.icon_failed'),

    };


  build() {
    Scroll() {
      Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
        Flex({direction:FlexDirection.Row}){
           Button('本地jpg')
          .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: $r('app.media.jpgSample'),

                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed'),

              };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('png')
          .onClick(()=>{
             this.imageKnifeOption1 =  {
               loadSrc: $r('app.media.pngSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),

             };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('bmp')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.bmpSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed'),

             };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('webp')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.jpgSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('svg')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.svgSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };

           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('gif')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: $r('app.media.gifSample'),

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };

           }).margin({left:5}).backgroundColor(Color.Blue)
        }
        .margin({top:15})
        Flex({direction:FlexDirection.Row}){
           Button('网络jpg')
          .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: 'https://hbimg.huabanimg.com/cc6af25f8d782d3cf3122bef4e61571378271145735e9-vEVggB',

                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed')
              };
           }).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')
             };
           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('bmp')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://img-blog.csdn.net/20140514114029140',

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };
           }).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')
             };
           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('svg')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'http://design-svc.fat.lunz.cn/StaticFiles/BP9999999772/BV9999999422/SA9999998420/30df266a-485e-411e-b178-b9fb1d8e0748.svg',

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };
           }).margin({left:5}).backgroundColor(Color.Blue)
           Button('gif')
          .onClick(()=>{
             this.imageKnifeOption1 = {
               loadSrc: 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658',

               placeholderSrc: $r('app.media.icon_loading'),
               errorholderSrc: $r('app.media.icon_failed')
             };
           }).margin({left:5}).backgroundColor(Color.Blue)

          Button("dpg")
            .onClick(()=>{
              this.imageKnifeOption1 = {
                loadSrc: "https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg",

                placeholderSrc: $r('app.media.icon_loading'),
                errorholderSrc: $r('app.media.icon_failed')
              };
            }).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(300)
            .height(300)
        }.width(400).height(400).margin({top:10}).backgroundColor(Color.Pink)


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

  aboutToAppear() {
    console.log("aboutToAppear()")
    this.globalGifWorker = new ArkWorker.Worker('entry/ets/pages/workers/gifParseWorker.ts', {
      type: 'classic',
      name: 'ImageKnifeParseGIF'
    })
    globalThis.ImageKnife.setGifWorker(this.globalGifWorker)
  }
  aboutToDisappear(){
    if(this.globalGifWorker){
      this.globalGifWorker.terminate();
    }
  }
}