ImageKnife/entry/src/main/ets/pages/DownSamplePage.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 { DownsampleStrategy, ImageKnifeOption, } from '@ohos/imageknife';
import { ImageKnifeComponent, BlurTransformation, } from '@ohos/libraryimageknife';
import { image } from '@kit.ImageKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { Downsampler } from '@ohos/imageknife/src/main/ets/downsampling/Downsampler';
import { FileTypeUtil } from '@ohos/imageknife/src/main/ets/utils/FileTypeUtil';

@Entry
@ComponentV2
struct DownSamplePage {
  @Local imageKnifeOption: ImageKnifeOption = new ImageKnifeOption( {
    loadSrc: $r('app.media.startIcon'),
    placeholderSrc: $r("app.media.loading"),
    errorholderSrc: $r("app.media.app_icon"),
    objectFit: ImageFit.Contain
  })
  isBrightness: boolean = false
  @Local beforeSampling: number = 0
  @Local afterSampling: number = 0
  @Local SamplingList: SamplingType[] = [
    new SamplingType(0, "NONE"),
    new SamplingType(1, "AT_MOST"),
    new SamplingType(2, "FIT_CENTER_MEMORY"),
    new SamplingType(4, "FIT_CENTER_QUALITY"),
    new SamplingType(5, "CENTER_INSIDE_MEMORY"),
    new SamplingType(6, "CENTER_INSIDE_QUALITY"),
    new SamplingType(7, "CENTER_OUTSIDE"),
  ]
  @Local checked: boolean = false

  updateImageKnifeOption(value: string) {
    if (value === 'NONE') {
      this.imageKnifeOption =new ImageKnifeOption( {
        loadSrc: $r('app.media.jpgSample'),
        placeholderSrc: $r("app.media.loading"),
        errorholderSrc: $r("app.media.app_icon"),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.NONE
      })
      this.originalPixMap($r('app.media.jpgSample'))
      this.afterSamplingFunc($r('app.media.jpgSample'))
    } else if (value === 'AT_MOST') {
      this.imageKnifeOption =new ImageKnifeOption( {
        loadSrc: $r('app.media.svgSample'),
        placeholderSrc: $r("app.media.loading"),
        errorholderSrc: $r("app.media.app_icon"),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.AT_MOST
      })
      this.originalPixMap($r('app.media.svgSample'))
      this.afterSamplingFunc($r('app.media.svgSample'))
    } else if (value === 'FIT_CENTER_MEMORY') {
      this.imageKnifeOption =new ImageKnifeOption( {
        loadSrc: $r('app.media.pngSample'),
        placeholderSrc: $r("app.media.loading"),
        errorholderSrc: $r("app.media.app_icon"),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.FIT_CENTER_MEMORY
      })
      this.originalPixMap($r('app.media.pngSample'))
      this.afterSamplingFunc($r('app.media.pngSample'))
    }
    else if (value ==='FIT_CENTER_QUALITY') {
      this.imageKnifeOption =new ImageKnifeOption( {
        loadSrc: $r('app.media.pngSample'),
        placeholderSrc: $r("app.media.loading"),
        errorholderSrc: $r("app.media.app_icon"),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.FIT_CENTER_QUALITY
      })
      this.originalPixMap($r('app.media.pngSample'))
      this.afterSamplingFunc($r('app.media.pngSample'))
    }
    else if (value === 'CENTER_INSIDE_MEMORY') {
      this.imageKnifeOption = new ImageKnifeOption({
        loadSrc: $r('app.media.jpgSample1'),
        placeholderSrc: $r("app.media.loading"),
        errorholderSrc: $r("app.media.app_icon"),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.CENTER_INSIDE_MEMORY
      })
      this.originalPixMap($r('app.media.jpgSample1'))
      this.afterSamplingFunc($r('app.media.jpgSample1'))
    }    else if (value === 'CENTER_INSIDE_QUALITY') {
      this.imageKnifeOption = new ImageKnifeOption({
        loadSrc: $r('app.media.jpgSample1'),
        placeholderSrc: $r("app.media.loading"),
        errorholderSrc: $r("app.media.app_icon"),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.CENTER_INSIDE_QUALITY
      })
      this.originalPixMap($r('app.media.jpgSample1'))
      this.afterSamplingFunc($r('app.media.jpgSample1'))
    }
    else {
      this.imageKnifeOption = new ImageKnifeOption({
        loadSrc: $r('app.media.jpgSample2'),
        placeholderSrc: $r("app.media.loading"),
        errorholderSrc: $r("app.media.app_icon"),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.CENTER_OUTSIDE
      })
      this.originalPixMap($r('app.media.jpgSample2'))
      this.afterSamplingFunc($r('app.media.jpgSample2'))
    }
  }

  async afterSamplingFunc(imgs: Resource) {
    let img: Uint8Array = await getContext(this).resourceManager.getMediaContent(imgs);
    let imageSource: image.ImageSource = image.createImageSource(img.buffer.slice(0));
    let fileTypeUtil = new FileTypeUtil();
    let typeValue = fileTypeUtil.getFileType(img.buffer.slice(0));
    let decodingOptions: image.DecodingOptions = {
      editable: true,
      desiredPixelFormat: 3,
    }
    let imageInfo = await imageSource.getImageInfo()
    let reqSize =
      new Downsampler().calculateScaling(typeValue, imageInfo.size.width, imageInfo.size.height, 300,
        300, this.imageKnifeOption.downsampleOf)
    decodingOptions = {
      editable: true,
      desiredSize: {
        width: reqSize.targetWidth,
        height: reqSize.targetHeight
      }
    }
    // 创建pixelMap
    imageSource.createPixelMap(decodingOptions).then((pixelMap: image.PixelMap) => {
      this.afterSampling = pixelMap.getPixelBytesNumber()
    }).catch((err: BusinessError) => {
      console.error("Failed to create PixelMap")
    });
  }

  async originalPixMap(imgs: Resource,) {
    let img: Uint8Array = await getContext(this).resourceManager.getMediaContent(imgs);
    let imageSource: image.ImageSource = image.createImageSource(img.buffer.slice(0));
    let decodingOptions: image.DecodingOptions = {
      editable: true,
      desiredPixelFormat: 3,
    }
    // 创建pixelMap
    imageSource.createPixelMap(decodingOptions).then((pixelMap: image.PixelMap) => {
      this.beforeSampling = pixelMap.getPixelBytesNumber()
    }).catch((err: BusinessError) => {
      console.error("Failed to create PixelMap")
    });
  }

  build() {
    Scroll() {
      Column() {
        ForEach(this.SamplingList, (item: SamplingType, index) => {
          Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
            Radio({ value: item.value + 'radio', group: 'radioGroup' })
              .height(50)
              .width(50)
              .checked(this.checked)
              .onClick(() => {
                this.updateImageKnifeOption(item.value)
              })
            Text("降采样规格：" + item.value).fontSize(20)
          }
        }, (item: SamplingType) => JSON.stringify(item))
        Column() {
          Text(`未降采样大小：${this.beforeSampling}`).fontSize(20)
          Text(`降采样后大小：${this.afterSampling}`).fontSize(20)
        }

        ImageKnifeComponent({
          imageKnifeOption: this.imageKnifeOption
        })
          .height(300)
          .width(300)
          .borderWidth(1)
          .borderColor(Color.Pink)
      }

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

class SamplingType {
  key: number
  value: string

  constructor(key: number, value: string) {
    this.key = key
    this.value = value
  }
}