如何保存image.PixelMap到图库?

需要将页面上的图片或者是组件的截图保存到图库中,目前使用picker.PhotoViewPicker进行保存,是保存到手机文件中,可用文件管理打开查看。查询文档没有找到可以保存到图库的接口

阅读 604
1 个回答

请参考下载图片到相册demo:

import http from '@ohos.net.http';
import ResponseCode from '@ohos.net.http';
import image from '@ohos.multimedia.image';
import { BusinessError } from '@ohos.base';
import photoAccessHelper from '@ohos.file.photoAccessHelper'
import fs from '@ohos.file.fs'

@Entry
@Component
struct Index {
  @State pixelMap: PixelMap | undefined = undefined;

  loadImageWithUrl(url: string) {
    let OutData: http.HttpResponse
    let imagePackerApi = image.createImagePacker();
    let packOpts: image.PackingOption = { format: "image/jpeg", quality: 98 };
    //确保网络正常
    http.createHttp().request(url,
      {
        method: http.RequestMethod.GET,
        connectTimeout: 60000,
        readTimeout: 60000

      },
      async (error: BusinessError, data: http.HttpResponse) => {
        if (error) {
          console.error(`http reqeust failed with. Code: ${error.code}, message: ${error.message}`);
        } else {
          OutData = data
          let code: http.ResponseCode | number = OutData.responseCode
          if (ResponseCode.ResponseCode.OK === code) {
            let imageData: ArrayBuffer = OutData.result as ArrayBuffer;
            let imageSource: image.ImageSource = image.createImageSource(imageData);

            class tmp {
              height: number = 100
              width: number = 100
            }

            let si: tmp = new tmp()
            let options: Record<string, number | boolean | tmp> = {
              'alphaType': 0, // 透明度
              'editable': false, // 是否可编辑
              'pixelFormat': 3, // 像素格式
              'scaleMode': 1, // 缩略值
              'size': { height: 100, width: 100 }
            } // 创建图片大小
            imageSource.createPixelMap(options).then((pixelMap: PixelMap) => {
              this.pixelMap = pixelMap
              this.pixelMap.getImageInfo().then((info: image.ImageInfo) => {
                console.info('info.width = ' + info.size.width)
              }).catch((err: BusinessError) => {
                console.error("Faild " + err);
              })
              imagePackerApi.packing(pixelMap, packOpts).then(async (buffer: ArrayBuffer) => {
                //
                try {
                  const context = getContext(this)
                  let helper = photoAccessHelper.getPhotoAccessHelper(context)
                  let uri = await helper.createAsset(photoAccessHelper.PhotoType.IMAGE, 'png')
                  let file = await fs.open(uri, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
                  //let buffer = new ArrayBuffer(this.pixelMap!.getPixelBytesNumber())
                  // await this.image!.readPixelsToBuffer(buffer)
                  // 写入文件 注意加一个packing的过程
                  await fs.write(file.fd, buffer);
                  // 关闭文件
                  await fs.close(file.fd);
                  console.log("44444444454")
                } catch (error) {
                  console.error("error is " + JSON.stringify(error))
                }

              }).catch((error: BusinessError) => {
                console.error('Failed to pack the image. And the error is: ' + error);
              })

              pixelMap.release();
            })
          }
        }
      }
    )
  }

  build() {
    Row() {
      Column() {
        Button("点击下载并保存网络图片", { type: ButtonType.Capsule, stateEffect: false })
          .width('100%')
          .height(55)
          .fontSize('15fp')
          .fontColor('#ffffff')
          .margin({ top: 20 })
          .onClick(() => {
            this.loadImageWithUrl("https://xxx.xxx.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280")

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

涉及到代码权限申请,请参考https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-photoaccesshelper-0000001821001585\#ZH-CN\_TOPIC\_0000001821001585\_\_photoaccesshelpergetphotoaccesshelper

需要申请权限,即把该权限打入p7b证书(参考https://developer.huawei.com/consumer/cn/doc/app/agc-help-harmonyos-releaseapp-0000001126380068\#section154181517295),并在需要调用该api的模块的module.json5中配置

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进