ImageKnife/entry/src/main/ets/pages/SingleImage.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 { ImageKnifeComponent,BlurTransformation } from '@ohos/libraryimageknife';
import fs from '@ohos.file.fs';
import image from '@ohos.multimedia.image';
import { common2D, drawing } from '@kit.ArkGraphics2D';

@Entry
@Component
struct SingleImage {
  resource: string = 'app.media.svgSample'
  scroller: Scroller = new Scroller;
  localFile: string = getContext(this).filesDir + '/icon.png'
  @State pixelMap:PixelMap | undefined = undefined;
  @State DrawingColorFilter: ColorFilter | undefined = undefined
  private color: common2D.Color = { alpha: 255, red: 255, green: 0, blue: 0 };
  aboutToAppear(): void {
    // 拷贝本地文件
    let icon: Uint8Array = getContext(this).resourceManager.getMediaContentSync($r('app.media.startIcon'));
    let file = fs.openSync(this.localFile, fs.OpenMode.CREATE | fs.OpenMode.READ_WRITE);
    fs.writeSync(file.fd, icon.buffer);
    fs.fsyncSync(file.fd);
    fs.closeSync(file);
    this.changePic(getContext().resourceManager.getMediaContentSync( $r('app.media.aaa'))
      .buffer as ArrayBuffer);


  }

  build() {
    Scroll(this.scroller) {
      Column() {
        Text($r('app.string.Local_SVG'))
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        ImageKnifeComponent({
          imageKnifeOption: {
            loadSrc: $r(this.resource),
            placeholderSrc: $r('app.media.loading'),
            errorholderSrc: $r('app.media.failed'),
            objectFit: ImageFit.Contain
          }
        }).width(100).height(100)
          .onClick(()=>{
            this.DrawingColorFilter = drawing.ColorFilter.createBlendModeColorFilter(this.color, drawing.BlendMode.SRC_IN);
          })
        ImageKnifeComponent({
          imageKnifeOption: {
            loadSrc: $r('[sharedlibrary].media.pngSample'),
            placeholderSrc: $r('app.media.loading'),
            errorholderSrc: $r('app.media.failed'),
            objectFit: ImageFit.Contain
          }
        }).width(100).height(100)
        Text($r('app.string.Under_context_file'))
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        ImageKnifeComponent({
          imageKnifeOption: {
            loadSrc: this.localFile,
            placeholderSrc: $r('app.media.loading'),
            errorholderSrc: $r('app.media.failed'),
            objectFit: ImageFit.Contain
          }
        }).width(100).height(100)
        Text($r('app.string.Network_images'))
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        ImageKnifeComponent({
          imageKnifeOption: {
            loadSrc:'https://www.openharmony.cn/_nuxt/img/logo.dcf95b3.png',
            placeholderSrc: $r('app.media.loading'),
            errorholderSrc: $r('app.media.failed'),
            objectFit: ImageFit.Contain,
            progressListener:(progress:number)=>{console.info('ImageKnife:: call back progress = ' + progress)},
            // 通过https协议进行连接时，默认使用系统预设CA证书。若希望使用自定义证书进行https连接，则需要将自定义证书上传至应用沙箱目录中，并在caPath中指定该证书所在的应用沙箱路径
            // caPath: '/data/storage/el1/bundle/ca.pem',
          }
        }).width(100).height(100)
        Text($r('app.string.Custom_network_download'))
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        ImageKnifeComponent({
          imageKnifeOption: {
            loadSrc: 'https://file.atomgit.com/uploads/user/1704857786989_8994.jpeg',
            placeholderSrc: $r('app.media.loading'),
            errorholderSrc: $r('app.media.failed'),
            objectFit: ImageFit.Contain,
            headerOption:[{
              key:'refer',
              value:'xx.xx.xx.xx'
            }],
            customGetImage: custom,
            transformation: new BlurTransformation(10)
          }
        }).width(100).height(100)
        Text($r('app.string.PixelMap_loads_images'))
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
        ImageKnifeComponent({
          imageKnifeOption: {
            loadSrc: this.pixelMap!,
            placeholderSrc: $r('app.media.loading'),
            errorholderSrc: $r('app.media.failed'),
            objectFit: ImageFit.Contain,
          }
        }).width(100).height(100)
      }
      .width('100%')
    }
    .height('100%')
  }

  changePic(buffer: ArrayBuffer){
    let imageSource: image.ImageSource = image.createImageSource(buffer);
    if (imageSource) {
      let decodingOptions: image.DecodingOptions = {
        editable: true,
      }
      imageSource.createPixelMap(decodingOptions,(err,pixelMap)=>{
        imageSource.release()
        this.pixelMap = pixelMap;
      })
    }
  }
}

// 自定义下载方法
@Concurrent
async function custom(context: Context, src: string | PixelMap | Resource,headers?: Record<string,Object>): Promise<ArrayBuffer | undefined> {
  let refer = headers!['refer'] as string
  console.info('ImageKnife::  custom download：' + src,'refer:'+refer)
  // 举例写死从本地文件读取，也可以自己请求网络图片
  let buffer = context.resourceManager.getMediaContentSync($r('app.media.startIcon').id).buffer as ArrayBuffer
  return buffer
}