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 } 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
@Component
struct DownSamplePage {
  @State imageKnifeOption: ImageKnifeOption = {
    loadSrc: $r('app.media.startIcon'),
    placeholderSrc: $r('app.media.loading'),
    errorholderSrc: $r('app.media.app_icon'),
    objectFit: ImageFit.Contain
  }
  isBrightness: boolean = false
  @State beforeSampling: number = 0
  @State afterSampling: number = 0
  @State SamplingList: SamplingType[] = [

    new SamplingType(7, 'AT_LEAST'),
    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(0, 'NONE'),

  ]
  @State checked: boolean = false

  updateImageKnifeOption(value: string) {
    if (value === 'NONE') {
      this.imageKnifeOption = {
        loadSrc: $r('app.media.pngSample'),
        placeholderSrc: $r('app.media.loading'),
        errorholderSrc: $r('app.media.app_icon'),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.NONE
      }
      this.originalPixMap($r('app.media.pngSample'))
      this.afterSamplingFunc($r('app.media.pngSample'))
    } else if (value === 'AT_MOST') {
      this.imageKnifeOption = {
        loadSrc: $r('app.media.pngSample'),
        placeholderSrc: $r('app.media.loading'),
        errorholderSrc: $r('app.media.app_icon'),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.AT_MOST
      }
      this.originalPixMap($r('app.media.pngSample'))
      this.afterSamplingFunc($r('app.media.pngSample'))
    } else if (value === 'FIT_CENTER_MEMORY') {
      this.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 = {
        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 = {
        loadSrc: $r('app.media.pngSample'),
        placeholderSrc: $r('app.media.loading'),
        errorholderSrc: $r('app.media.app_icon'),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.CENTER_INSIDE_MEMORY
      }
      this.originalPixMap($r('app.media.pngSample'))
      this.afterSamplingFunc($r('app.media.pngSample'))
    } else if (value === 'CENTER_INSIDE_QUALITY') {
      this.imageKnifeOption = {
        loadSrc: $r('app.media.pngSample'),
        placeholderSrc: $r('app.media.loading'),
        errorholderSrc: $r('app.media.app_icon'),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.CENTER_INSIDE_QUALITY
      }
      this.originalPixMap($r('app.media.pngSample'))
      this.afterSamplingFunc($r('app.media.pngSample'))
    } else {
      this.imageKnifeOption = {
        loadSrc: $r('app.media.pngSample'),
        placeholderSrc: $r('app.media.loading'),
        errorholderSrc: $r('app.media.app_icon'),
        objectFit: ImageFit.Contain,
        downsampleOf: DownsampleStrategy.AT_LEAST
      }
      this.originalPixMap($r('app.media.pngSample'))
      this.afterSamplingFunc($r('app.media.pngSample'))
    }
  }

  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)) as string;
    let decodingOptions: image.DecodingOptions = {
      editable: true,
      desiredPixelFormat: 3,
    }
    let imageInfo = await imageSource.getImageInfo()

    if (this.imageKnifeOption.downsampleOf !== DownsampleStrategy.NONE && this.imageKnifeOption.downsampleOf != undefined ) {
      let reqSize =
        new Downsampler().calculateScaling(typeValue, imageInfo.size.width, imageInfo.size.height, 300,
          300, this.imageKnifeOption.downsampleOf)
      decodingOptions = {
        editable: true,
        desiredSize: {
          width: reqSize.width,
          height: reqSize.height
        }
      }
    }

    // 创建pixelMap
    imageSource.createPixelMap(decodingOptions).then((pixelMap: image.PixelMap) => {
      imageSource.release()
      this.afterSampling = pixelMap.getPixelBytesNumber()
      pixelMap.release()
    }).catch((err: BusinessError) => {
      imageSource.release()
      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) => {
      imageSource.release()
      this.beforeSampling = pixelMap.getPixelBytesNumber()
      pixelMap.release()
    }).catch((err: BusinessError) => {
      imageSource.release()
      console.error('Failed to create PixelMap')
    });
  }
  getResourceString(res:Resource){
    return getContext().resourceManager.getStringSync(res.id)
  }
  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(this.getResourceString($r('app.string.Sampling_pecification'))+ item.value).fontSize(20)
          }
        }, (item: SamplingType) => JSON.stringify(item))
        Column() {
          Text(`${this.getResourceString($r('app.string.Unreal_samples'))}：${this.beforeSampling}`).fontSize(20)
          Text(`${ this.getResourceString($r('app.string.After_the_sampling'))}：${this.afterSampling}`).fontSize(20)
        }

        ImageKnifeComponent({
          imageKnifeOption: this.imageKnifeOption
        })
          .height(px2vp(300))
          .width(px2vp(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
  }
}