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

/*
 * Copyright (C) 2024 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 {
  HeaderOptions,ImageKnife,ImageKnifeComponent,ImageKnifeData,ImageKnifeGlobal,RequestOption,ImageKnifeOption,ObjectKey
} from '@ohos/libraryimageknife'
import image from '@ohos.multimedia.image'
import { BusinessError } from '@ohos.base'

const TAG = "TEST-"
let timeId = -1

@Entry
@Component
struct testImageKnifeHttpRequestHeader {
  @State pixelMap: PixelMap | undefined = undefined;
  @State pixelMap1: PixelMap | undefined = undefined;
  @State pixelMap2: PixelMap | undefined = undefined;
  @State pixelMap3: PixelMap | undefined = undefined;
  @State domeType1: boolean = false;
  @State domeType2: boolean = false;
  @State domeType3: boolean = false;
  @State domeType4: boolean = false;
  @State domeType5: boolean = false;
  @State domeType6: boolean = false;
  @State successHeader: string = "requestOption调用成功";
  @State errorHeader: string = "requestOption调用失败";
  @State successHeader1: string = "全局调用imageKnife成功";
  @State errorHeader1: string = "全局调用imageKnife失败";
  @State successHeader2: string = "单个imageKnife组件调用成功";
  @State errorHeader2: string = "单个imageKnife组件调用失败";

  @State message: string = "图片header属性测试";
  @State headerOptions1: HeaderOptions = {
    key: "refer",
    value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
  };
  @State headerOptions2: HeaderOptions = {
    key: "xx",
    value: "http://1.94.37.200:7070/AntiTheftChain/downloadImage"
  };
  @State imageKnifeOption1: ImageKnifeOption =
    {
      loadSrc: 'http://1.94.37.200:7070/AntiTheftChain/downloadImage',
      placeholderSrc: $r('app.media.icon_loading'),
      errorholderSrc: $r('app.media.icon_failed'),
      headerOption: [this.headerOptions1]
    };
  @State imageKnifeOption2: ImageKnifeOption =
    {
      loadSrc: 'http://1.94.37.200:7070/AntiTheftChain/downloadImage',
      placeholderSrc: $r('app.media.icon_loading'),
      errorholderSrc: $r('app.media.icon_failed'),
      headerOption: [this.headerOptions2]
    };

  // RequestOption调用
  load(src: string | image.PixelMap | Resource, type: string, num: number) {
    clearTimeout(timeId)
    let request = new RequestOption()
    if (type == 'error') {
      request.addHeader('xx', src)
    } else {
      request.addHeader('refer', src)
    }
    //清理缓存
    request.signature = new ObjectKey(new Date().getTime().toString())
    request.load(src)
      .addListener({ callback: (err: BusinessError | string, data: ImageKnifeData) => {
        if (data.isPixelMap()) {
          if (data.drawPixelMap) {
            let pixelmap = data.drawPixelMap.imagePixelMap
            if (pixelmap) {
              if (num == 1) {
                this.pixelMap = pixelmap
              } else if (num == 2) {
                this.pixelMap1 = pixelmap
              } else if (num == 3) {
                this.pixelMap2 = pixelmap
              } else if (num == 4) {
                this.pixelMap3 = pixelmap
              }
            }
          }
        }
        if (data.isGIFFrame()) {
          let index: number = 0
          if (data.drawGIFFrame) {
            if (data.drawGIFFrame.imageGIFFrames) {
              let renderGif = () => {
                if (data.drawGIFFrame) {
                  if (data.drawGIFFrame.imageGIFFrames) {
                    let pixelmap = data.drawGIFFrame.imageGIFFrames[index].drawPixelMap
                    let delay = data.drawGIFFrame.imageGIFFrames[index].delay
                    if (pixelmap) {
                      if (num == 1) {
                        this.pixelMap = pixelmap
                      } else if (num == 2) {
                        this.pixelMap1 = pixelmap
                      } else if (num == 3) {
                        this.pixelMap2 = pixelmap
                      } else if (num == 4) {
                        this.pixelMap3 = pixelmap
                      }
                    }
                    index++;
                    if (index == data.drawGIFFrame.imageGIFFrames.length - 1) {
                      index = 0
                    }
                    timeId = setTimeout(renderGif, data!.drawGIFFrame!.imageGIFFrames![index].delay)
                  }
                }
              }
              renderGif()
            }
          }
        }
        if (err) {
          console.log(TAG + "error:" + JSON.stringify(err));
        }
        return false
      }
      })
    let imageknife: ImageKnife | undefined = ImageKnifeGlobal.getInstance().getImageKnife()
    if (imageknife != undefined) {
      imageknife.call(request)
    }
  }

  @Builder
  setHeader() {
    ImageKnifeComponent({
      imageKnifeOption: {
        loadSrc: this.pixelMap as image.PixelMap
      }
    }).width(200).height(200).borderWidth(1)
  }
  @Builder
  setHeader3() {
    ImageKnifeComponent({
      imageKnifeOption: {
        loadSrc: this.pixelMap1 as image.PixelMap
      }
    }).width(200).height(200).borderWidth(1)
  }
  @Builder
  setHeader1() {
    ImageKnifeComponent({
      imageKnifeOption: {
        loadSrc: this.pixelMap2 as image.PixelMap
      }
    }).width(200).height(200).borderWidth(1)
  }
  @Builder
  setHeader4() {
    ImageKnifeComponent({
      imageKnifeOption: {
        loadSrc: this.pixelMap3 as image.PixelMap
      }
    }).width(200).height(200).borderWidth(1)
  }
  @Builder
  setHeader2() {
    ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption1 })
      .margin(16)
      .width(200)
      .height(200)
  }
  @Builder
  setHeader5() {
    ImageKnifeComponent({ imageKnifeOption: this.imageKnifeOption2 })
      .margin(16)
      .width(200)
      .height(200)
  }

  build() {
    Scroll() {
      Column() {
        Text(`${this.message}`)
          .width("300vp")
          .height("60vp")
          .textAlign(TextAlign.Center)
          .fontSize("30fp")
          .fontWeight(FontWeight.Bold)
        Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) {
          Button(this.successHeader)
            .margin(16)
            .onClick(() => {
              this.domeType1 = !this.domeType1
              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'success', 1)
            })
          if (this.domeType1) {
            this.setHeader()
          }
          Button(this.errorHeader)
            .margin(16)
            .onClick(() => {
              this.domeType2 = !this.domeType2
              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'error', 2)
            })
          if (this.domeType2) {
            this.setHeader3()
          }
          Button(this.successHeader1)
            .margin(16)
            .onClick(() => {
              this.domeType3 = !this.domeType3
              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'success', 3)
            })
          if (this.domeType3) {
            this.setHeader1()
          }
          Button(this.errorHeader1)
            .margin(16)
            .onClick(() => {
              this.domeType4 = !this.domeType4
              this.load('http://1.94.37.200:7070/AntiTheftChain/downloadImage', 'error', 4)
            })
          if (this.domeType4) {
            this.setHeader4()
          }
          Button(this.successHeader2)
            .margin(16)
            .onClick(() => {
              this.domeType5 = !this.domeType5
            })
          if (this.domeType5) {
            this.setHeader2()
          }
          Button(this.errorHeader2)
            .margin(16)
            .onClick(() => {
              this.domeType6 = !this.domeType6
            })
          if (this.domeType6) {
            this.setHeader5()
          }
        }
      }.width("100%")
      .justifyContent(FlexAlign.Start)
    }
  }
}