ImageDownloadComponent.ets 4.5 KB
import { abilityAccessCtrl, common, Permissions } from '@kit.AbilityKit';
import { http } from '@kit.NetworkKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { promptAction } from '@kit.ArkUI';
import { image } from '@kit.ImageKit';
import { photoAccessHelper } from '@kit.MediaLibraryKit';
import fs from '@ohos.file.fs';

const PERMISSIONS: Array<Permissions> = [
  'ohos.permission.READ_IMAGEVIDEO',
  'ohos.permission.WRITE_IMAGEVIDEO'
];

/*
 * saveButton参考文档
 * https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/savebutton-0000001820999677
 * */
@Component
export struct ImageDownloadComponent {
  @State image: PixelMap | undefined = undefined;
  @State photoAccessHelper: photoAccessHelper.PhotoAccessHelper | undefined = undefined; // 相册模块管理实例
  @State imageBuffer: ArrayBuffer | undefined = undefined; // 图片ArrayBuffer
  @Prop @Watch('onChangeUrl') url: string = ''

  build() {
    Column() {
      // Image($r('app.media.save_detail_img'))
      //   .width(24)
      //   .height(24)
      //   .margin({bottom:6})
      SaveButton({ icon: SaveIconStyle.LINES })
        .iconSize(24)
        .iconColor(Color.White)
        .onClick(async () => {
          console.info(`cj2024 onClick ${this.imageBuffer}`)
          if (this.imageBuffer !== undefined) {
            await this.saveImage(this.imageBuffer);
            promptAction.showToast({
              message: $r('app.string.image_request_success'),
              duration: 2000,
              alignment:Alignment.Center
            })
          }
        })
    }

  }

  aboutToAppear(): void {
    this.onChangeUrl()
  }

  async onChangeUrl(): Promise<void> {
    console.info(`cj2024 图片下载 ${this.url}`)
    const context = getContext(this) as common.UIAbilityContext;
    const atManager = abilityAccessCtrl.createAtManager();
    await atManager.requestPermissionsFromUser(context, PERMISSIONS);
    this.getPicture();
  }

  /**
   * 通过http的request方法从网络下载图片资源
   */
  async getPicture() {
    console.info(`cj2024 getPicture`)
    http.createHttp()
      .request(this.url,
        (error: BusinessError, data: http.HttpResponse) => {
          if (error) {
            // 下载失败时弹窗提示检查网络,不执行后续逻辑
            promptAction.showToast({
              message: $r('app.string.image_request_fail'),
              duration: 2000
            })
            return;
          }
          this.transcodePixelMap(data);
          // 判断网络获取到的资源是否为ArrayBuffer类型
          console.info(`cj2024 getPicture ${data.result}`)
          if (data.result instanceof ArrayBuffer) {
            console.info(`cj2024 getPicture 222`)
            this.imageBuffer = data.result as ArrayBuffer;
          }
        }
      )
  }

  /**
   * 使用createPixelMap将ArrayBuffer类型的图片装换为PixelMap类型
   * @param data:网络获取到的资源
   */
  transcodePixelMap(data: http.HttpResponse) {
    console.info(`cj2024 transcodePixelMap ${data.responseCode}`)
    if (http.ResponseCode.OK === data.responseCode) {
      const imageData: ArrayBuffer = data.result as ArrayBuffer;
      // 通过ArrayBuffer创建图片源实例。
      const imageSource: image.ImageSource = image.createImageSource(imageData);
      const options: image.InitializationOptions = {
        'alphaType': 0, // 透明度
        'editable': false, // 是否可编辑
        'pixelFormat': 3, // 像素格式
        'scaleMode': 1, // 缩略值
        'size': { height: 100, width: 100 }
      }; // 创建图片大小

      // 通过属性创建PixelMap
      imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
        this.image = pixelMap;
      });
    }
  }

  /**
   * 保存ArrayBuffer到图库
   * @param buffer:图片ArrayBuffer
   * @returns
   */
  async saveImage(buffer: ArrayBuffer | string): Promise<void> {
    console.info(`cj2024 saveImage buffer ${buffer}`)
    const context = getContext(this) as common.UIAbilityContext; // 获取getPhotoAccessHelper需要的context
    const helper = photoAccessHelper.getPhotoAccessHelper(context); // 获取相册管理模块的实例
    const uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'jpg'); // 指定待创建的文件类型、后缀和创建选项,创建图片或视频资源
    console.info(`cj2024 saveImage uri ${uri}`)
    const file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
    await fs.write(file.fd, buffer);
    await fs.close(file.fd);
  }
}